# 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>Show full width description</strong><br>Select this checkbox to show the product description in full width on the product page.<br><br><strong>Enable sticky add to cart</strong></p><p>Select this checkbox to enable the sticky add to cart on the product page.<br><br><strong>Desktop sticky style</strong><br>Choose from 'On scroll' or ' Sticky form' to determine the sticky style from the desktop view.<br><br><strong>Image ratio</strong><br>Select the image ratio from the given options: </p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square</p></td></tr><tr><td>Bundle products</td><td><strong>Enable bundle products</strong><br>Select this checkbox to enable the products below the main product section.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Products</strong><br>Choose products or link a meta field for the products.<br><br><strong>Grid image ratio</strong><br>Choose the image ratio from the available list of options.</td></tr><tr><td>COLOR</td><td><p><strong>Color scheme</strong> </p><p>Select the color scheme. </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>Title</td><td>This block shows the product title.</td></tr><tr><td>Review rating</td><td>To display ratings, add <a href="https://apps.shopify.com/product-reviews">Product Review app</a>. <br><br><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.</td></tr><tr><td>SKU</td><td>This block showcases the product SKU value.<br><br><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.</td></tr><tr><td>Price</td><td>This block showcases the product price.<br><br><strong>Hide shipping content</strong><br>Select this checkbox to hide the shipping content from the price block.<br><br><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.</td></tr><tr><td>Vendor</td><td>This block displays the product vendor name.<br><br><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.</td></tr><tr><td>Size chart</td><td>This block showcases the size chart in a popup view. Select any page to show as the size chart.<br><br><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2F8PPPBMpPvjgNphvhvI8g%2Fimage.png?alt=media&#x26;token=d1881308-7fc7-47a3-88d8-c432449dfc83" alt=""></td></tr><tr><td>Social sharing</td><td>This block is to share the product on social media sites, using the following settings.<br><br><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.<br><br><strong>Facebook</strong><br>Tick this checkbox to share the product on Facebook.<br><br><strong>Instagram</strong><br>Tick this checkbox to share the product on Instagram.<br><br><strong>Twitter</strong><br>Tick this checkbox to share the product on Twitter.<br><br><strong>Linkedin</strong><br>Tick this checkbox to share the product on Linkedin.<br><br><strong>Pinterest</strong><br>Tick this checkbox to share the product on Pinterest.</td></tr><tr><td>Variant picker</td><td>This block showcases the variants list.<br><br>Select from the following options to determine the variant picker type:<br>-Dropdown<br>-Button</td></tr><tr><td>Quantity selector</td><td>This block displays the quantity selector i.e. used to select the product quantity while making a purchase.</td></tr><tr><td>Inventory status bar</td><td><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.<br><br><strong>Show status</strong><br>Select this checkbox to show the inventory status. <br><em>(Note: For low inventory threshold setup, go to theme settings>product inventory.)</em></td></tr><tr><td>Pickup availability</td><td>This block displays pickup availability of the product.</td></tr><tr><td>Buy buttons</td><td>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>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><strong>Add multipliers</strong><br>Add integer values separated by comma. Displays dedicated buttons to add multiple items to cart with a single click. for e.g. 2,5,7 tc.</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> </p></td></tr><tr><td>Description</td><td>This block is to show the product description at any desired position and choose the visibility.</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>Icon with text</td><td>Add icons with text to highlight product.</td></tr><tr><td>Ask a question</td><td><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.<br><br><strong>Heading</strong><br>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>Payment icons</td><td><strong>Show in product sticky form</strong><br>Select this checkbox to show this block in the sticky form.<br><br><strong>Show payment icons</strong><br>Select this checkbox to show the payment icons.</td></tr><tr><td>Custom content</td><td><strong>Show product description</strong><br>Select this checkbox to show the product description.<br><br><strong>SVG code</strong><br>Enter the SVG code.<br><br><strong>Description heading</strong><br>Enter any heading for the description.<br><br>Content 1-4<br><strong>SVG code</strong><br>Enter the SVG code.<br><br><strong>Text</strong><br>Enter any heading.<br><br><strong>Description</strong><br>Enter the description. it supports dynamic content as well.</td></tr><tr><td>Product variations</td><td>Choose the products or link the products through meta field to form the product variations.</td></tr></tbody></table>

## How to set up the product variations

Starlite includes the ability to link directly to other products as product swatches. The result is rich product detail pages that include swatches with images that represent each variant option. \
\
This feature is called product variations. When you view a variation product, only the images associated with that variant option, plus product details, and prices for the variant are shown.\
\
Follow the steps below to complete the setup:\
\
1\. Add a metaobject with two fields: Text and Product list.

<figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FU0krNOMw7dnhqy0mppEL%2Fimage.png?alt=media&#x26;token=112cc475-0580-4d9d-92ca-9b71ce2168a0" alt=""><figcaption></figcaption></figure>

2. Go to the product metafield and add a new one with field: Metaobject and select the above created one, as shown below:<br>

   <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FTg1Gs072YP7ySghdjJ2W%2Fimage.png?alt=media&#x26;token=a960bd10-57fe-4091-a847-32605b46ec39" alt=""><figcaption></figcaption></figure>
3. Now create entries and select related products.

<figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FYNT8Q0jrMHDgtifuQGXu%2Fimage.png?alt=media&#x26;token=c32cd651-7114-44e1-ba9f-334686e7d76d" alt=""><figcaption></figcaption></figure>

4. Go to specific products and link the entries.

<figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2Fbxz16iSIvIEJLBzRkw95%2Fimage.png?alt=media&#x26;token=f81ccdb1-b1b1-4a25-86c9-9756918f02b7" alt=""><figcaption></figcaption></figure>

5. Go to the theme editor and add the **Product variations** block and attach the recently created metaobject, as shown below:

<figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FzBHIq8lWnzDPri5rXbQS%2Fimage.png?alt=media&#x26;token=29f87f13-218e-4bc4-aa8d-2aa78b1c21f1" alt=""><figcaption></figcaption></figure>

This will start looking like this:<br>

<figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2Fi6azoGGWBqljWCJWuuZs%2Fimage.png?alt=media&#x26;token=9c4c57d8-00b9-4b29-aaa9-db6e72a4374d" alt=""><figcaption></figcaption></figure>
