✨Template product
This section is to maintain the settings of the product page on your store.
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:
Main product | Enable sticky add to cart Select this checkbox to enable the sticky add to cart on the product page. Desktop sticky style Choose from 'On scroll' or 'Sticky form' to determine the sticky style from the desktop view. |
Bundle products | Enable bundle products Select this checkbox to enable the products below the main product section. Heading Enter the heading text. Description Enter the description text. Products Choose products or link a meta field for the products. Grid image ratio Choose the image ratio from the available list of options. |
COLOR | Color scheme Select the color scheme. Note: These can be managed from Theme settings> color schemes. Enable gradient Select this checkbox to show the gradient in the background color. This can be selected from theme settings>color schemes. |
SECTION SPACING | Top spacing (desktop) Adjust the slider to add spacing at the top of the section for desktop view.
Bottom spacing (desktop) Adjust the slider to add spacing at the bottom of the section for desktop view.
Top spacing (mobile) Adjust the slider to add spacing at the top of the section for mobile view.
Bottom spacing (mobile) Adjust the slider to add spacing at the bottom of the section for mobile view. |
Block settings
Title | This block shows the product title. |
Review rating | To display ratings, add Product Review app. Show in product sticky form Select this checkbox to show this block in the sticky form. |
SKU | This block showcases the product SKU value. Show in product sticky form Select this checkbox to show this block in the sticky form. |
Price | This block showcases the product price. Hide shipping content Select this checkbox to hide the shipping content from the price block. Show in product sticky form Select this checkbox to show this block in the sticky form. |
Vendor | This block displays the product vendor name. Show in product sticky form Select this checkbox to show this block in the sticky form. |
Size chart | |
Social sharing | This block is to share the product on social media sites, using the following settings. Show in product sticky form Select this checkbox to show this block in the sticky form. Facebook Tick this checkbox to share the product on Facebook. Instagram Tick this checkbox to share the product on Instagram. Twitter Tick this checkbox to share the product on Twitter. Linkedin Tick this checkbox to share the product on Linkedin. Pinterest Tick this checkbox to share the product on Pinterest. |
Variant picker | This block showcases the variants list. Select from the following options to determine the variant picker type: -Dropdown -Button |
Quantity selector | This block displays the quantity selector i.e. used to select the product quantity while making a purchase. |
Inventory status bar | Show in product sticky form Select this checkbox to show this block in the sticky form. Show status Select this checkbox to show the inventory status. (Note: For low inventory threshold setup, go to theme settings>product inventory.) |
Pickup availability | This block displays pickup availability of the product. |
Buy buttons | This block shows the add to cart button. Show dynamic checkout button Select/deselect the checkbox to show the dynamic checkout button. Show recipient information form for gift card products Check this checkbox to show the gift card form on the gift card products. Gift card products can be sent directly to a recipient with a personal message by using this form. Add multipliers 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. |
Complementary Products | Heading Add text to the heading to highlight complementary products. Products count Adjust the slider to highlight products between 1 to 10. Note: To select complementary products, add the Search & Discovery app. Learn more |
Description | This block is to show the product description at any desired position and choose the visibility. |
Custom liquid | Liquid Add app snippets or other liquid code for any advanced customizations. |
Icon with text | Add icons with text to highlight product. |
Ask a question | Show in product sticky form Select this checkbox to show this block in the sticky form. Heading Enter any text to appear as a link to the contact popup. 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. |
Payment icons | Show in product sticky form Select this checkbox to show this block in the sticky form. Show payment icons Select this checkbox to show the payment icons. |
Custom content | Show product description Select this checkbox to show the product description. SVG code Enter the SVG code. Description heading Enter any heading for the description. Content 1-4 SVG code Enter the SVG code. Text Enter any heading. Description Enter the description. it supports dynamic content as well. |
Product variations | Choose the products or link the products through meta field to form the product variations. |
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.
Go to the product metafield and add a new one with field: Metaobject and select the above created one, as shown below:
Now create entries and select related products.
Go to specific products and link the entries.
Go to the theme editor and add the Product variations block and attach the recently created metaobject, as shown below:
This will start looking like this:
Last updated
