# Product page

<table><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Gallery style</td><td><p></p><p>Choose any style from the drop-down menu to display product media on the product page. Options include:</p><ul><li>Carousel</li><li>Stacked</li></ul></td></tr><tr><td>Desktop thumbnails position</td><td>Choose from the left or bottom to decide the thumbnail position. Please note that thumbnails work with carousel style only on the desktop view.</td></tr><tr><td>Overlap thumbnails</td><td>Select this checkbox to overlap the thumbnails on product images.<br><em>(Note: It will work only when thumbnails position is set to the bottom.)</em></td></tr><tr><td>Enable sticky content on desktop</td><td>Select this checkbox to enable the sticky content on the desktop.</td></tr><tr><td>Desktop media width</td><td>Select the desktop media width from <strong>Small</strong>, <strong>Medium</strong> or <strong>Large</strong>.</td></tr><tr><td>Desktop grid image ratio</td><td>Choose the product image ratio from the following options for the desktop view:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Image zoom</td><td>Choose the image zoom options from the following options:<br>- Click and hover<br>- Open lightbox<br>- None<br>(Note: Click and hover does not work on mobile.)</td></tr><tr><td>Enable sticky add to cart</td><td>Select this checkbox to show the sticky add to cart bar on the desktop and mobile view.</td></tr><tr><td>Mobile</td><td><strong>Show thumbnails on mobile view</strong><br>Select this checkbox to show the thumbnails on the mobile.<br><br><strong>Mobile grid image ratio</strong><br>Choose the product image ratio from the following options for the mobile view:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Colors</td><td><strong>Color scheme</strong><br>Select the color scheme from the given options. <em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em> </td></tr><tr><td>Section spacing</td><td><p><strong>Top spacing (desktop)</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.<br></p><p><strong>Bottom spacing (desktop)</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view.<br></p><p><strong>Top spacing (mobile)</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view.<br></p><p><strong>Bottom spacing (mobile)</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for mobile view.</p></td></tr></tbody></table>

**Block settings:**

<table><thead><tr><th width="289"></th><th></th></tr></thead><tbody><tr><td>Text</td><td>Add any text to show here. </td></tr><tr><td>Title</td><td>It displays the product’s title. It has no customizable block settings available.<br><br><strong>Heading size</strong><br>Choose the heading size in between H1 to H6.<br><br><strong>Heading tag</strong><br>Choose the heading tag for SEO and search engines for crawling purposes.</td></tr><tr><td>Review rating</td><td>It displays customer reviews and ratings. These reviews can be included by adding the <strong>Shopify reviews app</strong>.<br>Please refer to <a href="https://apps.shopify.com/product-reviews">Product Review app</a>. </td></tr><tr><td>SKU</td><td><p>It displays the product <strong>SKU</strong>. There are no customizable block settings available.</p><p><em>Refer to</em> <a href="https://help.shopify.com/en/manual/products/details"><em>Product details.</em></a></p></td></tr><tr><td>Price</td><td>It displays the product’s price like <strong>Sale</strong> and <strong>Compare</strong> price. <br><br><strong>Hide shipping content</strong><br>Tick this checkbox to hide the shipping content.</td></tr><tr><td>Icon &#x26; text<br>(Icon 1-3)</td><td><strong>Icon</strong><br>Choose any relevant icon to display.<br><br><strong>SVG code</strong><br>Add any SVG code to display the icon.<br><br><strong>Heading</strong><br>Type any text to display with the icon.</td></tr><tr><td>Inventory status bar</td><td><p><strong>Minimum inventory</strong><br>Adjust the range bar from 1 to 20 to set the minimum inventory.<br><br><strong>Available message</strong><br>Enter text to show in case the available stock is more than the minimum inventory set above.<br><br><strong>Low inventory message</strong></p><p>Enter text to show in case the available stock is less than the minimum inventory set above.<br><em>Note: Use ||inventory|| to show inventory count in message</em></p></td></tr><tr><td>Variant picker</td><td>This block is to display the variant options. Please refer to <strong>Theme settings > Product</strong> for the different variants styles (<strong>Dropdown</strong> and <strong>Color swatches</strong>).</td></tr><tr><td>Quantity picker</td><td>This block is to display a quantity selector, for selecting the number of products to purchase. It has no customizable block settings available.</td></tr><tr><td>Buy buttons</td><td>It shows the “<strong>Add to cart</strong>” and “<strong>Buy now</strong>” buttons. <br><br><strong>Show dynamic checkout button</strong><br>Tick the checkbox "<strong>Show dynamic checkout button</strong>" to display a button with the user's preferred payment method, in addition to the "<strong>Add to cart</strong>" button.</td></tr><tr><td>Pickup &#x26; availability</td><td>This block is to show the pickup &#x26; availability of the product options.</td></tr><tr><td>Coupon code</td><td><strong>Heading</strong><br>Enter any text to appear as heading in the block.<br><br><strong>Description</strong><br>Enter any text to appear as description in the block.<br><br><strong>Coupon code</strong><br>Enter the coupon code to display.</td></tr><tr><td>Complementary products</td><td><em>(Note: To select complementary products, add the Search &#x26; Discovery app.)</em><br><strong>Heading</strong><br>Enter any text to appear as heading<br><br><strong>Products count</strong><br>Adjust the range bar to determine the products count.</td></tr><tr><td>Collapsible content</td><td><strong>Show product description</strong><br>Tick this checkbox to show the product description in collapsible content.<br><br><strong>Description heading</strong><br>Add the description heading text.<br><br>Content 1-3<br><strong>Heading</strong><br>Add any heading to show as the collapsible heading.<br><br><strong>Description</strong> <br>Add any content to show.</td></tr><tr><td>Social sharing</td><td>This block shows the social sharing icons.</td></tr><tr><td>Size chart</td><td><strong>Select size chart</strong><br>Select any page to show as the size chart.</td></tr><tr><td>Description</td><td>This block is to display the product description.</td></tr><tr><td>Custom liquid</td><td><p>This is used to add custom liquid code for any advanced customizations such as app snippets.</p><p>For more understanding, refer to <a href="https://shopify.dev/docs/themes/liquid/reference">Shopify developers: Liquid reference</a>.</p></td></tr><tr><td>Back in stock</td><td><em>(Note: You will receive an email every time someone fills in this form. Email alerts will NOT be automatically sent to the customer when the product becomes available - you will need to do this.)</em><br><br><strong>Heading</strong><br>Add any heading text.<br><br><strong>Placeholder</strong><br>Add any placeholder text for the email field.<br><br><strong>Button text</strong><br>Enter any text for the button.<br><br><strong>Success message</strong><br>Enter any text for the success message.<br><em>(Note:  Back-in-stock form is always visible in the theme editor.)</em></td></tr></tbody></table>

## Product details:

<table><thead><tr><th width="300"></th><th></th></tr></thead><tbody><tr><td>Make top corners rounded</td><td>Select this checkbox to show the top corners rounded of the section.</td></tr><tr><td>Heading</td><td>Type any text to appear as a title.<br><em>(Note: To highlight the text with a different color, simply wrap it in bold.)</em></td></tr><tr><td>Heading size</td><td>Select the heading font size from H1-H6.</td></tr><tr><td>Heading tag</td><td>Select the heading tag from H1-H6 for SEO purposes.</td></tr><tr><td>Description</td><td>Enter any teaxt to display as the description.</td></tr><tr><td>Content alignment</td><td>Choose from <strong>Left</strong> or <strong>Center</strong> to determine the content alignment.</td></tr><tr><td>Specifications</td><td><strong>Open first collapsible by default</strong><br>Select the checkbox to keep the first collapsible open by default.<br><br><strong>Heading</strong><br>Type any text to appear as a title.<br><em>(Note: To highlight the text with a different color, simply wrap it in bold.)</em><br><br><strong>Heading size</strong><br>Select the heading font size from H1-H6.<br><br><strong>Heading tag</strong><br>Select the heading tag from H1-H6 for SEO purposes.<br><br><strong>Position</strong><br>Choose from <strong>Left</strong> or <strong>Center</strong> to determine the text position.<br><br><strong>Specification color</strong><br>Choose any color scheme for the specifications block color.<br><br><strong>Heading highlight</strong><br>Choose any color for the highlighted heading color.<br><br><strong>Gradiant highlight color</strong><br>Choose any gradiant color for the highlighted heading color.</td></tr><tr><td>Colors</td><td><p><strong>Color scheme</strong> <br>Select the color scheme.</p><p><em>Note: These can be managed from Theme settings> Color schemes.</em><br><br><strong>Section background</strong><br>Choose any color for the section background color. It works with the rounded corners only.<br><br><strong>Heading highlight</strong><br>Choose any color for the highlighted heading color.</p></td></tr><tr><td>Section spacing</td><td><p><strong>Top spacing (desktop)</strong></p><p>Adjust the slider to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Bottom spacing (desktop)</strong>  </p><p>Adjust the slider to add spacing at the bottom of the section for desktop view.  </p><p>  </p><p><strong>Top spacing (mobile)</strong>  </p><p>Adjust the slider to add spacing at the top of the section for mobile view.  </p><p>  </p><p><strong>Bottom spacing (mobile)</strong>  </p><p>Adjust the slider to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

#### Block settings:

**Description> Heading:** Add this block to display the product description.  Add any text to show as the description's custom heading in accordion.

**Collapsible content**

<table><thead><tr><th width="289"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td>Type any text to appear as a title of the collapsible block.</td></tr><tr><td>Description</td><td>Enter any text to appear as a description in the collapsible block.</td></tr></tbody></table>

**Specifications**

<table><thead><tr><th width="290"></th><th></th></tr></thead><tbody><tr><td>Icon</td><td>Choose any image to display as an icon.</td></tr><tr><td>Heading</td><td>Type any text to display the product features.</td></tr><tr><td>Link</td><td>Add any link to redirect the icon.</td></tr></tbody></table>