# 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:


Main product	Color scheme Select the color scheme. (Note: These can be managed from Theme settings> color schemes.) Section background Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.
Layout	Choose the product gallery layout from the following options: - Scrolling with 2 slides showing - Single slide view - 2 in a row (scrolls down) - 1 in a row (scrolls down)
Image ratio	Select the media ratio from the given options: - Auto - Landscape - Portrait - Square
Enable zoom	Select this checkbox to enable the zoom on media.
Enable thumbnails (desktop)	Select this checkbox to enable the thumbnails on desktop view only.
Show images based on selected variant	Select this check box to show variant based images on the product page gallery. For this to work, users need to add text in the Alt text of product images as same as the color option name without any extra spaces. For example color option is: In the alt text it should be:
Video	Enable autoplay Select this checkbox to enable the video autoplay of the product videos. Enable video loop Select this checkbox to enable the auto looping of the product videos.
Icon	Icon width Adjust the range bar to determine the icon's width.
Section spacing	Desktop top space Adjust the range bar to add spacing at the top of the section for desktop view. Desktop bottom space Adjust the range bar to add spacing at the bottom of the section for desktop view. Mobile top space Adjust the range bar to add spacing at the top of the section for mobile view. Mobile bottom space Adjust the range bar to add spacing at the bottom of the section for mobile view.

### How to show variants based media: Users need to add text in the Alt text of product images as same as the color option name without any extra spaces.\ Go to ptoduct page and setup the Alt text for each image of the product.\ \ **For example color option is:**

**In the alt text of respective image it should be:**

### Block settings


Vendor	This block shows the product vendor.
Title	This block shows the product title. Title size Select the title size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Title tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes.
SKU	This block showcases the product SKU value.
Price	This block showcases the product price. Show tax information Select this checkbox to show the tax and shipping content in the price block. Show sale price first Select this checkbox to show the sale price on the first position. Typography Price font size Select the price font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large Sale price font size Select the sale price font size from the following options: - Extra small - Small - Regular - Medium - Large - Extra large - Double Extra large
Variant picker	This block showcases the variants list. Style Select from the following options to determine the variant picker type: - Dropdown - Button Swatch Color option name Enter the label name of variant option, which hold the colors. For e.g. Color, Colour etc. Enable swatch selector Select this checkbox to enable the swatches selector. Type Choose the swatch type from the following options: - Category meta-fields - Variant image (Note: For category meta-fields colors, please go through docs.) Style Choose the appearance style of the swatches from below options: - Box - Circle Size Choose the size of the swatches from below options: - Small - Medium - Large Variants: Other options (Note: The below settings apply to the product options except the color options.) Style Choose the appearance style of the swatches from below options: - Box - Circle Size Choose the size of the swatches from below options: - Small - Medium - Large Size guide Option Enter the option name that holds the size. E.g.: Size,Taille, etc. Information Choose any page to show as a size guide. Labels(Size) Choose the size from the following options: - Small - Medium - Large Colors Text Choose the text color of variant options. Background Choose the background color of variant options. Border Choose the border color of variant options. Active color Choose the active text color of variant options. Active background Choose the active background color of variant options. Active border Choose the active border color of variant options.
Inventory status bar	Low inventory threshold Adjust this range bar to determine the low stock limit. Show inventory quantity Select this checkbox to show the inventory quantity.
Quantity selector	This block shows the quantity selector. Show quantity selector with Add to cart Select this checkbox to show the quantity selector with ATC button. Labels(size) Choose the size from the following options: - Small - Medium - Large
Pickup availability	This block displays pickup availability of the product. For more details, refer to docs.
Linked products	It lets you link products together, giving you an alternative to using variants. For example, you can show different colors as separate products, while still allowing customers to switch between colors of the same model on the product page. Heading Add the heading text of linked products. How it works Create metafields with the 'Namespace and key - Linked products / 'custom.linked_products' / Type: List of products Once filled, they will automatically display using the first image of each linked product. Optional: Custom image To display an image, create the following metafields: – Linked image / 'custom.linked_image' / Type: file / One file When assigned, this image will replace the assign linked product image. Optional: Custom color To display an color, create the following metafields: – Linked color / 'custom.linked_color' / Type: file(One value) When assigned, this color value will replace the assign linked product image. Appearance Style Choose the style of linked products from below options: - Circle - Box Size Choose the size of linked products from below options: - Small - Medium - Large
Buy buttons	This block is to show the Add to cart button along with below settings: Show inline buttons Select the checkbox to show the buttons inline. Show dynamic checkout button Select the checkbox to show the dynamic checkout button. Show recipient information form for gift cards Select the checkbox to allows buyers to send gift cards on a scheduled date along with a personal message. Learn more Font style Choose font style from below options: - UPPERCASE - lowercase - Capitalize - Unset
Icon with text	Add icons with text to highlight product. Icon 1-3 Icon Choose any icon from the list. Image Add any image for the icon. Label Enter any text for the heading. (Note: Leave the heading label blank to hide the icon column.)
Custom liquid	Liquid Add app snippets or other liquid code for any advanced customizations.
Product description	This block is to show the product description at any desired position. Position (desktop) Choose from left or right side to display the description. Display in collapsible Select this checkbox to show the description in collapsible.
Social sharing	This block is to share the product on social media sites. Please go to the theme settings>Social media>Social sharing to choose the options. Share text Enter the text of social sharing icons. Show 'Share' with inventory Select this checkbox to show the share button with inventory.
Custom text	Text Add custom text.
Complementary Products	Heading Add text to the heading to highlight complementary products. Maximum products to show Adjust the slider to highlight products between 2 to 10. Note: To select complementary products, add the Search & Discovery app. Learn more Media fit style Choose the media fit style from: - Cover - Contain
Collapsible content	Position (desktop) Choose from left or right side to display the content. Display in collapsible Select this checkbox to show the content in collapsible. Open tab by default Select this checkbox to show the first tab opened by default. Heading Enter any heading. Description Enter the custom content/description. It supports dynamic content as well. Page Choose any page to show its content.