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.
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.
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 Page layout dropdown. You can opt to have them display in Masonry (where all of your images will display across the top of the page, styled similarly to the homepage masonry section) or in a Grid (where just one image shows at the top, with secondary images either stacked below or displayed as thumbnails).
You can also customize how customers view your product images using the Images layout dropdown. The options are Slideshow (meaning users will be able to click through images using thumbnails or arrows) 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.
Check Add product to cart without leaving product page if that's something you want customers to be able to do. 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 SHARE ICONS
If you would like to enable share buttons on your products pages, check Show share icons. You'll be able to connect the networks you want to display from General settings>Social media.
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.
Checking Show collection 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 to the left of the collection name and description (if enabled) and above your 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.
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 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.
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
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.
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.