> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/fame-documentations/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/fame-documentations/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 **“Main Product.”**

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><p><strong>Gallery style</strong> </p><p>Select gallery style from the options:<br>-Carousel </p><p>-List<br>-Grid<br><br><strong>Enable fullwidth</strong><br>Select the checkbox to enable/disable the full width of the section. <br><br><strong>Emphasize first image in grid view</strong><br>Select the checkbox to display the initial image in full width while using grid view.<br><br><strong>Enable media fixed height</strong><br>Select this checkbox to show product media with a fixed height.  </p><p><br><strong>Enable zoom icon</strong><br>Select this checkbox to show the zoom icon on the product media gallery.<br></p><p><strong>Media desktop height</strong> </p><p>You can adjust the desktop media height from the given options:</p><p>-Small </p><p>-Medium </p><p>-Large </p><p><br><strong>Media mobile height</strong> </p><p>You can adjust the mobile media height from the given options:</p><p>-Small <br>-Medium </p><p>-Large <br><br><strong>Media fit</strong><br>Select the image fit from the following options:<br>- Cover<br>- Contain</p></td></tr><tr><td>Carousel</td><td><p><strong>Thumbnails position</strong> </p><p>Adjust the position from the given option. <br>-Left </p><p>-Right </p><p><em>(Note: Only applicable if the full-width carousel is disabled.)</em></p></td></tr><tr><td>Accordions/Tabs content</td><td><p><em>(Note: Heading text is required to display the description text content.)</em><br><strong>Content style</strong> </p><p>Select the content style from the given options: </p><p>-Tabs </p><p>-Accordion <br><br><strong>Show description</strong></p><p>Select/deselect the checkbox to show/hide the product description.</p><p></p><p><strong>Description heading</strong> </p><p>Add description Heading. </p></td></tr><tr><td>Custom content 1 - 3</td><td><p><strong>Heading</strong></p><p>Enter text to display as a title for the product details. E.g., Additional information, Shipping etc.  </p><p> </p><p><strong>Description</strong><br>Add text as a description for the product. </p></td></tr><tr><td>Quick order list</td><td><strong>Enable</strong><br>Select this checkbox to show the quick order list on the product page.<br><br><strong>Show SKU</strong><br>Select this checkbox to show the variants SKU in the list.<br><br><strong>Show variant image</strong><br>Select this checkbox to show the variants image in the list.<br><br><strong>Hide sold out variants</strong><br>Select this checkbox to hide the sold-out variants from the list.</td></tr><tr><td>COLOR</td><td><p><strong>Color scheme</strong> </p><p>Select the color scheme from the given options:<br>-Primary  <br>-Secondary  </p><p>-Tertiary  </p><p>-Quaternary</p><p> </p><p><em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em><br><br><strong>Enable gradient</strong><br>Select this checkbox to show the gradient in the background color. This can be selected from theme settings>color schemes.</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.</p><p>  </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

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Text</td><td>Add text to highlight product.</td></tr><tr><td>Title</td><td>Add title to product.</td></tr><tr><td>Review rating</td><td>To display ratings, add <a href="https://apps.shopify.com/product-reviews">Product Review app</a>. </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.</td></tr><tr><td>Size chart</td><td><p>This block showcases the size chart in a popup view. Select any page to show as the size chart.<br><br>CUSTOM SIZE CHART<br>Select a size chart from the meta-field to show a specific size chart product-wise.<br>Create a meta field with type 'Page.'<br><img src="/files/NhWiNZcyLrLptAOJIhrj" alt=""></p><p>On the shopify product page, select the custom page for size chart.</p><p><img src="/files/Zb7tPMIFsn0NVxQfNUHw" alt=""></p><p><br>Select that size chart from the dynamic source as shown below.</p><p><img src="/files/Caq8luMtFYlQHdW45D03" alt=""><br></p></td></tr><tr><td>Social Sharing</td><td>You can highlight social media icons.</td></tr><tr><td>Variant picker</td><td>This block showcases the variants list.</td></tr><tr><td>Inventory status bar</td><td><p><strong>Minimum inventory</strong><br>Adjust the slider to select minimum inventory. </p><p></p><p><strong>Available message</strong> </p><p>Add text to show the success message when the required inventory is available.</p><p></p><p><strong>Low inventory message</strong> </p><p>Add text inventory to highlight the low inventory. <br><em>(Note: Use ||inventory|| to show inventory count in the message.)</em></p></td></tr><tr><td>Pickup availability</td><td>This block displays pickup availability of the product.</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>Products count</strong> </p><p>Adjust the slider to highlight products between 1 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 below description</strong><br>Select this checkbox to show the products under the description in the full-width carousel style only.<br><em>(Note: It will work with a full-width carousel only.)</em></p></td></tr><tr><td>Line-item property</td><td><p><strong>Label</strong> </p><p>Add text to highlight the label.  </p><p> </p><p><strong>Property type</strong> </p><p>Add text to highlight property type. </p><p> <br><strong>Property value</strong>  </p><p>Add a description to label and type. </p></td></tr><tr><td>Buy buttons</td><td><p>This block shows the add to cart button.<br><br><strong>Show dynamic checkout button</strong><br>Select/deselect the checkbox to show the dynamic checkout button. <br><br><strong>Enable sticky add to cart</strong><br>Select/deselect the checkbox to show/hide the sticky add-to-cart bar on the desktop.<br><em>Note that this is not provided on the mobile view. To have this on mobile, you may need to contact the Shopify experts.</em><br></p><p><strong>Enable quantity</strong></p><p>Select/deselect to checkbox to enable quantity. <br><br><strong>Show recipient information form for gift card products</strong><br>Check this checkbox to show the gift card form on the gift card products. <em>Gift card products can be sent directly to a recipient with a personal message by using this form.</em><br><br><em><strong>S</strong></em><strong>ticky add to cart</strong><br><strong>Color scheme</strong><br>Select the color scheme from the given options:<br>-Primary  <br>-Secondary  </p><p>-Tertiary  </p><p>-Quaternary</p><p> </p><p><em>Note: These can be managed from <strong>Theme settings> color schemes.</strong></em></p></td></tr><tr><td>Description</td><td>This block is to show the product description at any desired position.</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>Custom label</td><td>To display product custom labels, setup them up in theme settings -> product grid.<br>For more information, go through this <a href="/pages/00tUgcL98VRmiZ9dTbkH#product-labels">link</a>.</td></tr><tr><td>Query form>Heading</td><td>Enter any text to appear as a link to the contact popup.<br><br>This form sends all submissions to the Sender email address of your store. You can change the sender email address in the Store details settings page of your Shopify admin.</td></tr><tr><td>Back in stock</td><td>Add this block to receive an email every time someone fills in this form (on the store owner's side). Email alerts will <strong>NOT</strong> be automatically sent to the storefront customers when the product becomes available - you(the store owner) will need to do this.<br><br><strong>Heading</strong><br>Enter any text to display as a heading.<br><br><strong>Placeholder</strong><br>Enter any text to show as a placeholder 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 to show as a success message.<br><br><em>(Note: Back-in-stock form is always visible in the theme editor.</em>)</td></tr><tr><td>Custom content</td><td><strong>Enable accordion</strong><br>Select the checkbox to enable the accordion of heading and description.<br><br><strong>Open accordion by default</strong><br>Select the checkbox to keep the accordion open by default.<br><br><strong>Heading</strong><br>Enter any heading text.<br><br><strong>Description</strong><br>Enter any description text.</td></tr></tbody></table>
