Featured product
Featured products on an e-commerce website promote products, engage customers, encourage cross-selling, provide promotion flexibility, boost conversions, allow seasonal promotion, and emphasize brand identity.
General settings
Section width
3 options for container
Stretch width: span the section width regardless of screen size.
Fix width: depends on your page content width in Theme settings -> Layout.
Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
Color scheme
Select colors from Theme settings -> Colors
Product
Select your desired featured product
Desktop media width
Customize the featured image width on desktop
Desktop media position
2 options for media position on desktop:
Left
Right
Column gap
4 options for column gap
No gap
Small
Medium
Large
Enable lightbox
Activates a lightbox effect for images or media in this section.
Enable video looping
This setting allows your video media looping
Enable video autoplay
Videos are muted automatically to allow autoplay. Won't work for YouTube/Vimeo.
Section padding
Top
Customize the top margin of the section
Bottom
Customize the bottom margin of the section
Section divider
Show divider
Toggles the visibility of a horizontal divider line within the section.
Featured product blocks
1. Badge
Displays product tags.
2. Product Title
Display product title.
3. Product rating
Display the product's rating.
4. Price
Display product price.
5. Description
Detailed product description.
6. Highlights
Show key product benefits using icons and short labels.
7. Key features
List the key benefits of the product.
8. Promotion alert
Displays promotional messages (e.g., 🔥 Limited Time). Fill in the settings:
9. Variant picker
Products with variants provide customers with more choices. To learn more about variants and how to add them to your store, visit the following link.
Type : Pills and Dropdown
Show size chart: Display size chart
Size trigger: Define the label(s) used for size options. Separate multiple names with commas.
Size chart label: Title of size chart.
Size chart page: Select the page to display the size chart you've created.
Footer content: Add custom text or links to provide additional information, such as support options or important notices, in the footer section.
Custom size chart: Using specific size charts for each collection or product.To use a custom size charts for product or collection, create metafield with namespace and key: "custom.size_chart". Learn more.
10. Inventory status
Inventory status signifies the availability of a product. It's vital for ensuring products are in stock, managing inventory efficiently, and informing customers about availability on your website.
Low inventory threshold: Set the number of items left to trigger a “Low stock” alert.
Inventory base quantity: Set the starting stock quantity to display the progress bar correctly.
11. Buy buttons
Show dynamic checkout buttons: Toggle the ''Show dynamic checkout buttons" option to include a direct checkout button
Show recipient information form for gift card: Enables users to schedule gift card deliveries with personal messages. Learn more
12. Icon with text
Use this block to show a small icon with a short message — like free shipping, secure checkout, or money-back guarantee.
SVG Icon: Choose an appropriate icon
Text: Write a short text .
13. Media lightbox
Display images or videos in a carousel.
Items per row on desktop: Set the number of items to display per row.
Show navigation: Enable arrows to move between items.
Show pagination: Show dots to indicate item locations.
14. Pickup availability
Show customers if a product is available for local pickup at a nearby store or location.
15. Collapsible row
Add a heading and extra information on the tabs.
Heading: Include a heading that explains the content.
Row content: The content, as you've written
Row content from page: The content is get from the selected page
16. Ask a question
Display a form for users to submit questions to the seller about the product.
17. Share
Display social networks for sharing or copying links to share.
18. Complementary products
To select complementary products, add the Search & Discovery app. Learn more
19. Product meta
Show/hide collections, SKU, product type, and product tags.
20. Promotion countdown
Display the promotion countdown.
You need to create a metafield before displaying this block. Please see how to create a metafield here.
21. Text
Add the custom content you want.
Last updated