Product page
Overview:
The Main Product section is designed to display detailed product information in a highly customizable layout. It supports product titles, pricing, variants, reviews, stock information, trust badges, payment methods, product tabs, pickup availability, product controls, custom Liquid, app integrations, and responsive layouts. This section helps merchants create conversion-focused product pages with flexible content blocks and advanced styling controls.
Blocks Configuration
App Block:
The App block allows Shopify apps to inject additional product content or functionality.
| Setting |
Description |
| App Integration |
Displays app-generated content such as reviews, subscriptions, upsells, bundles, or widgets. |
Custom Liquid Block:
The Custom Liquid block allows merchants to add custom Shopify Liquid code for advanced customization.
| Setting |
Description |
| Custom Liquid |
Adds custom Liquid code for product-specific customization or third-party integrations. |
The Tags block displays product tags associated with the product.
Spacing
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Discount Bar Block:
The Discount Bar block displays scrolling promotional discount messaging.
Marquee Settings
| Setting |
Description |
| Marquee Direction |
Controls scrolling direction such as Right to Left or Left to Right. |
| Marquee Speed |
Controls scrolling animation speed. |
| Pause on Hover |
Pauses scrolling animation when hovered. |
| Discount Label |
Defines promotional text such as Today. |
| Discount Info |
Displays additional promotional text such as Limited Time Deal. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Content Block:
The Content block displays the Shopify product description.
| Setting |
Description |
| Product Content |
Automatically displays content added inside the Shopify product editor. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Share Block:
The Share block enables customers to share the product.
| Setting |
Description |
| Product Sharing |
Displays product sharing options for social platforms. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Pickup Availability Block:
The Pickup block displays local pickup availability information.
Typography:
| Setting |
Description |
| Text Size |
Controls pickup text size such as Large, Medium, or Small. |
| Text Weight |
Adjusts font thickness ranging from Thin (100) to Black (900). |
| Text Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Font Family |
Allows switching between Default and Heading font family styles. |
| Text Color Style |
Applies predefined color styling. |
Drawer Settings:
| Setting |
Description |
| Drawer Heading Size |
Controls drawer heading size. |
| Drawer Heading Weight |
Adjusts heading font thickness. |
| Drawer Heading Case |
Changes text transformation style. |
| Drawer Heading Family |
Controls heading font family. |
| Drawer Heading Color Style |
Applies predefined heading color styling. |
| Drawer Color Scheme |
Applies a predefined color palette to the pickup drawer. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Point Item Block:
The Point Item block displays highlighted product benefits in list format.
Content:
| Setting |
Description |
| Icon |
Uploads an icon image for the point item. |
| Icon Size |
Controls icon size. |
| Text |
Defines highlighted text such as product benefits or selling points. |
Typography:
| Setting |
Description |
| Text Size |
Controls text size. |
| Text Weight |
Adjusts font thickness. |
| Text Case |
Changes text transformation style. |
| Font Family |
Allows switching font family. |
| Text Color Style |
Applies predefined text color styling. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Tab List Block:
The Tab List block creates product information tabs.
Content:
| Setting |
Description |
| Show Icon |
Displays an icon inside the tab heading. |
| Icon |
Uploads a custom icon. |
| Icon Size |
Controls icon size. |
| Tab Heading |
Defines tab title. |
| Description |
Displays detailed tab content such as shipping, returns, ingredients, or product information. |
Typography:
| Setting |
Description |
| Heading Size |
Controls tab heading size. |
| Heading Weight |
Adjusts heading font thickness. |
| Heading Case |
Changes text transformation style. |
| Heading Family |
Controls font family. |
| Heading Color Style |
Applies predefined color styling. |
Description Typography:
| Setting |
Description |
| Description Size |
Controls text size. |
| Description Weight |
Adjusts font thickness. |
| Description Case |
Changes text transformation style. |
| Description Family |
Controls font family. |
| Description Color Style |
Applies predefined styling. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Payment Methods Block:
The Payment Methods block displays secure payment messaging.
Content:
| Setting |
Description |
| Text |
Defines secure payment messaging such as 100% Secure Payment. |
Typography:
| Setting |
Description |
| Text Size |
Controls text size. |
| Text Weight |
Adjusts font thickness. |
| Text Case |
Changes text transformation style. |
| Font Family |
Allows switching font family. |
| Text Color Style |
Applies predefined color styling. |
Layout:
| Setting |
Description |
| Text Alignment (Desktop) |
Sets desktop alignment (Left, Center, or Right). |
| Text Alignment (Mobile) |
Sets mobile alignment. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Tagline Block;
The Tagline block displays promotional labels above product content.
Content:
| Setting |
Description |
| Text |
Defines promotional tagline content. |
| Show Dot |
Displays status dot when enabled. |
| Background Color |
Controls tagline background color. |
| Text Color |
Controls tagline text color. |
| Dot Color |
Controls status dot color. |
Typography:
| Setting |
Description |
| Text Size |
Controls text size. |
| Text Weight |
Adjusts font thickness. |
| Text Case |
Changes text transformation style. |
| Font Family |
Allows switching font family. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Product Controls Block:
The Controls block manages purchase actions.
| Setting |
Description |
| Show Quantity Selector |
Displays quantity selector. |
| Show Subtotals |
Displays subtotal price with quantity selector. |
| Show Dynamic Buttons |
Displays dynamic checkout buttons such as Buy Now. |
| Enable Gift Card Recipient |
Allows customers to send gift cards to recipients. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Variants Block:
The Variants block displays product options such as size, color, or style.
| Setting |
Description |
| Variant Picker |
Displays product variants available for selection. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the block on mobile devices. |
Title Block:
The Title block displays the product title.
Typography:
| Setting |
Description |
| Heading Size |
Controls title size. |
| Heading Weight |
Adjusts font thickness. |
| Heading Case |
Changes text transformation style. |
| Heading Tag |
Sets HTML heading level (H1–H6). |
| Heading Family |
Controls font family. |
| Heading Color Style |
Applies predefined styling. |
| Heading Link Style |
Controls link appearance. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the title block. |
| Bottom Margin (Mobile) |
Adds spacing below the title block. |
Price Bar Block:
The Price Bar block displays pricing and stock information.
| Setting |
Description |
| Text Size |
Controls text size. |
| Text Weight |
Adjusts font thickness. |
| Text Case |
Changes text transformation style. |
| Font Family |
Controls font family. |
| Show Unit Price |
Displays unit price when available. |
| Show Stock |
Displays stock availability. |
| Show Sale Badge |
Displays sale pricing information. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block. |
| Bottom Margin (Mobile) |
Adds spacing below the block. |
Reviews Bar Block:
The Reviews Bar block displays ratings, trust badges, and review messaging.
Content:
| Setting |
Description |
| Profile Icon |
Uploads customer profile image. |
| Trust Icon |
Uploads trust badge image. |
| Rating |
Displays product rating such as 5.0. |
| Rating Color |
Controls rating star color. |
| Review Text |
Defines review messaging content. |
| Enable Split Layout |
Enables dual review layout. |
Split Review Settings:
| Setting |
Description |
| Left Text |
Displays left-side review content. |
| Left Background |
Controls left card background color. |
| Left Text Color |
Controls left card text color. |
| Left Border Color |
Controls border color. |
| Right Text |
Displays right-side review content. |
| Right Background |
Controls right card background color. |
| Right Text Color |
Controls right card text color. |
| Right Border Color |
Controls border color. |
Typography:
| Setting |
Description |
| Text Size |
Controls review text size. |
| Text Weight |
Adjusts font thickness. |
| Text Case |
Changes text transformation style. |
| Font Family |
Controls font family. |
| Text Color Style |
Applies predefined styling. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the block. |
| Bottom Margin (Mobile) |
Adds spacing below the block. |