Grid's products and collections

Your product and collection pages are the lifeblood of your ecommerce store. They're where you display your products, convey their value, and, if you're lucky, make the sale.

You'll upload and configure your products and collections in the Shopify admin (you can read more about that here), but when it comes to customizing how they display, you'll do that within the theme editor. Just navigate to the page in the theme editor and you'll see a section pop up, giving you access to settings specific to that page. We'll give you the rundown on the settings for each page below.

Product pages

grid-product-page

The product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. With Grid, you can customize your product pages by navigating to a product page in the theme editor and clicking on  Product pages under the Sections tab.

SETTINGS

Off the top, you'll choose whether or not to  Show vendor name using the corresponding checkbox.

Next, you'll choose how you want your images to display using the Product images layout dropdown. The options are Slideshow (meaning users will be able to click through images using thumbnails) or List view (meaning users will be able to scroll vertically through full-sized images).

You can  Enable image zoom by checking that option. Enabling this will mean that when a user hovers over a product image, a magnifying glass icon will appear and they will be able to click to get an up-close look at your product. Note that this feature only works when the slideshow layout is selected from the menu above. It also necessitates using large, high-res product photography.

Checking Show related products will allow customers to discover other items that are similar to the one they are currently viewing. Related products are automatically pulled from the same collection as the product in view. You can customize the alignment of these products using the Align related products dropdown. Below is an example of related products with Below product info alignment.

related-products

Finally, you can allow users to  Add product to cart without leaving product page by checking that option. This means that when a user adds an item to their cart, they will stay on the page they are currently on, as opposed to being directed to the cart page.

SHOW SHARING ICONS

If you would like to enable share buttons on your products pages, checkShow share icons. You'll be able to connect the networks you want to display from General settings>Social media.

Collection pages

collection-page

A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin (more information  here). In Grid, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pages under the Sections tab.

SETTINGS

Checking  Show featured image will pull the collection image you have set in the Products>Collections area of your Shopify admin onto your collection pages. It will display below the collection name and above your description (if enabled) and products.

Likewise, checking  Show description will pull a collection description onto your collection pages. This can be set on the page for each collection under Products>Collections in the Shopify admin.

Checking  Enable sorting allows customers to sort products in a different order than they appear by default (e.g. Featured, Price: Low to High, Price: High to Low, A-Z, Newest to Oldest, etc.).

The Enable tag filtering option allows visitors to sort products by custom tags, which can be added to product pages in your Shopify admin. You'll find them under Organization on the right side of each product editing screen.

You can also specify the  Number of products per row (2, 3, or 4) and the Number of rows (2 to 12) that display on your collection pages using the dropdown menus.

PRODUCT ITEM

Checking  Show vendor will display the brand or supplier name above the product name. You can add and edit these on the product pages of the Shopify admin.

From the  Hover interaction dropdown menu, you can select what happens when a user hovers over a product. The options are: Quickshop (which will open a modal with the product details and an add-to-cart button), Show secondary image (which will flip the image to an alternate view of the product), Stock level indicator (which will show a warning when stock is below a certain level), and None (which is self-explanatory). You can set this level from the dropdown below.

You can also choose to  Show 'on sale'/'sold out' badges on products in your collections by checking that option. The first option will display text badges, however, you can also Use icons for product item badges by checking that option.

Collection list page

collections-list-page

The collection list page displays an index of your store's collections. To access the settings for this page, navigate to your catalog or collections page in the theme editor and then click  Collection list page under the Sections tab.

SETTINGS

Checking  Show description will include the descriptions of your collections on your collection list page. These descriptions can be edited for each collection in the Products>Collections section of your Shopify admin.

You can also specify the  Number of products per row (2 or 3) and the Number of rows (2 to 6) that display on your collection pages using the dropdown menus.