Featured product

The Featured Product section allows you to spotlight a single product with customizable blocks including product title, price, quantity selector, variant picker, buy button, vendor details, ratings, and custom liquid options.

Click on Featured products for the general settings

Text Content

Subheading: Add a subheading to appear above the Featured Product section.
Heading: Set the main heading for the Featured Product section.

Product Selection

Select Product: Choose the specific product you want to feature from the list of available products in your store.

View Details Link

Enable View Details Link: Option to have a "View Details" link that directs users to the product page.

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.

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.

Block level settings

Featured Product Section Blocks and Settings

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 Display: Automatically shows the product description.

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.

Variant Picker

Style:

You can choose how the variants are displayed on your product page.

Dropdown: This is a classic and clean way to show options, perfect for products with a lot of variants.
Pills: This shows the variants as small clickable buttons, which is great for a more modern look and for products with fewer options.

Show swatches:

Turn this on if you want to display color or pattern swatches instead of just the variant names. It’s a great visual way to show off your options!

Bottom spacing:

Use this slider to add a little bit of space below the variant picker on the page.

Guide drawer

This is one of our favorite features! The Guide drawer lets you easily add a helpful size guide or other important information right next to your variant options. It opens up like a little drawer, so it doesn't clutter your product page. Here's how to set it up:

Heading:	This is the text that your customers will see on the button to open the guide. A great example is "Size guide."
Option for drawer	This is a really important step! You need to enter the exact name of the product option you want this guide to be connected to. For example, if you sell T-shirts with an option called "Size," you would type "Size" here. That way, the guide button will appear right next to the size options.
Page	You can link the guide to a full page on your store! Maybe you've already created a detailed size chart page. Just click "Select" and choose the page you want to link to.
Image	Don't have a whole page? No problem! You can simply upload an image for your guide, like a size chart graphic. It will pop up in the drawer when a customer clicks the button. You can also explore our free image library to find one that works for you.

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.

- Inventory Number: Option to show inventory numbers.

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

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.

14. Share

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

PDP Sales Banner

Parent Block: Overall Banner Control

Background	Sets the background color for the entire banner container using a color picker or a hexadecimal code (e.g., `#A83636` ).
Bottom spacing	Controls the vertical space (padding/margin) below the banner when viewed on a mobile device. Set the value in pixels (e.g., `15 px` ).
Bottom spacing (desktop)	Controls the vertical space (padding/margin) below the banner when viewed on a desktop or larger screen.

Group Block: Layout and Alignment

Direction (Vertical/Horizontal	Horizontal puts elements side-by-side (great for desktop). Vertical stacks them top-to-bottom (essential for mobile readability).
Vertical on Mobile	A lifesaver! If you set the group to Horizontal for desktop, you can check this box to automatically stack them vertically on phones, ensuring a clean mobile experience without clutter.
Gap (Desktop/Mobile) :	Controls the space *between* elements within this group. Use a small gap (e.g., `24 px` ) to keep related items close but distinct.

Child Blocks:

A. Content Block (Badge and Text)

Show Sale Badge:	Toggle a small visual flag (e.g., "SALE" or "NEW") on or off.
Badge Label :	The text *inside* the badge (e.g., `BLACK FRIDAY SALE` ).
Background Color :	Sets the color for the badge itself (the example uses red, `#A83636` , to match the background).
Content Text :	Your main promotional message (e.g., `FLAT 20% OFF ON YOUR FIRST ORDER!` ). This is your core value proposition.
Alignment :	Positions the text and badge (left, center, or right) within their container.

2. The Group Block

The Group Block is where you decide how your content is arranged—it directs your different elements (like the timer and the badge) to stand side-by-side or stack on top of each other.

Setting	What It Does for You
Direction (Vertical/Horizontal)	Horizontal puts elements side-by-side (great for desktop). Vertical stacks them top-to-bottom (essential for mobile readability).
Vertical on Mobile	A lifesaver! If you set the group to Horizontal for desktop, you can check this box to automatically stack them vertically on phones, ensuring a clean mobile experience without clutter.
Gap (Desktop/Mobile)	Controls the space *between* elements within this group. Use a small gap (e.g., `24 px` ) to keep related items close but distinct.

3. Child Blocks: The Promotional Elements

These are the actual pieces of content that grab your customer's attention.

A. Content Block (Badge and Text)

Setting	What It Does for You
Show Sale Badge	Toggle a small visual flag (e.g., "SALE" or "NEW") on or off.
Badge Label	The text *inside* the badge (e.g., `BLACK FRIDAY SALE` ).
Background Color	Sets the color for the badge itself (the example uses red, `#A83636` , to match the background).
Content Text	Your main promotional message (e.g., `FLAT 20% OFF ON YOUR FIRST ORDER!` ). This is your core value proposition.
Alignment	Positions the text and badge (left, center, or right) within their container.

B. Timer Block

Year, Month, Day, Hours, Minute	Use these fields to define the exact date and time your promotion will end. The timer will count down to this specific moment.
Time zone	Crucial for accuracy! Always select your shop's official time zone (e.g., "Shop time zone"). This prevents confusion and ensures the timer ends simultaneously for everyone, regardless of where the customer is browsing from.
When timer expires...	How the timer behaves after the sale ends: • Set timer to zero: The timer will stop at `00:00:00` and remain visible. Use this if you want the banner to remain as a record of the sale. • Hide timer (often an option): The entire timer block disappears from the page. Use this for the cleanest look once the promotion is truly over.
Text	The label right next to the countdown (e.g., "Offer ends in:" or "Time left to shop:").
Text Color	Sets the color of the countdown numbers and the label text. Use a high-contrast color (like bright yellow `#DBFF00` or white) to make the numbers jump off the bar.
Background Color	Sets the background color specifically for the timer box. Use a contrasting color (like black `#313131` ) to make the timer stand out from the rest of the banner or product page.
Spacing (Desktop) & Gap	Controls the vertical space around the timer and the small horizontal space between the elements (like the number and the label), ensuring the timer is neat and easy to read on desktop.

Offer Block

Content Alignment

Controls the horizontal alignment of all the text inside the offer items (Left, Center, or Right). Use this to ensure all your offer text looks uniform and neat.

Icon Position

Controls how the icon sits relative to the text. You have two main choices:

• Aligned Vertically (Stack): The icon sits on top of the text in a column. Use this for maximum visual impact where the icon is prominent.

• Aligned Horizontally (Parallel): The icon sits next to the text (side-by-side). Use this when space is tight, or you want a more concise, single-line offer.

Bottom Spacing (Mobile/Desktop)

This is your padding or breathing room! It controls the vertical space below the entire block, preventing it from crashing into the next section (like reviews). You can set different spacing for phone and desktop.

Group Block

Direction	Decides if your offers are Vertical (stacked top-to-bottom) or Horizontal (side-by-side). Use Horizontal for desktop to show off multiple offers, and Vertical to ensure readability on smaller screens.
Vertical on Mobile	A mobile necessity! If your desktop layout is Horizontal, ticking this switch forces the offers to stack vertically on phones, guaranteeing a clean user experience.
Alignment (Space Between/Space Around)	Controls how the available horizontal space is distributed between your offer items when they are set to Horizontal. • Space Between: Pushes the items to the edges of the group. • Space Around: Adds equal padding on both sides of each item.
Gap (Desktop/Mobile)	The specific space (in pixels) *between* each individual offer item, helping you fine-tune the visual flow and separation.

Individual Offer Content

Heading	The short, bold claim. This is the first, most important piece of information. Example: `Free Shipping on Orders Above $100`
Text	The brief, supporting detail. Use this to gently expand on the heading. Example: `Enjoy free shipping on all orders over $100.` (Basic formatting is often available here).
Truncate Words	A display safety net. Set a number (or `0` to disable) to prevent long text from breaking your layout on small screens. It limits how many words show before they are cut off.
Icon Style	Select the visual symbol (like `Delivery box` ) that matches your offer. The right icon communicates the benefit immediately.
Icon Width	Adjusts the size of the icon in pixels (e.g., `25 px` ). Make it visible without overpowering the text.
Icon Color	Sets the color of the symbol.
Text Color	Sets the color of the Heading and Text.
Background Color	Sets a subtle background color for the individual offer box, which can help it stand out from the page background.
Link Text Color	The color for any clickable link you embed within the offer text (e.g., linking to your full policy).

17. Custom Liquid

- Custom Liquid Code: Add custom HTML, CSS, or JavaScript code for advanced customization.