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, but when it comes to customizing how they display, you'll do that within the theme editor. 

Product pages

Product page in Grid Bright

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

Theme editor with sections and page selector visible

SETTINGS

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

If you would like to enable share buttons on your product pages, check  Show social media icons. You'll be able to connect the networks you want to display in Theme settings > Social media.

Next, you'll choose how you want your images to display using the Image layout dropdown. There are three options to choose from:

Slideshow - Your standard image page layout, with main image accompanied by smaller thumbnails of additional images. 

List - Similar to slideshow, but each image is full-sized and displayed in a collage-like column.  

Masonry - All of your images will display across the top of the page, styled similarly to the homepage masonry section.

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.

Enable cart redirection will bring the customer to the cart page after the add-to-cart (ATC) button has successfully adding an item. This can help streamline the purchasing process, especially if you have a smaller catalog. Note that some added apps require the customer to stay on the product page after ATC in order to function, so this option may need to be disabled.

Enable dynamic checkout button adds secondary cart button that offers customers an option to proceed directly to the Checkout page–bypassing the cart page entirely and completing the purchase with a preferred payment type.

ATC and dynamic checkout buttons on product page

Related products allow customers to discover other items that are similar to the one they are currently viewing.  This feature pulls from the collection associated with the product, ordered by whatever order is configured for that collection. If the product belongs to multiple collections, it will pull from the first collection it belongs to (alphabetically).

You can customize the alignment of these products using the  Alignment dropdown. 

Related products feature on product page

Collection pages

Collection page with 8 products visible

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 selecting Collection page in the page selector dropdown, or by navigating to any collection in the theme editor, and clicking on Collection pages under the Sections tab.

SETTINGS

Show collection image - This option will pull the collection image, set in the Products > Collections area of your Shopify admin, and display it on your collection pages. 

Show description - This option will pull a collection description onto your collection pages. This text content can be added in the collection admin (Products > Collections).

Enable sorting - This feature 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.).

Enable tag filtering - This option allows visitors to sort products using custom tags, which can be added in your Shopify admin, under Organization on the right side of each product editing screen.

Grid's Collection pages come with two Layout options: Default and Masonry. Default will display products in uniform rows (the number of which you can set below) and Masonry will display them in an offset collage style, similar to the Masonry section styling on the homepage.

Finally, you can specify the  Rows (2 to 12) and Number of products per row (2, 3, or 4) 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 Overlay/hover interaction dropdown menu, you can select what happens when a user hovers over a product. The options are: Quick shop (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), or None . If Stock level indicator is enabled, you can specify the trigger amount in the slider 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 with 6 collections in view

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

SETTINGS

Grid comes with two Layout options for your collection list page(s): Default or Masonry. Default will display your collection images and titles in standard rows and columns, whereas Masonry will create an offset collage-style layout, similar to the Masonry section on your homepage.

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 to 4) and the number of Rows (2 to 6) that display on your collection pages using the dropdown menus.



Back to top ↑

Next article:

Grid's blog and article pages