The Featured product section lets you highlight one product on any page, such as the homepage or a landing page. It displays product media, product information, variant options, price, buy buttons, and other product blocks in a compact product-page style layout.
Use this section when you want to promote a specific product without sending customers to the full product page first.
How to Set Up the Featured Product Section in Concept
Steps:
Add the Featured Product section
Open the theme editor and add the section where you want the featured product to appear.
- From your Shopify admin, go to Online Store > Themes.
- Find your Concept theme and click Customize.
- Open the page template where you want to display the featured product.
- Click Add section.
- Select Featured product.
- Move the section to the desired position.
- Click Save.
Select the product to display
After adding the section, select the product that should be featured.
- Open the Featured product section settings.
- In the Product setting, choose the product you want to display.
- Save the changes.
If no product is selected, the section may show placeholder content in the theme editor.
Configure the product media layout
The section includes media settings similar to the main product page.
| Setting | Description |
|---|---|
| Media size | Adjusts the width balance between the product media and product information on desktop. |
| Gallery layout | Controls how product media is displayed. |
| Thumbnail position | Sets where thumbnails appear when the thumbnail gallery layout is used. |
| Image ratio | Controls the product media image ratio on desktop. |
| Image zoom | Enables or changes the product image zoom behavior. |
| Hide other variant media after selecting a variant | Shows only the media related to the selected variant when variant media is available. |
| Enable video autoplay | Allows product videos to autoplay when possible. |
| Enable video looping | Loops product videos. |
The Featured product section can also display product videos, external videos, and 3D models if those media are added to the selected product.
Configure the mobile media layout
Use the mobile settings to control how product media appears on smaller screens.
| Setting | Description |
|---|---|
| Mobile layout | Controls the product media layout on mobile. |
| Image ratio mobile | Sets the image ratio for mobile product media. |
| Show thumbnails on mobile | Displays media thumbnails on mobile when enabled. |
These settings help keep the featured product layout clean and easy to browse on mobile devices.
Add and arrange product information blocks
The Featured product section supports many of the same blocks as the product page. You can add, remove, hide, and reorder blocks from the theme editor.
Common blocks include:
| Block | Purpose |
|---|---|
| Text | Adds custom text or product metafield text. |
| Title | Displays the product title. |
| Price | Displays the product price. |
| SKU | Displays the selected variant SKU. |
| Badges | Displays product or variant badges. |
| Inventory status | Displays stock availability messages. |
| Quantity selector | Lets customers choose quantity. |
| Variant picker | Lets customers select product options. |
| Buy buttons | Displays add-to-cart and dynamic checkout buttons. |
| Pickup availability | Shows pickup availability when configured in Shopify. |
| Description | Displays the product description. |
| Share | Adds product sharing options. |
| Complementary products | Displays products configured through Shopify recommendations. |
| Collapsible row | Adds expandable product information. |
| Product bundle | Displays related bundle or upgrade products. |
| Line item property | Adds custom fields to the product form. |
Only add the blocks that are needed for the featured product layout. Keeping the section focused helps customers understand the product quickly.
Configure the Variant picker block
The Variant picker block controls how product options are displayed.
| Setting | Description |
|---|---|
| Enable dynamic variants | Updates available options based on the current selection. |
| Show variant labels | Shows option labels such as Color or Size. |
| Picker type | Displays options as buttons or dropdowns. |
| Enable color swatches | Shows color options as swatches when available. |
| Color swatch type | Uses either color/custom swatches or variant images. |
| Size chart | Connects a page as a size chart link. |
Use this block when the selected featured product has variants.
Configure the Buy buttons block
The Buy buttons block controls the purchase actions inside the Featured product section.
| Setting | Description |
|---|---|
| Show quantity selector | Shows a quantity selector inside the buy button area. |
| Show price | Displays the product price near the buy buttons. |
| Show dynamic checkout button | Displays Shopify dynamic checkout buttons when available. |
| Show gift card recipient form | Shows recipient fields for gift card products. |
| Enable Back in stock | Shows a back-in-stock form when enabled and supported by the product state. |
Make sure the Buy buttons block is added if customers should be able to add the featured product to cart directly from this section.
Use Product variations, Product bundle, and Complementary products
The Featured product section can also display advanced product blocks.
| Block | Description |
|---|---|
| Product variations | Links separate products together as product variation swatches. |
| Product bundle | Shows bundle or upgrade products selected manually or through metafields. |
| Complementary products | Shows Shopify complementary product recommendations. |
For Complementary products, configure the recommendations in Shopify using the Search & Discovery app.
For Product bundle and Product variations, make sure the related products or metafields are configured correctly before using the blocks.
Use the Read more block
The Read more block is specific to the Featured product section.
When added, it can provide a link from the Featured product section to the full product page, allowing customers to learn more before purchasing.
Use this block when the Featured product section only shows a short version of the product content and you want to direct customers to the product page for more details.
Use the Spinning text block
The Spinning text block adds decorative spinning text near the featured product layout.
Use the Text setting to enter the message you want to display.
This block is best used as a visual accent for promotional sections, featured launches, or highlighted product areas.
Adjust section spacing and layout style
Use the section-level layout settings to match the featured product area with the rest of your page.
| Setting | Description |
|---|---|
| Top padding | Adds spacing above the section. |
| Bottom padding | Adds spacing below the section. |
| Show divider | Adds a divider line around the section. |
| Make section full width | Expands the section to the full browser width. |
| Make section rounded | Applies rounded styling to the section container. |
| Enable sticky product information | Keeps the product information sticky on desktop while scrolling through product media. |
Troubleshooting
If the Featured product section does not display correctly, check the following:
- Make sure a product is selected in the section settings.
- Make sure the selected product is active and available on the Online Store sales channel.
- Make sure the required product information blocks are added.
- If variants are missing, check the product variant setup in Shopify admin.
- If swatches are not showing, check the Variant picker block and color swatch settings.
- If the Add to cart button is missing, make sure the Buy buttons block is added.
- If complementary products do not appear, configure them in Shopify Search & Discovery.
- If product bundle products do not appear, check the Product bundle block settings or metafield values.
- If images do not match the selected variant, check the product media and variant media assignment.
- Save the theme editor changes and refresh the storefront.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up Gift Wrapping in Concept version 5.0.0 and later
How to setup color swatches?