Product page
Overview:
The Main Product section is the core product display template on the product page. It presents all essential and supplementary product information, including title, tags, price, description, variations, purchasing actions, and additional media or collapsible content. This section also supports promotional deals, pickup availability, social sharing, and custom liquid content.
Section Configuration:
Setting |
Description |
|---|---|
| Product Media Size | Controls the aspect ratio of product media. Options: Adapt, Square, Portrait, or Landscape. |
| Reviews: Auto Play | Enables auto-rotation of product review slides. |
| Reviews: Show Navigation | Displays next/previous navigation arrows for reviews. |
| Review Slide Interval | Time in seconds between review slide changes (2–9 seconds). |
| Deals: Auto Play | Enables auto-rotation for other product deals. |
| Deals: Show Pagination | Displays pagination dots below the deals carousel. |
| Deals: Slide Interval | Time in seconds between slides (2–9 seconds). |
| Container Layout | Sets the section width: Page Width, Contained Content, or Full Width. |
| Corner Radius | Applies corner rounding to the section container. |
| Color Scheme | Applies a theme-based color scheme to the section. |
| Top Padding | Adds vertical spacing above the section (0–100px). |
| Bottom Padding | Adds vertical spacing below the section (0–100px). |
Blocks Configuration:
Available Blocks
Each block adds specific content or functionality to the product section.
Tags
Displays product tags.
Setting |
Description |
|---|---|
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Title
Displays the product title, vendor, and stock status.
Setting |
Description |
|---|---|
| Show Vendor | Displays the product vendor name. |
| Show Stock | Displays product availability. |
| Text Size/Weight | Controls size and weight of meta info text. |
| Heading Size/Weight | Controls size and weight of the product title. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Text
Adds a rich text description.
Setting |
Description |
|---|---|
| Text | Rich text input for product messaging. |
| Text Size/Weight | Controls size and weight of the content. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Variants Price
Displays product pricing, SKU, and variation details.
Setting |
Description |
|---|---|
| Show Price | Displays the main product price. |
| Show SKU | Displays the stock-keeping unit. |
| Show Unit Price | Displays the price per unit for relevant products. |
| Show Variations | Shows variant selectors (e.g., size, color). |
| Show Size Chart | Displays a size chart popup. |
| Size Chart Image | Image displayed in the size chart modal. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Quantity Input
Displays quantity selector and optional subtotal.
Setting |
Description |
|---|---|
| Show Subtotal | Displays the calculated subtotal amount. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Buttons
Displays add-to-cart and optional checkout/WhatsApp buttons.
Setting |
Description |
|---|---|
| Show Dynamic Checkouts | Displays one-click checkout buttons (e.g., Apple Pay, PayPal). |
| Gift Card Recipient Option | Enables input for recipient details (for gift cards). |
| Show WhatsApp Button | Adds a WhatsApp inquiry button. |
| WhatsApp Number | Target phone number for WhatsApp chat. |
| Custom Message | Pre-filled WhatsApp message (supports ` |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Collapsible Content
Adds a collapsible section with a custom heading (used for description or details).
Setting |
Description |
|---|---|
| Heading | Title for the collapsible content. |
| Heading Size/Weight | Controls visual style of the title. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Collapsible Row
Creates a dropdown-style collapsible section with additional rich text content.
Setting |
Description |
|---|---|
| Heading | The title of the collapsible row. |
| Heading Size/Weight | Controls size and weight of the heading text. |
| Description | Rich text content inside the collapsible area. |
| Description Size/Weight | Controls visual style of the description. |
| Open by Default | Expands the content by default. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Pickup Availability
Displays local pickup options for the selected variant.
Setting |
Description |
|---|---|
| Text Size/Weight | Controls visual style of the pickup info. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Other Deals
Displays a carousel of other products as a cross-sell.
Setting |
Description |
|---|---|
| Products | Selects up to 10 products to display. |
| Heading | Title above the product carousel. |
| Heading Size/Weight | Controls visual style of the title. |
| Product Title Size/Weight | Adjusts style of product names in carousel. |
| Show Price | Displays price for each product. |
| Show Quick View | Enables quick view modal on product hover. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Share
Displays social sharing icons.
Setting |
Description |
|---|---|
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
USP (Unique Selling Points)
Highlights up to three key selling features, each with an icon and heading.
Setting |
Description |
|---|---|
| Icon Image | Image shown next to each USP. |
| Heading | USP title text. |
| Top/Bottom Border | Adds borders above or below the block. |
| Spacing | Adds vertical spacing below the block (0–50px). |
Column Separator
Adds a visual divider between product page columns. No settings required.
Full Width Separator
Adds a horizontal line that spans the full page width. No settings required.
Custom Liquid
Allows insertion of custom Liquid code.
Setting |
Description |
|---|---|
| Custom Liquid | Accepts any valid Liquid code snippet. |
| Spacing | Adds vertical spacing below the block (0–50px). |