Product template

Customize Theme > Sections > Click any product on your store

Accessing the product section of the theme customization panel

Introduction

In this section you will learn how to:

1. Configure general product information display and product tabs
2. Setup global product/brand features
3. Setup product reviews
4. Setup related products

1. Configure general product information display and product tabs

Loft includes a few standard product page options such as:

1. Enable mobile sticky add to cart
2. Use Ajax cart
3. Show/hide the quantity selector
4. Show/hide dynamic checkout button
5. Show/hide vendor
6. Enable image zoom
7. Show/hide social sharing icons

In addition to the standard options above, you have the ability to determine how large the product image should show up. Under the “Desktop image size” dropdown, you can select small, medium and large. Each of these options impacts how large the product photo is, and in the case of the “large” option, will also impact how much space the product description/product details take up.

Example of how image size options change the page layout

Also, you are able to choose the position of the Add to cart button with two options ("Below","Above"). The two values are related to the product description.

Example of how the position of the add to cart changes

Loft product pages can also display informational tabs. These are global to all product pages, and are best used for information like shipping policies and return policies; information that applies to all products.

In order to utilize tabs, you need to do two things:

1. Create a Shopify page where your content is stored. For example, if you’d like to display your return policy, you must first create a Shopify Page (how to create a new page) with the appropriate content.
2. Next, inside of the theme customization panel, enter your tab names and link each tab to the appropriate page.

Adding product page tabs

2. Setup global product/brand features

Example global features block

Loft comes with two global feature blocks already installed. In order to access them, open the theme customization panel, navigate to a product, and click the section “Additional details”. Once there, you’ll see two pre-existing blocks that you can fill in.

1. Determine if you’d like the image on the left or right side of the page.
2. Upload an image.
3. Set the image’s “focus” if necessary (top, middle or bottom) - this is helpful for large images that may be cropped when you upload them.
4. Set a title.
5. Set a description for the field.

Note: because of how sections work in Shopify, these image/text sections are global to all products in your store, so be sure to include information that is applicable to your entire store.

Example of setting up brand features

3. Setup product reviews

Add product reviews to your product page with the following steps:

1. Install the Shopify Product Reviews app.
2. Click the “Add content” button
3. Selected “Shopify Reviews”

   

Note: If your theme's version doesn't come with this option, please take a look at this article here which will help you implement the right code. 

 

Example of setting up product reviews

4. Setup related products

Displaying related products requires just a few clicks:

1. Open the theme customization panel, navigate to a product, and click the section “Additional details”.
2. Click the “Add content” button
3. Selected “Related products”
4. Enter a title (optional) for your related products field.

Note: Loft looks at the collection of the current product, and pulls other products from the same collection to display here. If you need this section to show specific related products for each product, this is a customization we can assist with. Simply email [e-mail] - this modification isn’t free, but we can set it up for a small fee.

Adding the related products block