Product page
Overview:
The Main Product section showcases detailed product content including title, price, description, variant selectors, purchasing options, and other supplementary blocks. This section allows rich customization to match your store’s branding and layout needs while enhancing the product presentation.
Section Configuration:
| Setting | Description |
|---|---|
| Image Ratio | Defines the aspect ratio of the main product image. Options include adapt, square, portrait, and landscape. |
| Slideshow Arrows | Toggles the visibility of navigation arrows when multiple media items are displayed as a slideshow. |
| Customer Reviews Heading | Sets the heading text for the reviews block. |
| Review Heading Size | Specifies the heading size for the reviews section. |
| Review Heading Weight | Determines the font weight of the reviews heading. |
| Enable Review Border | Adds a top border above the reviews section. |
| Auto-play Reviews | Enables automatic cycling through review slides. |
| Show Review Navigation | Displays navigation controls for the reviews slider. |
| Review Slideshow Interval | Sets the interval time (in milliseconds) for auto-play between reviews. |
| Review Color Scheme | Applies a predefined color scheme to the reviews area. |
| Show Breadcrumb | Toggles the visibility of the breadcrumb navigation trail. |
| Container Layout | Defines whether the section layout is contained or full-width. |
| Color Scheme | Applies a predefined color palette to the section. |
| Top Padding | Sets the amount of spacing above the section. |
| Bottom Padding | Sets the amount of spacing below the section. |
Blocks Configuration:
Title
Displays the product title with optional styling and visual enhancements.
| Setting | Description |
|---|---|
| Heading Size | Sets the heading level used for the title (H1–H6). |
| Heading Weight | Determines the font weight of the title. |
| Enable Border | Displays a top border above the block. |
| Enable Collection Name | Shows the name of the associated collection. |
| Collection Background Color | Sets the background color for the collection label. |
| Collection Text Color | Sets the text color for the collection label. |
| Hide on Device | Controls block visibility on mobile or desktop devices. |
| Block Spacing | Adjusts the spacing below the block. |
Column Separator / Full Width Separator
Adds visual dividers to separate content areas.
| Setting | Description |
|---|---|
| Paragraph Content | Displays supporting text or spacing instructions (non-editable). |
Buttons
Displays Add to Cart and related checkout buttons with optional integrations.
| Setting | Description |
|---|---|
| Show Dynamic Checkout Buttons | Enables direct checkout buttons (e.g., Buy Now). |
| Show Gift Card Recipient Option | Displays a form for entering recipient details for gift card purchases. |
| Show WhatsApp Button | Enables a WhatsApp contact button for product inquiries. |
| WhatsApp Number | Specifies the phone number used by the WhatsApp button. |
| Custom Message | Defines the default message sent via WhatsApp. |
| Enable Border | Adds a top border to the button block. |
| Block Spacing | Controls spacing below the button block. |
Text
Displays supporting rich text content about the product.
| Setting | Description |
|---|---|
| Text Content | Rich text field for product messaging. |
| Text Weight | Controls the font weight of the text. |
| Enable Border | Adds a top border to the block. |
| Hide on Device | Toggles visibility on desktop or mobile. |
| Block Spacing | Sets spacing beneath the text block. |
Product Features / Product Highlights
Showcase product attributes or selling points.
| Setting | Description |
|---|---|
| Block Spacing | Controls the vertical spacing below each block. |
Price
Displays product pricing information.
| Setting | Description |
|---|---|
| Price Size | Selects the heading size for price text. |
| Price Weight | Sets the font weight of the price text. |
| Enable Border | Adds a top border above the price. |
| Block Spacing | Sets the space below the price block. |
Variants
Displays product variant selectors (e.g., size, color).
| Setting | Description |
|---|---|
| Enable Border | Displays a top border above the variant selectors. |
| Block Spacing | Sets spacing beneath the variant options. |
Vendor
Displays the product vendor's name with style options.
| Setting | Description |
|---|---|
| Background Color | Sets the background color behind the vendor name. |
| Text Color | Defines the text color of the vendor label. |
| Text Weight | Sets the font weight of the vendor text. |
| Enable Border | Adds a top border above the vendor info. |
| Block Spacing | Controls spacing below the block. |
Tags
Displays various product tags such as stock, sale, or custom labels.
| Setting | Description |
|---|---|
| Show Stock Tag | Displays a label for inventory status. |
| Show Sale Tag | Displays a label for discounted items. |
| Show Custom Tag | Enables a custom label defined in the theme. |
| Enable Border | Adds a top border above the tag list. |
| Block Spacing | Controls spacing beneath the tag area. |
Quantity Input
Allows shoppers to select the quantity of a product to purchase.
| Setting | Description |
|---|---|
| Show Subtotal | Displays the subtotal based on quantity selected. |
| Enable Border | Adds a top border above the quantity selector. |
| Block Spacing | Controls spacing below the block. |
SKU
Displays the product’s SKU (Stock Keeping Unit).
| Setting | Description |
|---|---|
| Text Weight | Sets the font weight of the SKU label. |
| Enable Border | Adds a top border to the SKU block. |
| Block Spacing | Adjusts the vertical spacing below the block. |
Share
Provides options for sharing the product via social or other channels.
| Setting | Description |
|---|---|
| Enable Border | Adds a top border to the share section. |
| Block Spacing | Controls spacing beneath the share block. |
Pickup Availability
Displays whether the product is available for local pickup.
| Setting | Description |
|---|---|
| Text Size | Sets the size of the availability text. |
| Text Weight | Defines the font weight of the pickup message. |
| Enable Border | Adds a top border above the pickup message. |
| Block Spacing | Adjusts the spacing below the block. |
Payment Icons
Displays accepted payment method icons.
| Setting | Description |
|---|---|
| Heading | Sets the heading text above the icons. |
| Text Weight | Adjusts the font weight of the heading. |
| Enable Border | Adds a top border above the icons. |
| Block Spacing | Controls spacing beneath the block. |
Collapsible Row
Adds expandable content blocks for additional product info.
| Setting | Description |
|---|---|
| Heading | Sets the title of the collapsible row. |
| Heading Size | Selects the heading level used. |
| Heading Weight | Sets the font weight for the heading. |
| Description | Provides the rich text content for the collapsible area. |
| Text Size | Sets the size of the description text. |
| Text Weight | Controls the font weight of the text. |
| Open by Default | Determines if the collapsible is expanded initially. |
| Enable Border | Adds a top border above the block. |
| Block Spacing | Controls spacing beneath the block. |
Complementary Products
Displays a list of related or frequently bought together products.
| Setting | Description |
|---|---|
| Heading | Sets the title of the complementary section. |
| Heading Size | Controls the size of the heading text. |
| Heading Weight | Defines the font weight of the heading. |
| Navigation Arrows | Toggles navigation for the product carousel. |
| Enable Border | Adds a top border above the section. |
| Block Spacing | Adjusts vertical spacing below the section. |
Product Content
Displays product description with optional collapsible behavior.
| Setting | Description |
|---|---|
| Heading | Sets the heading above the description. |
| Heading Size | Defines the heading level used. |
| Heading Weight | Controls the font weight of the heading. |
| Text Size | Sets the size of the description text. |
| Text Weight | Sets the font weight of the description. |
| Show as Collapsible | Toggles the collapsible behavior for the description. |
| Open by Default | Determines if the content is expanded initially. |
| Enable Border | Adds a top border above the block. |
| Block Spacing | Adjusts the spacing below the block. |
Review
Displays a product review with author name and rating.
| Setting | Description |
|---|---|
| Review Text | Sets the main review message content. |
| Text Size | Controls the size of the review text. |
| Text Weight | Sets the font weight of the review body. |
| Author Name | Defines the name of the review author. |
| Author Name Size | Sets the size of the author text. |
| Author Name Weight | Adjusts the font weight of the author name. |
| Star Rating | Displays a star-based rating from 1 to 5, or none. |
Thumbnails
Displays image thumbnails associated with the product.
| Setting | Description |
|---|---|
| Enable Border | Adds a top border above the thumbnails. |
| Block Spacing | Adjusts the spacing below the thumbnails. |
Custom Liquid
Adds custom Liquid code to extend or modify the section.
| Setting | Description |
|---|---|
| Custom Liquid Code | Input area for entering Liquid code. |
| Enable Border | Adds a top border above the custom code block. |
| Block Spacing | Sets the spacing beneath the block |