# 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><p><strong>Color scheme</strong><br>Select the color scheme. </p><p><em>(<strong>Note</strong>: These can be managed from Theme settings> color schemes.)</em><br><br><strong>Section background</strong><br>Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.<br><br><strong>Desktop layout</strong><br>Choose the product gallery layout from the following options:<br>- Center showcase<br>- Sidebar gallery</p></td></tr><tr><td>Center showcase</td><td><strong>Open first collapsible row</strong><br>Select this checkbox to keep the first collapsible row open by default.</td></tr><tr><td>Media</td><td><strong>Enable media zoom</strong><br>Select this checkbox to enable the zoom feature on product images.<br><br><strong>Enable thumbnails</strong><br>Select this checkbox to enable the product thumbnail images.<br><em>(<strong>Note</strong>: This setting is applicable to the <strong>Center showcase</strong> style only.)</em><br><br><strong>Image ratio</strong><br>Select the media ratio from the given options: <br>- Auto <br>- Adapt to first image<br>- Landscape <br>- Portrait <br>- Square<br><br><strong>Enable video looping</strong><br>Select this checkbox to enable the auto looping of the product videos.</td></tr><tr><td>Section spacing</td><td><p><strong>Desktop top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Desktop bottom space</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Mobile top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Mobile bottom space</strong><br>Adjust the range bar 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>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>Title size</strong><br>Select the title size from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><strong>Title 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>Hide shipping content</strong><br>Select this checkbox to hide the shipping content from 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>- Pills<br><br>Color options<br><strong>Swatch type</strong><br>Choose the swatch type from the following options:<br>- Category meta-fields<br>- Variant image<br><em>(<strong>Note</strong>: For category meta-fields colors, please go through</em> <a href="https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields"><em>docs.</em></a><em>)</em><br><br><strong>Appearance</strong><br>Choose the appearance style of the swatches from below options:<br>- Square<br>- Circle<br>- Soft edges<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br>Other options<br><em>(<strong>Note</strong>: The below settings apply to the product options except the color options.)</em><br><br><strong>Appearance</strong><br>Choose the appearance style of the product options from below options:<br>- Square<br>- Circle<br>- Soft edges<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br>Size chart<br><strong>Size chart page</strong><br>This block showcases the size chart in a popup view. Select any page to show as the size chart.<br><br><img src="https://content.gitbook.com/content/GT8eZkzRo8UybAIz0BT7/blobs/TTx6welJ4qwMHMNi0FKf/image.png" alt=""><br><br><br><strong>Heading</strong><br>Enter text for the heading of size chart.</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 quantity</strong></p><p>Select this checkbox to show the inventory quantity. </p></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.<br><br><strong>Corner radius</strong><br>Adjust this range bar to determine the corner's radius.</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>Buy buttons</td><td>This block shows the add to cart button. <br><br><strong>Show dynamic checkout button</strong><br>Select the checkbox to show the dynamic checkout button. <br><br><strong>Button appearance</strong><br><strong>Size</strong><br>Choose the button size from the following options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Style</strong><br>Choose the button style from the following options:<br>- Animated<br>- Outline<br>- Solid<br><br><strong>Show stacked buttons</strong><br>Select the checkbox to show the buttons in stacked view, i.e. in two rows.</td></tr><tr><td>Icon with text</td><td>Add icons with text to highlight product.<br><br>Icon 1-3<br><strong>Icon</strong><br>Choose any icon from the list.<br><br><strong>Image</strong><br>Add any image for the icon.<br><br><strong>Label</strong><br>Enter any text for the heading.<br><em>(<strong>Note</strong>: Leave the heading label blank to hide the icon column.)</em></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>Ask a question</td><td><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>Description</td><td>This block is to show the product description at any desired position and choose the visibility.<br><br><strong>Heading size</strong><br>Select the heading size of description from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><em>(<strong>Note</strong>: This block is not applicable to the '<strong>Sidebar gallery</strong>' style.)</em></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.</td></tr><tr><td>Text</td><td><strong>Heading</strong><br>Add text to the heading.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small</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> </p></td></tr><tr><td>Collapsible row</td><td><strong>Heading</strong><br>Enter any heading.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><strong>Content</strong><br>Enter the custom content/description. It supports dynamic content as well.</td></tr><tr><td>Interlink tab</td><td><p>Interlink Tabs are blocks defined in the product information section. Click the copy icon to copy the Section ID to your clipboard. You can then paste the copied ID into the Section ID input box of the Interlink Tab block.<br><br>To connect this tab with a product information section, follow these steps:</p><p>#1. Navigate to the desired product information section.</p><p>#2. Copy the section ID by clicking on the copy icon in that section.</p><p>#3. Paste the copied section ID into the input field below to establish the connection.<br><br><strong>Tab label</strong><br>Enter the tab label text.<br><br><strong>Section ID</strong><br>Paste the section ID here to link the tab with the corresponding product information section.<br><br><em>(<strong>Note</strong>: This section ID is shown on all sections of PDP after enabling it from theme settings>product>Show section ID on clipboard.)</em></p></td></tr></tbody></table>

### How to setup the gift product:

Go to the product>Gift card template and setup the product, as shown below:\ <br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FRI4wUmqUaS8DH7hYEkTD%2Fimage.png?alt=media&#x26;token=31117b7a-ef76-43e1-9e1d-03e467a48132" alt=""><figcaption></figcaption></figure>

To apply the gift card recipient form settings, Navigate to the Buy button settings, as shown below:\
&#x20;

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FaEJcIWgWAXDALWCfTIRP%2Fimage.png?alt=media&#x26;token=435484e6-a946-4109-ac8e-45b630fdb65d" alt=""><figcaption></figcaption></figure>

Save the settings and apply this template to the Gift product from store dashboard, as shown below:

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FMZn2hb0wj496KsgCeEHm%2Fimage.png?alt=media&#x26;token=5d1b7cc3-d5d5-4a09-b00a-ee84e41d579f" alt=""><figcaption></figcaption></figure>