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. Perfect for FAQs, detailed product specs, or anything that feels too long. Shoppers can click to expand and read more whenever they want. Helps keep your page clean and easy to scan. 💡 If this is turned ON, you won’t be able to use the “Truncate Description” feature below—only one can be active at a time!
Heading	Add a title that shows above your collapsed content. This only appears when "Collapse Content" is turned on. Great for labeling sections like “Product Details” or “Size Info”.
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: Small Excerpt – Just a few lines Medium Excerpt – A little more Large Excerpt – Most of the description Shoppers can click “show More” to view the rest anytime. 🔁 Only works when “Collapse Content” is turned OFF.
Don’t Truncate on Desktop	Show the full description on bigger screens. Even if truncation is on for mobile, your desktop visitors will still see everything at once. A nice way to balance mobile-friendly design with full info on desktop!
Bottom Spacing	Add a little breathing room below your content. Automatically adds 16 pixels of space. Keeps everything from feeling too squished. You can adjust the value if you want more or less space.

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.

Complementary Products Section

How it Works

This section pulls recommended products from the Search & Discovery app.
You can assign complementary products to each product inside the app.
Once set, the section will automatically show those linked products on the product page.

Connecting Products
To choose which products appear here:

Install and open the Search & Discovery app.
Go to the product you want to edit.
Add complementary products under Recommendations.
Save your changes.

Settings in the Theme Editor

When you add the Complementary Products block under your Product section, you’ll see the following options:

Heading
This is the title shown above the recommended products.
Default text: “Pair well with”.
You can change this to match your brand voice (e.g., “You may also like”, “Complete the look”, “Goes great with”).

Bottom Spacing

Adjusts the spacing below the section.
Measured in pixels (px).
Use the slider or type a number to control the space and keep your layout balanced.

11. 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"

12. Pickup Availability

- Pickup Availability Display: Shows if the product is available for pickup.

13. Collapsible Text

- Heading Text: Add a heading for the collapsible text section.

- Body Content: Add body content or link it to a page.

14. 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.

15.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 `:` to separate names from values. Example : Protein 13g : 26% Carbohydrates 67g : 24% Fat 17g : 18% What happens : The system automatically creates: Left column: Your text (e.g., "Protein 13g") Right column: The percentage (e.g., "26%") Visual bar that grows according to the percentage Must Use: Colon `:` to separate the text from percentage Percent sign `%` at the end
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: 1 = A (best score!) 5 = E (lowest score) 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: Type in a label (like "A", "B", etc.) Pick a color to match — so your customers can visually spot the rating at a glance.
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.

17. Share

- Share Block Display: Shows options to share the product on social media platforms.

18. 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.