The Featured product section displays a selected product directly on a page, including its images, price, options, and purchase controls. Customers can explore and add the product to their cart without opening the full product page.
Demo Usage
The section is used in the Peace demo:
| Demo page | Location and example |
|---|---|
| Homepage | Below Lookbook, featuring Prayer Plant & Pot with product images, rating, countdown, price, color selection, and Add to cart. |
| Plant Drop | Under This week's Plant Drop, featuring Swiss Cheese & Black Pot with product details and purchase controls. |
Steps
1. Add the Featured Product Section
- From Shopify admin, go to Online Store > Themes and click Customize.
- Open the page or template where you want to feature a product.
- Click Add section and select Featured product.
- Under Product, select the product you want to display.
- Add, remove, or reorder the product information blocks.
- Click Save.
2. Configure the Section Layout
| Setting | Description |
|---|---|
| Product | Selects the product displayed in the section. |
| Desktop layout | Choose Media first (product media on the left) or Media second (product details on the left). |
| Make section full width | Extends the section across the available browser width. |
| Show section divider | Displays a divider above the section. |
| Top padding / Bottom padding | Controls spacing around the section. |
Note: The mobile layout displays product media before the product details.
3. Configure Product Media
| Setting | Description |
|---|---|
| Show featured media by default | Displays the product's featured media initially. |
| Hide other variants' media after selecting a variant | Focuses the media gallery on the selected variant's images. |
| Enable image zoom | Lets customers zoom in on product images. |
| Enable video looping | Allows product videos to loop. |
| Image ratio | Choose Adapt to image, Square, Portrait, Landscape, Wide, or Adapt to first image. |
| Image focal point | Keeps the selected area of the image in view when cropped. |
| Enable layered images | Displays overlapping product images instead of the standard gallery. |
When Enable layered images is selected, the section uses up to the first four product images; other media types are not included in this layout.
4. Add Product Information Blocks
You can customize the content by adding blocks inside Featured product.
| Block | Purpose |
|---|---|
| Title | Shows the product name; includes title size, heading tag, and optional price. |
| Price | Shows the product price and optional sale badges. |
| SKU | Displays the selected variant's SKU. |
| Text | Adds short text with an optional icon and text style. |
| Description | Shows the product description. |
| Variant picker | Lets customers choose product options; supports swatches and a size chart page. |
| Inventory status | Displays low-stock or incoming-inventory information from Shopify. |
| Buy buttons | Adds quantity selection, Add to cart, and optional dynamic checkout buttons. |
| Product rating | Displays ratings when supported product review data is available. |
| Countdown timer | Displays a promotional countdown. |
| Share | Adds product-sharing controls. |
| Read more | Links customers to the full product page. |
| Collapsible description / Collapsible row | Organizes longer product information into expandable panels. |
| Pop-up | Opens content from a selected Shopify page. |
| Image | Adds a supporting image and optional link. |
| Line item property | Collects customer customization details with text, checkbox, radio, or dropdown inputs. |
| Separator / Empty space | Adjusts spacing and separation between blocks. |
| Custom Liquid / App | Adds advanced or app-provided content when needed. |
To add a block, open Featured product, click Add block, choose the block, and configure its settings.
5. Set Up Variant Swatches and Buy Buttons
Variant picker settings:
- Show variant labels — show option names above the choices.
- Type — choose Dropdown or Pills.
- Swatch source — choose Variant images, Custom, or Native. Swatches require the Pills picker type.
- Swatch shape — choose Circle, Square, or None.
- Allow selecting out-of-stock options — let customers select unavailable options.
- Size chart page — choose an existing Shopify page for the size guide.
Buy buttons settings:
- Show quantity selector — let customers adjust quantity.
- Show dynamic checkout buttons — display accelerated payment options available for your store.
- Show recipient information form for gift card products — collect gift card recipient details when applicable.
Product availability, pricing, and variants come from the product's Shopify admin settings.
6. Configure Colors and Highlights
- Use Highlight in the section settings to choose the accent color for supported highlight effects.
- In a Text or Collapsible row block, enable Enable highlight and choose a Highlight style.
- Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
7. Notes and Troubleshooting
- Select a product in the section's Product setting. If none is selected, the product details cannot be populated normally.
- If a product image or video is missing, check the media uploaded to that product in Shopify admin > Products.
- If swatches do not appear, use Pills and verify the selected Swatch source is configured.
- If the Add to cart button is unavailable, check the selected variant's inventory and purchase availability.
- If inventory messages do not appear, check inventory tracking, stock quantity, and the Inventory status block settings.
- If the rating is empty, make sure your product review app provides compatible rating data.
- Version note: Be Yours 8.7.0 fixed hidden empty elements affecting the Featured product section in the Theme Editor. The settings described here were checked against Be Yours 9.5.1.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Guarantees Section in Be Yours
How to Set Up the Image Comparison Section in Be Yours