Product page

Product page:

The Product page is one of the most important pages on any store. It’s where customers can access in-depth information and learn about other products they might be interested in. More importantly, it’s where purchases are most frequently made, and as such, an effective Product page is essential for any Shopify store.

How to set up the Product page ?

Go to Customize theme. Click on the top dropdown menu to select the Products>Default product template.
From the left side menu, select “Product page”
Customize this section by using the settings described in the following table:

Customize section settings:

Settings	Description
Enable Stick product info on scroll	When scrolling down a page, the product information column doesn’t begin scrolling until all images have been scrolled through.
Gallery view	Select any different gallery view from the drop-down menu to display product media on the product page. These options are: Full width with 2 thumbnails Full width thumbnails Slider with thumbnails(default) Slider w/o thumbnail
Media width	The width of the media/images on desktop.Choose between Small, Medium (default) and Large. Note - Media will be full width on mobile.
Image ratio	The Image ratio for the product images: Adapt to image (default): Adapt to image should only be used when images are the same dimensions. Square: Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Bottom sticky bar	This block will show a small overlay summary of the product information that can be used to scroll the page back to the product form when it is no longer in view. This provides a convenient way for the customer to return to the product from once they’ve scrolled passed it.There are customization block settings available for this: Enable: Select this checkbox to show/hide the bottom sticky bar. Enable compare: Select this checkbox to show/hide the compare icon on the bottom sticky bar.
Color scheme	A set of colors that you can apply to this section.
Slideshow settings	Only applies if gallery view has selected.
Show next/previous arrows	Select this checkbox to enable/disable the “Show next/previous arrows” option in the slider. Note - Arrows will be visible only on desktop.
Slide Navigation style	The style of the slideshow navigation that appears below the image. None Dots Lines(default) Numbers
Section spacing	Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.

Customize block settings:

It has the following types of blocks.

Settings	Description
Text	Enter additional text to display.To display dynamic data like product Title or Vendor, select the Insert dynamic source icon shown next to the Text box and select any metafield to add there.
Title	Displays the product’s title. There are no customization block settings available for this. Title size: The size of the Tittle. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Statistics bar Settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Show discount	Select this checkbox to show/hide the discount of the product.
Show product rating	It displays customer review and ratings. These reviews can be included by adding the Product reviews app.
Enable compare	The compare button allows the customers to add an item to the comparison list which will be in a pop-up when users click the compare button.
Enable share	Select this checkbox to show/hide the share button of the product.
Description	Displays the product description on the page. There are customization block settings available for this. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Stock statistics bar	There are customization block settings available for this. Enable: Select the checkbox to show/hide sale countdown timer. End date: Type the date you want the countdown to end. The format must be use as follow: yyyy-mm-dd. End text: Set the any end text. This shows when the end date elapses. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Price and variations	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Show variations	Select this checkbox to show/hide the variations of the product.
Enable ask question	Select this checkbox to enable/disable the ask question button on click of which contact form will appear.
Show SKU	It displays the product SKU.
Enable size chart	This is the block settings for the Prices and Variations. Select any image to show as a size chart for products. It shows a link button “Size chart” on the product page.
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.
Quantity Selector	There are customization block settings available for this. Show subtotal: Select this checkbox to show/hide the Subtotal value of the product. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Buy buttons	There are customization block settings available for this. Show dynamic checkout buttons: Display any checkout options that you have enabled in your Payment methods. Show recipient from for gift card products: Check this checkbox to show the gift card form on the gift card products. Gift card products can be sent directly to a recipient with a personal message by using this form. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Pickup	There are customization block settings available for this. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Message box	There are customization block settings available for this. Image: Select any image to display. Heading: The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link. Subheading: The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link. Description: Display paragraph-style text in the section. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Icon with description	There are customization block settings available for this. Image: Select any image to display. Heading: The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link. Description: Display paragraph-style text in the section. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Collapsible row	There are customization block settings available for this. Heading: The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link. Description: Display paragraph-style text in the section. Enable default open: Select this checkbox to enable/disable the default open collapsible row. Block spacing: Add space to the top or bottom of the block. Use the range slider to add between 0px and 100px of space to the top or the bottom of your block.
Complementary products	To select complementary products, add the Search & Discovery app.
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Heading size	The size of the heading text. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small
Complementary as bundle	If Enabled, products will be shown to bottom as products card.
Discount text	It displays the discount text.
Custom liquid	This section is used to add the custom liquid code for any advanced customization like app snippets. Refer to Shopify developers: Custom liquid reference(opens new window)
Image ratio	The Image ratio for the product images: Adapt to image(default): Adapt to image should only be used when images are the same dimensions. Square: Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Slideshow setting	Only applies if complementary as bundle is disabled. There are customization block settings available for this. Show next/previous arrows: Select this checkbox to enable/disable the “Show next/previous arrows” option in the slider. Note - Arrows will be visible only on desktop.
Color scheme	A set of colors that you can apply to this section.
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.

Product recommendations:

If a customer redirects to a product page from your store, related products will be shown in the product recommendation. Based on the product currently being viewed, this section displays similar products, product with a similar description, or products that are frequently bought together with this product.

Note – The “ Product recommendations” section is only available on the default product and feature pages.

How to set up the Recommended Product section?

Go to Customize theme. Click on the top dropdown menu to select the Products>Default product template.
From the left side menu, select “Recommended Product”.
Customize this section by using the settings described in the following table:

Customize section settings:

Settings	Description
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Heading size	The size of the heading text. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small
Description	Display paragraph-style text in the section.
Grid Settings	Number of columns to display on desktop computers. Minimum: 2, Maximum: 4 Number of rows to display on desktop computers. Minimum: 1 , Maximum: 3
Product card settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Image ratio	The image ratio for the product images: Adapt to image (default): Adapt to image should only be used when images are the same dimensions. Square: Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Show product rating	It displays customer review and ratings. These reviews can be included by adding the Products reviews app.
Show inventory	Select this checkbox to show/hide the inventory of the product.
Show discount	Select this checkbox to show/hide the discount of the product.
Show vendor	Displays the vendors of the products.
Enable compare	The compare button allows the customers to add an item to the comparison list which will be in a pop-up when users click the compare button.
Enable quick add button	The quick add button allows customers to add an item to their cart from the product card. If the card has variants, then the button will read “Quick add” and redirect the product detail page, where the customer can select the desired variants, add the item to cart, checkout immediately with “buy now”. Note - This setting is dependent on the “buy now” button being enabled on your product page. If “Buy now” button isn’t enabled on the product template, then customers have the option to add the product to their cart, but won’t see the quick “buy now” checkout workflow.
Color scheme	A set of colors that you can apply to this section.
Text Alignment	Align the text in the container. Choose between left, center (default), or right.
Center text on mobile	Select this checkbox to enable/disable the “Center text on mobile” option on the mobile devices.
Enable Slideshow Settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Auto-play slides	Select this checkbox to enable/disable the “Auto-play slides” option in the slider. It keeps changing slides automatically on the storefront.
Show next/previous arrows	Select this checkbox to enable/disable the “Show next/previous arrows” option in the slider. Note - Arrows will be visible only on desktop.
Slide Navigation style	The style of the slideshow navigation that appears below the image. None(default) Dots Lines Numbers
Change slides every	This settings will only work when the “Auto-play slides” option is enabled. And, it only provides a range of 2 to 9 seconds. Note - This will only work if auto-play is enabled.
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.