Featured Product

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Product Sections > Featured Product

Overview

The Featured product section highlights a single product with full functionality: media gallery, variants, quantity selector, add to cart, and description. It is block-based: you choose which blocks to show and in what order. Use it on your homepage to showcase a bestseller, new arrival, or campaign product.

Where to Add This Section

Go to Online Store > Themes > Customize.
Select Homepage (or desired template).
Click Add section.
Choose Featured product.
Save.

📷 Image placeholder: Add a screenshot of Featured product section with blocks.

Quick Setup (4 Steps)

Select product — Choose the product in section settings.
Add blocks — Add Title, Price, Variant picker, Add to cart, Description.
Reorder blocks — Drag to set display order.
Set layout — Media position (left/right), media size.

Section Settings

Setting	Description
Product	Product to feature
Media position	Left or Right
Media size	Small, Medium, Large
Force image size	Override theme product image ratio
Enable zoom	Zoom on image hover
Enable video looping	Loop product videos
Video style	Muted, With sound
Thumbnail position	Bottom, Left, Right
Show thumbnail arrows	Thumbnail navigation arrows
Mobile layout	Stacked, Horizontal scroll

Blocks

Block	Description
Title	Product title, vendor, SKU
Price	Price, compare-at, savings
Quantity selector	Quantity input
Variant picker	Size, color, etc.
Inventory status	Stock status
Sales point	Custom sales points
Buy buttons	Add to cart, dynamic checkout
Description	Product description
Size chart	Size chart link
Complementary products	Frequently bought together
Trust badge	Trust badges
Custom tab	Tab with custom content or page link
Text	Rich text block
Separator	Visual divider
Contact form	Contact form block
HTML	Custom HTML
Social share	Share buttons

Block order

Drag blocks to reorder. Typical order: Title → Price → Variant picker → Quantity → Buy buttons → Description.

📷 Image placeholder: Add a screenshot of Featured product block list and settings.

Step-by-Step Setup

Step 1: Add the section

Add Featured product to your homepage or template.

Step 2: Select product

In section settings, find Product.
Click and select the product to feature.
Ensure the product has images, variants (if applicable), and is published.

Step 3: Add blocks

Click Add block.
Add Title — Shows product title, vendor, SKU.
Add Price — Price, compare-at, savings.
Add Variant picker — Size, color, or other options.
Add Quantity selector — For quantity input.
Add Buy buttons — Add to cart and dynamic checkout.
Add Description — Product description.
Optionally add Inventory status, Sales point, Trust badge, Custom tab, Text, Separator, Contact form, HTML, Social share.

Step 4: Configure layout

Media position — Left or Right (image/media side).
Media size — Small, Medium, Large.
Thumbnail position — Bottom, Left, or Right of main image.
Mobile layout — Stacked or Horizontal scroll.
Enable zoom — For image hover zoom.
Save.

Use cases

Hero product — Featured bestseller on homepage
New arrival — Launch product highlight
Campaign — Seasonal or promotional product
Product page alternative — Full product experience in a section

For merchants

Use for hero products or limited-time offers.
Reorder blocks to emphasize price or CTA.
Ensure product has variants and images configured.
Consider Buy it now for impulse purchases.

Common mistakes

Mistake	Fix
No product selected	Choose Product in section settings
Missing blocks	Add Title, Price, Add to cart at minimum
Wrong block order	Drag blocks to reorder
Product not published	Ensure product is active and available
Variants not showing	Add Variant picker block

FAQs

1. How do I properly set up this section for the first time?

Add the Featured product section from the theme editor.
Select a product in Section settings → Product.
Add required blocks: Title, Price, Variant picker (if product has variants), Quantity selector, Buy buttons, Description.
Adjust layout (media position, size, mobile layout).
Save.

Best practice: Use this section for a bestseller or high-converting product.

2. What type of product works best in this section?

Bestsellers
New arrivals
Limited-time promotions
Seasonal products
High-margin items

Avoid products with incomplete images or unclear variant naming.

3. Why are my product images appearing cropped?

This is controlled by Force image size in section settings.

Natural – Keeps original image ratio
Square (1:1) – Crops to square
Landscape (4:3)
Portrait (2:3)

If images look cropped unexpectedly, switch to Natural.

4. Why are my variant swatches not showing correctly?

Color swatches require: Variant option name such as "Color", proper color naming (e.g., Red, Blue, Black), swatches enabled in Variant picker block. If using image swatches, ensure images are properly uploaded in product media.

5. How does inventory threshold work?

In the Inventory status block: You can set a Low stock threshold. If inventory is below this number, a low stock message appears. If inventory is zero and overselling is disabled, "Sold out" appears. If overselling is enabled, a transfer/backorder message may appear. This updates automatically when variants change.

6. Can I show a pickup availability message?

Yes. Enable Pickup availability in the Buy buttons block. This requires: Store pickup locations configured, inventory available at pickup locations.

7. How does Ajax add-to-cart behave?

If your theme uses a cart drawer: The product is added without page refresh, the cart drawer opens automatically. If using page cart: The form submits normally, user is redirected to cart page. No additional configuration is required.

8. Why is dynamic checkout (Buy it now) not showing?

Check: Dynamic checkout is enabled in Buy buttons block, the product is available for that payment method, Shop Pay / Apple Pay / Google Pay is enabled in Shopify settings.

9. Can I customize the block order for better conversions?

Yes. Recommended high-conversion order: Title, Price, Sales points, Variant picker, Quantity, Buy buttons, Trust badge, Description. Place Buy buttons above the fold for best performance.

10. Why does the complementary products section sometimes not show?

The section depends on Shopify's recommendations engine. It may not appear if: The store is new, no purchase history exists, too few products exist. This is expected behavior.

11. Can I use this section multiple times?

Yes. Each instance can feature a different product. Best practice: Do not overuse on homepage, use 1–2 featured products maximum.

12. Does this section affect SEO?

This section is fully crawlable. Product title links to product page, structured product data remains on product template, does not duplicate canonical URLs. For strongest SEO, keep main product content on product template.

13. How do I improve conversions using this section?

Add strong sales points (Free shipping, Easy returns)
Use high-quality images
Enable dynamic checkout
Show inventory urgency if appropriate
Add trust badge

14. Why does sticky media not work on mobile?

Sticky behavior is disabled on mobile intentionally to prevent layout conflicts and improve usability.

15. Can I add custom content below the buy buttons?

Yes. Use: Text block, Custom tab, HTML block. This allows adding guarantees, shipping details, or promotional banners.

16. What happens if no product is selected?

The section will not render to prevent broken layout or empty content.

17. Is this section suitable for high-traffic stores?

Yes. No external scripts, uses native Shopify APIs, minimal layout shift, optimized media handling.

18. How do I select a size or color? (For Customers)

Use the variant options displayed below the product title. Available options update automatically.

19. Why does the price change when I select a different option?

Each product variant may have a different price. The section updates pricing instantly.

20. How does the image zoom work?

Click the main image to open fullscreen view. Use arrow keys to navigate. Press Escape to close.

21. Why does the Add to Cart button say "Sold out"?

The selected variant is currently unavailable.

22. Can I adjust quantity?

Yes. Use the + and − buttons or type directly into the quantity field.

23. Does this work with express checkout?

Yes. Dynamic checkout buttons such as Shop Pay, Apple Pay, or Google Pay are supported.

24. Is this section Online Store 2.0 compliant? (Technical)

Yes. It uses block-based schema, JSON templates, and does not rely on deprecated product-form patterns.

25. How are variants initialized?

The section embeds product variants as JSON and matches selected options to update state dynamically.

26. Does it respect URL variant parameters?

Yes. If a ?variant= parameter exists, the matching variant is initialized.

27. How does Ajax add-to-cart work? (Technical)

If a cart drawer exists, the section submits via /cart/add.js using Fetch API. Otherwise, it falls back to page cart.

28. Is the lightbox accessible?

role="dialog"
aria-modal="true"
Focus trap
Keyboard navigation
Escape key support

29. How is inventory handled?

Inventory state updates dynamically based on: variant.available, inventory quantity, inventory policy.

30. Does the section degrade gracefully without JavaScript?

Yes. Forms submit normally and product functionality remains intact.

31. Are external libraries used?

No. The section uses only native JavaScript and Shopify APIs.

32. Does this section introduce layout shift?

No. Aspect ratios and skeleton loaders prevent cumulative layout shift.

33. Is the section compatible with cart drawers and dynamic checkout?

Yes. It supports cart drawers, page cart, and dynamic checkout buttons.

Multipurpose theme documentation