> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/metro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/metro/overview/template-product.md).

# Template product

### Configure main product

Go to **Customize theme**. Select the Products > Default product template on the top dropdown menu.

From the left side menu, select **“Product information.”**

Customize the section by utilizing the settings on the right side of the theme editor, as described below:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Main product</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Background</strong><br>Choose the section background from below options:<br>- Solid<br>- Gradient<br><br><strong>Container width</strong><br>Choose the container width from below options:<br>- Small<br>- Standard<br>- Wide<br>- Edge<br><br><strong>Card radius</strong><br>Adjust the range bar to determine the card's radius.<br><em>(<strong>Note</strong>: Radius is automatically optimized for mobile.)</em></td></tr><tr><td>Section spacing</td><td><p><strong>Choose from</strong><br>Choose spacing for:<br>- Desktop<br>- Mobile<br><br><strong>Desktop: Top spacing</strong><br>Adjust the range bar to add spacing at the top of the section for desktop view.<br></p><p><strong>Desktop: Bottom spacing</strong><br>Adjust the range bar to add spacing at the bottom of the section for desktop view.<br></p><p><strong>Mobile: Top spacing</strong><br>Adjust the range bar to add spacing at the top of the section for mobile view.<br></p><p><strong>Mobile: Bottom spacing</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view.</p></td></tr><tr><td>Media</td><td><strong>Desktop media width</strong><br>Choose the media width from below options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Layout</strong><br>Choose the products layout from below options:<br>- Carousel with thumbnails<br>- Carousel with grid<br>- Grid<br><br><strong>Thumbnail position</strong><br>Choose the thumbnails position from below options:<br>- Overlay horizontal<br>- Overlay vertical<br>- Left side<br>- None<br><br><strong>Mobile layout</strong><br>Choose the thumbnails layout on mobile view, from below options:<br>- Show thumbnails<br>- Hide thumbnails<br><br><strong>Aspect ratio</strong><br>Choose the images ratio from below options:<br>- Adapt to image<br>- Adapt to first image<br>- Square<br>- Portrait<br>- Portrait slim<br>- Landscape<br><br><strong>Enable image zoom</strong><br>Select this checkbox to show zoom on product images.<br><br><strong>Enable video autoplay</strong><br>Select this checkbox to enable auto play of product videos. <br><br><strong>Enable video looping</strong><br>Select this checkbox to enable auto looping of product videos. <br><br><strong>Enable sticky add to cart</strong><br>Select this checkbox to enable sticky add to cart.<br><br><strong>Show overview interlink tab</strong><br>Select this checkbox to enable the overview interlink tab.</td></tr></tbody></table>

### Block settings

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Vendor</td><td>This block shows the product vendor.</td></tr><tr><td>Title</td><td>This block shows the product title.<br><br><strong>Heading size</strong><br>Select the font size from the following options:<br>- Heading XL<br>- Heading L
<br>- Heading M<br>- Heading S<br>- Heading XS
<br>- Heading XXS<br><br><strong>Heading tag</strong><br>Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes.</td></tr><tr><td>SKU</td><td>This block showcases the product SKU value.</td></tr><tr><td>Price</td><td>This block showcases the product price.<br><br><strong>Show taxes and shipping information</strong><br>Select this checkbox to show the tax and shipping content in the price block.</td></tr><tr><td>Variant picker</td><td>This block showcases the variants list.<br><br><strong>Style</strong><br>Select from the following options to determine the variant picker type:<br>- Dropdown<br>- Button<br><br><strong>Size guide</strong><br><strong>Option name</strong><br>Enter the option name that holds the size. E.g.: Size, Taille, etc.<br><br><strong>Heading</strong><br>Enter the title of size guide.<br><br><strong>Page</strong><br>Choose any page to show as a size guide.<br><br><strong>Labels(Size)</strong><br>Choose the size from the following options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Color swatch options</strong><br><strong>Shape</strong><br>Choose the appearance style of the swatches from below options:<br>- Sharp<br>- Rounded<br>- Circle<br>- None<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Variants: Other options</strong><br><em>(<strong>Note</strong>: The below settings apply to the product options except the color options.)</em><br><br><strong>Shape</strong><br>Choose the appearance style from below options:<br>- Sharp<br>- Rounded</td></tr><tr><td>Inventory status bar</td><td><p><strong>Low inventory threshold</strong><br>Adjust this range bar to determine the low stock limit.<br></p><p><strong>Show inventory count</strong></p><p>Select this checkbox to show the inventory quantity. </p></td></tr><tr><td>Pickup availability</td><td>This block displays pickup availability of the product.<br>For more details, refer to <a href="https://help.shopify.com/en/manual/fulfillment/setup/delivery-methods/pickup-in-store">docs.</a></td></tr><tr><td>Quantity selector</td><td>This block shows the quantity selector.<br><br><strong>Shape</strong><br>Choose the appearance style from below options:<br>- Sharp<br>- Rounded</td></tr><tr><td>Payment installments</td><td>This block is to show the Shop pay's installments information.</td></tr><tr><td>Buy buttons</td><td>This block is to show the <strong>Add to cart</strong> button along with below settings:<br><br><strong>Show dynamic checkout button</strong><br>Select the checkbox to show the dynamic checkout button. <br><br><strong>Show recipient information form for gift cards</strong><br>Select the checkbox to allows buyers to send gift cards on a scheduled date along with a personal message. <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields">Learn more</a></td></tr><tr><td>Payment icons</td><td>This block shows the payment icons. These icons can be setup from the Shopify payments under the Store settings.</td></tr><tr><td>Text</td><td><strong>Text</strong><br>This block shows the text.<br><br><strong>Text font size</strong><br>Choose the font size from following options:<br>- Extra Large<br>- Large<br>- Medium<br>- Regular<br>- Small<br>- Extra small</td></tr><tr><td>Description</td><td>This block shows the product description.<br><br><strong>Description size</strong><br>Choose the font size from following options:<br>- Extra Large<br>- Large<br>- Medium<br>- Regular<br>- Small<br>- Extra small</td></tr><tr><td>Social sharing</td><td>This block is to share the product on social media sites.<br> <em>Please go to the theme settings>Social media>Social sharing to choose the options.</em><br><br><strong>Share text</strong><br>Enter the text of social sharing icons.<br><br><strong>Show 'Share' with inventory</strong><br>Select this checkbox to show the share button with inventory.</td></tr><tr><td>Custom liquid</td><td><strong>Liquid</strong> <br>Add app snippets or other liquid code for any advanced customizations.  </td></tr><tr><td>Complementary Products</td><td><p><strong>Heading</strong> </p><p>Add text to the heading to highlight complementary products. <br> <br><strong>Maximum products to show</strong><br>Adjust the slider to highlight products between 2 to 10.  <br> <br><em>Note: To select complementary products, add the Search &#x26; Discovery app.</em> <a href="https://shopify.dev/docs/themes/product-merchandising/recommendations">Learn more</a> <br><br><strong>Show as collapsible row</strong><br>Select this checkbox to show this block in collapsible row.</p></td></tr><tr><td>Collapsible content</td><td><strong>Heading</strong><br>Enter any heading.<br><br><strong>Content</strong><br>Enter the custom content/description. It supports dynamic content as well.<br><br><strong>Page content</strong><br>Choose any page to show its content.<br><br><strong>Open collapsible row</strong><br>Select this checkbox to show the first tab opened by default.</td></tr><tr><td>Product highlights</td><td><strong>Image</strong><br>Choose any image from store library.<br><br><strong>Heading</strong><br>Add the heading text of highlight.<br><em><strong>Note</strong>: Leave the heading label blank to hide the icon column.</em><br><br><strong>Description</strong><br>Add the description text.</td></tr><tr><td>Interlink tab</td><td><p><em>(<strong>Note</strong>: Enable "Sticky Add to Cart" to make it function properly. Copy section id from the section you want to link to. Section id is visible on the section you want to link to.)</em></p><p><br><strong>Tab title</strong><br>Add the tab title text.<br><br><strong>Paste section id here</strong><br>Add the section ID to link it.</p></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://shinedezign.gitbook.io/metro/overview/template-product.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.