Default product
Layout settings
- Image showcase : Choose from different layouts image + left carousel, image + bottom carousel, Grid layout, Grid layout with main image.
Hide Badges
- Hide badges: Want to remove sales or custom badges from your product page? Just enable this option, and they’ll be hidden!
Product Image Position
- Image Position: Choose the position of the product image relative to the content. Options are:
- Left
- Right
Media Size
- Image Width: Control the width the image takes proportionate to the content. This setting allows you to adjust the visual balance between the image and the text content.
Image Ratios
- Desktop Image Ratio: Set the image ratio for desktop views. Options include:
- Square
- Landscape
- Portrait
- Adapt to Image
- Mobile Image Ratio: Set the image ratio for mobile views. Options are the same as for desktop.
Image Zoom
Enable Image Zoom: Allow users to zoom into the product image for a closer look.
Enable Swipe on mobile : Make it easy for your customers to browse by letting them swipe through your product media on mobile
Hide slide arrows
- Hide arrows: Enable checkbox to hide the arrows when on carousel
Appearance Settings
- Padding: Adjust the padding at the top and bottom of the section.
- Padding Top: Adjust the top padding.
- Padding Bottom: Adjust the bottom padding.
- Color Scheme: Choose a color scheme for the section from predefined options.
- Theme Settings: Customize the section based on the overall theme settings of your website.
Custom CSS: Add custom CSS for advanced styling.
1. Vendor Name
- Vendor Name Display: Automatically shows the vendor name of the product.
2. Product Title
- Product Title Display: Automatically shows the title of the product.
3. Rating
- Rating Display: Automatically shows the product rating when using an app.
4. Price
- Price Display: Automatically shows the product price.
5. Description
Description Settings – Make Your Content Look Great
Collapse Content | Keep things tidy by hiding long info behind a clickable title.
|
Heading | Add a title that shows above your collapsed content.
|
Truncate Description | Shorten long text to keep your pages sleek. If you don’t want to collapse content but still want to keep things short, this is a great option! Choose how much of your description to show:
Shoppers can click “show More” to view the rest anytime.
|
Don’t Truncate on Desktop | Show the full description on bigger screens.
|
Bottom Spacing | Add a little breathing room below your content.
|
6. Payment Installments
- Payment Installments Display: Shows available payment installment options.
7. Quantity Selector
- Quantity Selector Display: Allows users to select the quantity of the product they wish to purchase.
8. Variant Picker
- Picker Style: Choose between Dropdown or Pills style for selecting product variants.
9. Inventory Status
- Inventory Base Quantity: Set the base quantity for inventory.
- Low Inventory Threshold: Set the quantity threshold to trigger low inventory status.
- Display Options:
- Show only when low.
- Show always.
- Status Bar: Option to show a status bar.
- Color Settings:
- In-stock color.
- Low stock color.
10. Buy Button
- Buy Button Display: Shows the button to add the product to the cart.
- Dynamic buttons: Showcase dynamic buttons for faster checkout.
Outline Button Style: Want a sleek, modern look? This option makes your Add to Cart button an outline style—clean, minimal, and stylish!
Show Payment Icons | Toggle this ON to display Visa/Amex/Discover logos under your checkout button", ✅ Keep this ON always - it builds instant trust! |
Desktop Icon Size | Controls how big the logos appear on laptops/desktops" |
Mobile Icon Size | Makes your logos perfectly sized for smaller screens" |
11. Pickup Availability
- Pickup Availability Display: Shows if the product is available for pickup.
12. Collapsible Text
- Heading Text: Add a heading for the collapsible text section.
- Body Content: Add body content or link it to a page.
13. Badge
- Number of Badges: Add up to 6 badges.
- Custom Icons: Replace default icons with custom ones.
- Badge Heading: Add a heading for each badge.
- Badge Content: Add additional content for each badge.
Bar Chart Block Customization
Heading | Adds a title to your bar chart section (e.g., "Nutrition Facts").Keep it short and descriptive! |
Tooltip Text | Add hoverable explanations for your bars (e.g., "12g protein per serving"). Great for clarifying details. |
Collapsible | Lets customers toggle the chart open/closed. (Turn ON for lengthy info.) |
Background Color | Sets the color of the bar chart background |
Bottom Spacing | Adds padding below the block to Prevents cramped layouts. |
Bar-block Settings
Name | Labels each bar (e.g., "Protein").Use clear, concise names. |
Percentage | Sets the bar length (e.g., 80% ). Auto-calculates from your data. |
Icon Style | Adds symbols (▲ ★ ♦ ♢) next to bars. Pick from: Arrow, Star, Diamond, etc. |
Icon Color | Changes icon color ,Match your brand palette. |
Icon Width | Adjusts your icon size |
Highlighted Color | Colors the active/filled portion of your bars (the part that grows with your percentage). This is your main visual indicator - it makes percentages pop! |
Text color | Controls color of: - Item names (e.g., "Protein 13g") - Percentage values (e.g., "26%") Ensures readability and matches your brand style |
Dynamic bar block
Nutritions details | Enter items with percentages (e.g., "Protein 13g: 26%"). Use colons Example : Protein 13g : 26% Carbohydrates 67g : 24% Fat 17g : 18% What happens :
|
Icon Style | Changes the symbol next to each bar, Pick from: Arrow, Star, Diamond, etc. |
Icon Color | Changes icon color ,Match your brand palette. |
Highlighted Color | Colors the active/filled portion of your bars (the part that grows with your percentage). This is your main visual indicator - it makes percentages pop! |
Text color | Controls color of: - Item names (e.g., "Protein 13g") - Percentage values (e.g., "26%") Ensures readability and matches your brand style |
Nutriscore
The Nutriscore block is a powerful way to visually communicate how healthy or nutritious a product is. It gives shoppers a quick A–E scale (with A in green = great, and E in red = less ideal) that helps them make smarter, faster decisions while shopping.
This is perfect for food, supplements, or any product where nutrition matters.
Heading | This is your title — it shows just above the Nutriscore bar. You can keep it super simple like “Nutriscore” or “Nutritional Rating” — totally up to you! Think of it like giving your customers a little heads-up on what they’re about to see. |
Tooltip Text | This is the little “i” icon next to your heading — super handy for first-time visitors. You can use it to explain what the Nutriscore means, like: “A = Highest nutritional quality, E = Lowest.” That way, your customers instantly know how to read it. |
Highlight Value | Want to point out the score your product has? This is where you do that! Just choose a number from 1 to 5:
We’ll add those little arrows to show the selected score — it’s an easy visual cue.. |
Custom Highlight Item | Use this to dynamically pull a highlight label per product , This is especially helpful when each product has a different reason for its score. Connect this field to your product metafield to show custom benefits automatically. |
Score Labels (value 1, value 2 , value 3 , value 4 , value 5) | You’ll see five value slots here — these represent the different score levels Each one lets you:
|
Background Color | This is the backdrop behind the Nutriscore bar. A soft color like #F4F4F4 keeps things neat and modern. |
Text Color | Controls the text across the block — use a darker color for light backgrounds (or flip it if your background is dark). |
Bottom Spacing | This just sets how much space you want below the Nutriscore block. Add a little breathing room if it feels too close to other sections. |
15. Share
- Share Block Display: Shows options to share the product on social media platforms.
16. Custom Liquid
- Custom Liquid Code: Add custom HTML, CSS, or JavaScript code for advanced customization.
Heading- To type the heading as needed for the section
Maxiumum product to show option
Layout - to show layout as carousal or grid(stacked)
Usual Grid layout settings as in other sections.