13. Icon Theme: Setting up the Product Page
In this article, we will go through how to set up the Product page.
By default, the Product page shows the product image gallery (with the thumbnails to the left), the vendor, price, variants, description, and related products (in the same collection).
Product Page Section Settings
There are some additional section settings in the theme editor that you can configure for the product page, but it is important to know that these settings will apply to all product pages, globally across the site, not just a single product page. To access these settings, you will go to the theme editor and click on the template picker and choose Product Page.
Enable Full Width
Allows the page to fill the full width of the browser window.
Display banner from collection
Displays the banner of the collection that the product is included in.
Enable Image Zoom
Enable image zoom toggles the display of a zoom in which is shown when your product main image is hovered. By default, this will show the original image uploaded for your product within the zoomed in view. Therefore it is imperative to upload high-resolution images with a minimum of 1200px x 700-800px in size.
Enable Click to Enlarge
Enable click to enlarge toggles the display of a pop up with a dark background that displays an enlarged version of the product image. Arrows are shown which can be used to progress through the images available in the image gallery. Facebook and Twitter icons can be used to socially share the product on each's platform. The magnify glass toggles zooming in on the image. The fullscreen button toggles a fullscreen view of the image. The play button allows the images to be automatically progress similar to a slideshow. The gallery buttons toggles a sidebar which contains all of the available images, each image can be clicked to shown in the pop up. The exit button exits out of the pop up, the escape key on the keyboard can also be used for the same function.
Gallery size allows the gallery portion of the product page to take more or less width on the page. The options include a range from small, medium, larger and ultra where ultra takes the most room for the gallery.
There are two Gallery Type options, the default option is "Slideshow with thumbnail" which displays are slideshow of the available product images. Alternatively the "Scroll gallery" option displays the product images in a column, where each image appears beneath each other.
Thumbnail position allows you to choose to show additional image thumbnails to the left, the right or below of the main image of your products.
Thumbnail Images to Show
The Thumbnail images to show option specified the number of thumbnail images shown near the image slideshow. By default it will show two thumbnail images and has a range to display up to six thumbnail images. If the setting is set to zero then no thumbnail images will appear near the image slideshow.
Slider Control Styles
The Slide control styles specify which styles the slider controls will be used for the image slideshow. By default it will be set to display arrows, the other options is to display as dots. Clicking the arrows or dots in the image gallery will show additional thumbnail images near the slideshow.
The Background Color option sets the color used for the product description.
Show Vendor & Variant SKU
Show Vendor allows you to toggle the vendor visibility, which shows by default. Show variant SKU toggles the visibility of the SKU assigned to your products variants, by default this is hidden.
Show Quantity Selector
The Show quantity selector option toggles displaying a quantity box which allows a user to select the quantity of the product that they want to purchase.
Product Variant Display
Sets the product variants to display as either swatches or as drop downs. There are three different swatch style options available when set to the swatch option.
Color Swatch Style
Sets the style of the swatches when the Product Variant Display option is set to swatches. The Default color option is when the theme applies what it believes is the most appropriate color. The "Custom uploaded images" option displays custom colors swatches that have been uploaded to the theme, please see our How to show custom color swatches guide for setting this up. The "Zoomed in variant images" shows the swatches as zoomed in version of the product variant images.
Show Back in Stock Form
The Show Back in Stock Form toggles displaying a form for users to enter their email address in when a product is out of stock.
Back in Stock Text
Sets the text instructions for the link that opens the Back in Stock Form.
Show Dynamic Checkout Buttons
Lets customers check out directly using a familiar payment method. Learn more.
Show Social Share Icons
Toggles displaying icons for social sharing for Pinterest, Twitter and Facebook.
Product Description Position
Sets the position of where the product description will appear. Can be set to either above product options, beneath product options or below the product image and options.
Lower Description Size and Background Color
Set the size to either small, medium or large. Set the background color of the lower description. Only available when the Product Description Position is set to "below the product image and options".
Product Shortcode Popups
Use shortcodes in your product description to show links to popups with unique product specific content. Learn more.
Toggles displaying a Customer Reviews section on the product page. Only works when the free Product Reviews App by Shopify is installed onto the store.
Re-orderable Product Tabs
The Content Section allows for re-orderable blocks to be used a tabs. Each block becomes a tab that users can tabs through. The positioning of the tabs are determined from the Product Description Position option mentioned previously. The available tabs include the product description, page content or tab content. There can be a total of 5 blocks added to the content area.