The Main Product section is the core layout for displaying product details on your product page. It includes all essential elements such as media, title, price, description, variant picker, add-to-cart buttons, and more. This section allows you to fully customize the structure and content of how your main product is presented to customers.
1. How to access the Main Product section?
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click to open the dropdown pages in the topbar > select Product > click Default product > In the Sections tab, scroll and find Main product in Template
2. How to customize the Main Product section?
To configure a specific product, go to the Preview section at the top left and click Change. From there, select the product you want to edit. The available settings for that product will then be displayed under the Main product section, where you can customize its layout and content.
Within the Main product section, there are two primary blocks:
Media block – used to configure and display product images or videos.
Group product block – used to manage and customize all product content such as title, price, description, variant options, and buy buttons.
2.1. Medias block
After open the Medias block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device
Visible if certain conditions are met
Media
Learn more about media types.
Desktop media layout: Select the main media display layout for product images/videos on desktop and tablet devices.
Thumbnail carousel: Large main image with smaller thumbnails below in a carousel format.
1 column: Displays all media in a single vertical column.
2 columns: Displays media in two columns (often a larger main image in one column and smaller thumbnails in the other, or two equal columns).
Stacked: Stacks all media vertically, with the main image at the top.
Without thumbnails: Displays only the main image/video without accompanying thumbnails.
Thumbnail left/right size: (Only applies to 2 columns layouts or when thumbnails are left/right) Adjust the relative size of the thumbnail column when placed to the left or right of the main media.
Mobile media layout: Select the media display layout for product images/videos on mobile devices (smartphones).
Fraction: Displays page indicators (e.g., "1/5") instead of thumbnails.
Thumbnail: Displays small thumbnails below or next to the main image.
Show first media: Enable this option to always display the product's first media item by default, regardless of which variant is selected.
Show first media until customers hand-pick a variant.
Use select variants by change image on slide: Enable this option to automatically select the product variant when the user swipes or navigates through the product's media images
Normally, variants are selected from a swatch. You might want your customers to be able to select a product variant by change a variant image. Only working when slider active.
Video are muted automatically to allow autoplay: Enable this option to automatically mute videos when they start playing. Muting is required to enable autoplay functionality on most modern browsers.
Enable video looping: Enable this option to automatically loop videos when they finish playing.
Enable thumbnail effect: Enable this option to apply an effect (e.g., zoom, hover effect) to thumbnails when a user interacts with them.
Image ratio: Select the aspect ratio (Adapt to image, Square, Portrait, Landscape,...) for the image. Setting an aspect ratio helps ensure consistency in layout
Full image: Enable this option to make the image span the full available width of its containing element.
Image zoom
Zoom won't show video or 3D models
Image zoom: Select the zoom and lightbox behavior when a user interacts with product images.
Hover zoom: Zooms the image when the user hovers over it.
Click open lightbox: Opens the image in a lightbox (a pop-up window) when the user clicks on it.
No zoom: No zoom effect is applied.
Hover zoom and click open lightbox: Applies both hover zoom and opens a lightbox on click.
Open lightbox mode is forced on touch devices.
Image hover zoom type: (Only applies when Hover zoom is selected) Select the type of zoom effect on hover.
Inner: Zooms the image within its container, potentially overflowing the container.
External: Displays a zoomed version of the image next to the original.
Magnifier: Displays a smaller, magnified region that follows the mouse cursor.
Zoom level of zoom hover: (Only applies when Hover zoom is selected) Adjust the zoom level on hover. The higher the value, the more the image is zoomed.
Max zoom level of lightbox: (Only applies when Click open lightbox is selected) Adjust the maximum zoom level when the image is displayed in the lightbox.
Carousel settings
Loop: This option allows you to enable or disable the looping behavior of the carousel.
Style: Select the design style for the navigation buttons. This controls the visual appearance of the buttons, such as their background color, border, and arrow styling.
Default: A solid background button with a contrasting arrow color.
Outline: A button with a border and a transparent or arrow-colored background.
Simple: Only the arrow is visible, without a distinct background or border.
Shape: Select the shape of the navigation buttons.
Default: The default shape (typically square or rectangular).
Rounded: The buttons have rounded corners or a circular shape (depending on size).
Rotate: The button might have a rotational or transformative effect on interaction
Size: Select the size of the navigation buttons. This affects the overall size of the button and the arrow icon.
Hide on mobile: Enable this option to hide the navigation controls on mobile screens. On mobile, swiping is often preferred over navigation buttons.
2.2. Group product block
After open the Group Product block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device
Display colors by block: Enable this option to allow each individual block within this section to choose its own color scheme.
Color scheme: Select the color scheme that will be applied to this section. A color scheme typically includes settings for background color, primary text color, secondary text color, and other accent colors
2.3.1. Title block
To add Title block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Title block.
Once the Title block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Style: Select the text formatting style for this element (e.g., a heading).
None: No automatic text casing changes are applied. Text appears as entered.
Lowercase: Converts all characters to lowercase.
Capitalize: Capitalizes the first letter of each word.
Uppercase: Converts all characters to uppercase.
HTML tag: Select the semantic HTML tag that will be used for this element. Using the correct HTML tag is crucial for SEO, document structure, and accessibility.
Size: Select the visual display size of the text. These options typically map to predefined font sizes in the theme's CSS
Add product link: Enable this option to add a link to the product page for this element (typically a product title or image). When enabled, users can click on the element to navigate to the product's detail page.
2.3.2. Price block
To add Price block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Price block
After adding the Price block, it will display the price of the specific product you selected in the Preview section. This block does not have any additional configuration options.
2.3.4. Description block
To add Description block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Description block.
Once the Description block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Description mode: Select the display mode for the product description.
Short description: Displays only a truncated portion of the product description.
Full description: Displays the entire product description.
Short description: You can enter a short description for all Products or call the metafield description of each product here. (metafield description will take higher priority)
Use read more: Enable this option to display a "Read More" link that allows users to expand to view the full description and a "Read Less" link to collapse it back.
Short description length: (Set the maximum number of characters or words for the short description that is automatically truncated from the product's full description.
Read more label: Enter the text to display for the "Read More" link
Read less label: Enter the text to display for the "Read Less" link
2.3.4. Variant picker block
To add Variant picker block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Variant picker block
Once the Variant picker block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Color selector type (color rounded, rounded, block, dropdown...): Select the display type for the color variant selector. This directly impacts the user interface and how customers interact with color options.
Color selector size: Adjust the display size of the color swatches.
Other variants selector type: Select the display type for non-color variant selectors (e.g., size, material)
Size chart
Only show with size option.
Size chart source: Select the data source for the size chart.
Page: Uses content from an existing Shopify page as the size chart. This method is flexible for complex text and tabular content.
Image: Uses an image as the size chart.
Page size chart: Select the Shopify page that contains your size chart content
This page content will appear.
Image size chart: Upload or select the image you want to use as the size chart
2.3.5. Quantity selector block
To add Quantity selector block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Quantity selector block
Once the Quantity selector block is added, you can customize to increase or decrease the number of products to purchase.
The quantity selector is automatically hidden if product are sold out.
2.3.6. Buy buttons block
To add Buy buttons block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Buy buttons block.
Once the Buy buttons block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Show quantity selector: Enable this option to display quantity selector.
Show dynamic checkout buttons: Enable this option to display accelerated checkout buttons (e.g., Shop Pay, Google Pay, Apple Pay, PayPal)
Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. Learn more
Show recipient information form for gift cards: Enable this option to display a recipient information form when the product is a gift card.
Allows buyers to send gift cards on a scheduled date along with a personal message. Learn more
Show icon wishlist: Enable this option to display a Wishlist icon in this section
Show icon compare: Enable this option to display a Product Compare icon on this section.
2.3.7. Inventory status block
To add Inventory status block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Inventory status block.
Once the Inventory status block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Low inventory threshold: Set the low inventory threshold; when the product quantity falls below this threshold, a warning will be displayed. Choose 0 to always show "in stock" if available.
Show inventory count: Display the remaining product quantity in stock, providing customers with information about product availability.
Show progress bar: Display a progress bar indicating the remaining product quantity, helping customers visualize the stock status.
Progress bar max value: Set the maximum value for the progress bar, defining the display range of the progress bar.
For pre-order products, the inventory will appear in yellow and will not show a quantity.
For low stock threshold products, the inventory status will be displayed in red and include the quantity.
For Out of stock products, the inventory will appear in red and will not show a quantity.
For In stock products, the inventory status will be displayed in green and include the quantity.
2.3.8. Shipping information block
To add Shipping information block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Shipping information block
The Shipping information block displays a short message about shipping details, such as "Shipping calculated at checkout."
No customizable settings available.
2.3.9. Vendor block
To add Vendor block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Vendor block
Once the Vendor block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Image vendor custom: Upload image to replace vendor of product added in shopify store
2.3.10. Trust badge block
To add Trust badge block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Trust badge block
Once the Trust badge block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Message: Enter the content of the message you want to display. This is the main text that will appear alongside the chosen icon.
Font size: Select the font size for the message text
Source: Select the source of the icon that accompanies the message
Image: Allows you to upload or select an image file (.jpg, .png, .gif) from your library to use as the icon.
SVG Payment: Provides a list of standard Shopify payment icons (e.g., Visa, Mastercard, American Express, PayPal) rendered as SVGs
Image
Trust seal image: Upload or select the trust seal image you want to display
Width image: Select the display width of the trust seal image
SVG Payment
SVG list: You can enter a list of payment method names (separated by commas) corresponding to the available SVG icons.
Example:visa, paypal, apple_pay, klarna❗ Do not include the
.svgextension.
Use only the exact names from the list of available values (linked below the field).Height:
This setting controls the height of each payment icon in pixels. Use the slider or input box to adjust it (e.g.30px).
2.3.11. Share buttons block
To add Share buttons block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Share buttons block.
Once the Share buttons block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
To display your social media accounts, link them in your theme settings
Social style: Select the visual style for social media icons (default, outline, simple, border & background)
Social size: Select the overall size of the social media icons. Options are typically predefined (e.g.,
Small,Medium,Large) mapping to pixel orremsizes in CSS.Border radius: Adjust the roundness of the corners of the icon's container. A value of 0% will result in square corners, while 50% will create a perfect circle (if width and height are equal).
Space item: Adjust the spacing between individual social media icons. This value is typically measured in pixels
2.3.12. Delivery time block
To add Delivery time block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Delivery time block.
Once the Delivery time block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Hide with 'pre-order': When enabled, this component will automatically be hidden if the product is in a 'pre-order' state. This helps prevent customer confusion when the item isn't immediately available for purchase.
Icon: Select the icon to be displayed. Options are typically a predefined list of icons available within the theme
Custom SVG icon: You can paste the raw SVG code directly into this field (Line Awesome)
Custom image icon: Upload or select the image file (.jpg, .png, .gif) you want to use as the icon.
ICON / IMG animation: Select the animation effect to be applied to the icon (or image). Animations can make the icon stand out and grab user attention.
Delivery text: Enter the delivery or supplementary text message that will appear alongside the icon.
Order in the next [hour] to get this to you between [date_start] and [date_end], Order in the next [hour] to get it by [date_end], Order in the next [hour] to get it soon
Delivery start date: Select the earliest possible start date for delivery. This could be the current date plus your minimum processing time.
From current date
Delivery end date: Select the latest possible end date for delivery. Together with the start date, this creates an estimated delivery window
Delivery end date
Exclude days from: Select the start date of a period from which you want to exclude specific days from delivery calculations
Exclude days: Select the days of the week on which you do not make deliveries
Use the 'MON','TUE','WED','THU','FRI','SAT' and 'SUN'. Separate exclude days with a comma (,).
Exclude Holidays: Select specific dates (holidays) on which you will not make deliveries. You might need to add multiple dates for various holidays throughout the year.
Date delivery format: Select the display format for the delivery date shown to customers
Delivery cut off: Set the daily delivery cut-off time. If a customer places an order after this time, their order will be processed on the next business day.
Number Only(24 Hours Format - 16:00:00 Means 4PM)
2.3.13. Line item property block
To add Line item property block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Line item property block.
Once the Line item property block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Line item properties are used to collect customization information for an item added to the cart.
Label: Enter the label text for the data field, providing a clear description of the field's purpose.
Type: Select the data entry type for the field (text, checkbox, options), defining how users interact with the field.
Required: If you use required, then the customer must write a text (for text property) or tick the box (for checkbox property and options radio) to add to the cart.
Show at checkout and cart page: Uncheck this if you don't want the captured information to be shown in the order summary on the cart, checkout page.
Text
Only applicable for line item property of type Text.
Text type: Select the text input type (short or long), defining the size of the text input area and its intended use.
Maximum number of characters: Set the maximum number of characters allowed in the text field, controlling the length of the input content.
Checkbox
Only applicable for line item property of type Checkbox
Value: Appears on the order when checked.
Options
Only applicable for line item property of type options.
Option type: Select the display style for the options (dropdown select or radio buttons), customizing how users select options.
Options: Enter the options, each option on a separate line, defining the available choices for the user.
Each option must be in its own line.
Set your visibility
Visibility (All, Collection based, Type based, Tag based, Product based, Metafield based): Select the method to control the visibility of this element.
All: The element will always be visible (no specific conditions).
Collection based: The element will be visible only if the current product belongs to one or more specified collections.
Type based: The element will be visible only if the current product has one or more specified product types.
Tag based: The element will be visible only if the current product has one or more specified product tags.
Product based: The element will be visible only if the current product is one of the specifically designated products.
Metafield based: The element will be visible based on the value of a specific metafield of the current product. This allows for very granular and flexible control over visibility.
Collection list: Select one or more collections that the product must belong to for this element to be visible.
Maximum choose: 50 collections
Product types: Enter one or more product types
Separate your types with a comma.
Product tags: Enter one or more product tags, separated by commas
Product list: Select one or more specific products. The element will be visible only if the current product matches one of the selected products.
2.3.14. Total sold flash block
To add Total sold flash block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Total sold flash block.
Once the Total sold flash block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Icon: Select the icon to be displayed. Options are typically a predefined list of icons available within the theme
Custom SVG icon: You can paste the raw SVG code directly into this field (Line Awesome)
Custom image icon: Upload or select the image file (.jpg, .png, .gif) you want to use as the icon.
ICON / IMG animation: Select the animation effect to be applied to the icon (or image). Animations can make the icon stand out and grab user attention.
Min quantity: Set the minimum quantity a customer can purchase for this product. If a customer tries to order less than this amount,
Max quantity: Set the maximum quantity a customer can purchase for this product in a single order. This helps control inventory or prevent excessively large orders.
Min Time: Set the minimum time (e.g., number of days, hours) required for a service or for the product to be ready
Max Time: Set the maximum time (e.g., number of days, hours) a service can last or a product can be completed
Text: Enter the custom text that will be displayed alongside this quantity or time information.
[sold] sold in last [hour] hours
2.3.15. Accordion block
To add Accordion block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Accordion block
Once the Accordion block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Accordion block
Accordion design: Select the design style for your accordion blocks. The design style affects how the title and content of each accordion item appear and interact.
Spacing: Adjust the space between individual accordion items. This spacing is typically measured in pixels (
px) or relative units (rem)
Description block
To add Description block to the Accordion block, click the Add block button (plus icon ➕) under the Accordion.
The product description will be automatically sourced from the product details.
Expand / Collapse: This option (typically a button or state) allows users to expand (show content) or collapse (hide content) an accordion item
Accordion icon: Select the type of icon that will appear next to the title of each accordion item, indicating that it can be expanded or collapsed
Heading item: Enter a title for this accordion
Additional information block
To add Additional information block to the Accordion block, click the Add block button (plus icon ➕) under the Accordion.
The Additional information will be automatically sourced from the product details.
Works with products that have variants
Expand / Collapse: This option (typically a button or state) allows users to expand (show content) or collapse (hide content) an accordion item
Accordion icon: Select the type of icon that will appear next to the title of each accordion item, indicating that it can be expanded or collapsed
Heading item: Enter a title for this accordion
Custom HTML block
To add Custom HTML block to the Accordion block, click the Add block button (plus icon ➕) under the Accordion.
Expand / Collapse: This option (typically a button or state) allows users to expand (show content) or collapse (hide content) an accordion item
Accordion icon: Select the type of icon that will appear next to the title of each accordion item, indicating that it can be expanded or collapsed
Heading item: Enter a title for this accordion
You can enter Tab content or choose a Page
Tab content: Enter the main content that will appear when this tab is selected. This can include text, images, videos, or any other HTML elements.
Page: Select an existing Shopify page to pull content from. If a page is selected, the tab's content will be automatically populated from that page's content
Liquid block
To add Liquid block to the Accordion block, click the Add block button (plus icon ➕) under the Accordion.
Expand / Collapse: This option (typically a button or state) allows users to expand (show content) or collapse (hide content) an accordion item
Accordion icon: Select the type of icon that will appear next to the title of each accordion item, indicating that it can be expanded or collapsed
Heading item: Enter a title for this accordion
Tab content: Enter the main content that will appear when this tab is selected. This can include text, images, videos, or any other HTML elements.
2.3.16. Complimentary block
You can add the complementary products block to your product pages in the theme editor. Learn how to use the Shopify Search & Discovery app to choose complementary products for your website’s product pages.
Displaying complementary products to customers makes it easier for them to discover new products, and can help increase online store sales.
Note: To have this feature, you must install Shopify Search & Discovery
Configure Product Recommendation in the app.
You need to access the app and configure the product related.
From your Shopify admin homepage, open the Search & Discovery app, navigate to the "Recommendations" tab, then search for and select the product you want. Next, choose the complementary products you'd like to associate with it > Save
Add Complimentary block to Product Main.
To add Complimentary block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Complimentary block
Once the Complimentary block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
From there, modify the Title, and arrange its placement as desired using drag-and-drop functionality.
2.3.17. Installments banner block
To add Installments banner block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Installments banner block
To display installments banner, your store needs to support Shop Pay Installments. Learn more.
2.3.18. Extra link block
To add Extra link block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Extra link block.
Ask a question block
To add Ask a question block to the Extra link, click the Add block button (plus icon ➕) under the Extra link.
After the Ask a question block is added, a link labeled "Ask a question" will appear. You can click on this link to open a popup and submit your information to the store owner.
Delivery & Return block
To add Delivery & Return block to the Extra link, click the Add block button (plus icon ➕) under the Extra link.
Once the Delivery & Return block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Add page delivery & return: this page content will appear.
Size chart block
To add Size chart block to the Extra link, click the Add block button (plus icon ➕) under the Extra link.
Once the Size chart block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Use size chart: Choose when the size chart will be displayed.
All products: The size chart will appear for all products in your store.
None: The size chart will never be displayed.
Only product has option name 'size': The size chart will only appear for products that have a variant option named 'size' (e.g., 'Size', 'S', 'M'). This is the most flexible option, ensuring the chart only shows when relevant.
Size chart source: Select the source for displaying the product size chart (page or image), customizing how size information is shown\
Page size chart: Select the page containing the product size chart information, displaying content from the selected page.
Image size chart: Upload an image containing the product size chart information, displaying the uploaded image.
Link popup block
To add Link popup block to the Extra link, click the Add block button (plus icon ➕) under the Extra link.
Once the Link popup block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Label: Enter the text that will be displayed for this label. This is typically the visible text that a customer will see and click on.
Page content: Select the Shopify page you want to link to with this label. When a customer clicks on the label, the content of this page will be displayed
Link custom block
To add Link custom block to the Extra link, click the Add block button (plus icon ➕) under the Extra link.
Once the Link custom block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Label: Enter the text that will be displayed for this label. This is typically the visible text that a customer will see and click on.
Link: Enter the URL or select a page/product/collection you want to link to. This is the destination when a user clicks on the element.
Open this link in a new tab: Check this option to open the link in a new browser tab or window. When unchecked, the link will open in the current tab.
2.3.19. Pickup availability block
To add Pickup availability block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Pickup availability block
Engage local shoppers by showing where items are available for pickup — right from the product page. Learn more
How to set up the local pickup?
Step 1: From the main screen of your Shopify store, click the Settings tab in the left sidebar > navigate to and open the Locations > click Add location if you haven't set up a shipping location yet, or select and open an existing location if one is already available.
Make sure you tick the Fulfillment (Use inventory at this location to fulfill online orders) checkbox
Step 2: Still in the Settings tab, go to the Shipping & Delivery section > scroll down to Pickup in store > click on the store you want to configure for pickup > check the box for Location status (Let customers pick up orders directly at this location) > set the expected pickup time, for example: Usually ready in 2 hours.
The result: you will see the location store shows the Offers pickup tag.
2.3.20. Live review block
To add Live review block to the Group Product, click the Add block button (plus icon ➕) under the Group Product.
Once the Live review block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Icon: Select the icon to be displayed. Options are typically a predefined list of icons available within the theme
Custom SVG icon: You can paste the raw SVG code directly into this field (Line Awesome)
Custom image icon: Upload or select the image file (.jpg, .png, .gif) you want to use as the icon.
ICON / IMG animation: Select the animation effect to be applied to the icon (or image). Animations can make the icon stand out and grab user attention.
Min number: Set the smallest numerical value in the range.
Max number: Set the largest numerical value in the range.
Interval time: Set the time interval (e.g., in seconds, minutes, hours, days) at which an event will repeat or a value will change.
Content: Enter the content to be displayed. This could be a descriptive text, a dynamic message,...
2.3.21. Linked products block
To add Linked products block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Linked products block
Once the Linked products block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Products: Select the products to which the options will apply
Option name: Enter the name of the product option you want to display specially
Option values: List the specific values of the chosen option (e.g., "Red", "Blue", "Yellow" for the "Color" option) to replace the product title.
Linked product type: Select how option values are displayed and how they link to other products/variants.
Block: Each option value (e.g., "Red") is displayed as a simple block (e.g., a button or a swatch).
Block with color: Each color value will display as an actual color swatch, helping customers visualize the color better.
Image with title: Each option value will be displayed with a small image representing that option and the option's title
Color selector size: Select the aspect ratio for the option's representative images
Image ratio: Select the aspect ratio (Adapt to image, Square, Portrait, Landscape,...) for the image. Setting an aspect ratio helps ensure consistency in layout
2.3.22. Meta block
To add Meta block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Meta block
The block information in the meta section will be sourced directly from the product in your Shopify store.
2.3.22. Back in stock block
To add Back in stock block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Back in stock block
Once the Back in stock block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Only show when variant soldout: This option ensures that the "Back in stock" notification or feature is only displayed when the selected product variant is sold out. If the variant is still available, the message or form will remain hidden.
2.3.23. Countdown timer block
To add Countdown timer block to the Group Product, click the Add block button (plus icon ➕) under the Group Product > Select Countdown timer block
Once the Countdown timer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Countdown timer: The time is automatically show if product has metaobjects theme_countdown or metafield 'countdown'.
Click the link How to create a countdown metafield to view the instructions for creating a countdown metafield.
Icon: Choose a predefined icon to display next to the countdown timer (e.g. Door lock).
Custom SVG Icon: Paste your own SVG code here to use a custom icon instead of the default options.
Line Awesome SVG icons: Click the link to browse and copy free SVG icons from the Line Awesome library.
Custom Image Icon: Upload or select a custom image to display as the icon.
ICON / IMG Animation: Choose an animation effect (e.g. Tada) to apply to the icon or image.
Content: Enter the countdown message text (e.g. “Hurry up! Sale Ends in”).
Text Alignment: Select how the text and timer should be aligned — left, center, or right.
