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.


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


15. Custom Liquid

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.