The Featured product section allows you to highlight one specific product on any supported template, such as the homepage, landing pages, or custom pages.
It works like a compact product page section. You can show product media, product title, price, description, variants, quantity selector, buy buttons, product bundles, complementary products, custom text, and other product information blocks in one dedicated section.
Overview
Use the Featured product section when you want to promote a specific product without sending customers to the full product page immediately.
This section is useful for:
- Highlighting a best-selling product on the homepage
- Promoting a new arrival on a landing page
- Creating a product-focused campaign section
- Allowing customers to choose variants and add the product to cart directly from the page
- Showing a product preview with a Read more link to the full product page
How to Set Up the Featured Product Section in Concept
STEPS:
Step 1: Add the Featured Product Section
From your Shopify admin, open the theme editor and add the section to the page where you want it to appear.
- Go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the template where you want to display the featured product.
- Click Add section.
- Select Featured product.
- In the section settings, use the Product setting to select the product you want to feature.
- Click Save.
After selecting a product, the section will display that product’s media and product information based on the section settings and blocks you add.
Step 2: Configure the Section Settings
The section settings control the selected product, product media layout, mobile layout, and section spacing.
Product setting
| Setting | Description |
|---|---|
| Product | Selects the product displayed in this section. |
If no product is selected, the section will not display real product information.
Layout settings
| Setting | Description |
|---|---|
| Enable sticky content on desktop | Keeps the product media or product information sticky while scrolling on desktop. |
| Desktop media width | Controls how much horizontal space the product media uses on desktop. |
| Desktop layout | Controls the product media gallery layout. Options include Free scroll, 2 columns, and Thumbnails. |
| Thumbnail position | When the desktop layout is Thumbnails, thumbnails can appear next to or below the main media. |
| Image ratio | Controls the desktop image ratio when using the thumbnail layout. |
| Image zoom | Controls whether customers can open the image lightbox, use click-and-hover zoom, or disable zoom. |
| Hide other variants’ 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. Videos are muted automatically to allow autoplay. |
| Enable video looping | Loops product videos when they play. |
Mobile settings
| Setting | Description |
|---|---|
| Mobile layout | Controls the product media layout on mobile. |
| Mobile image ratio | Controls the product media ratio on mobile. |
| Show thumbnails on mobile | Shows product media thumbnails on mobile devices. |
Section style settings
| Setting | Description |
|---|---|
| Top padding | Adds spacing above the section. |
| Bottom padding | Adds spacing below the section. |
| Show section divider | Adds a divider line to separate the section from nearby sections. |
| Make section full width | Expands the section to the full page width. |
| Make section rounded | Applies the rounded section style. |
Step 3: Add Product Information Blocks
The Featured product section supports many of the same blocks as the main product page. These blocks control which product information appears next to the product media.
You can add, remove, and reorder blocks from the section sidebar in the theme editor.
Common blocks
| Block | Purpose |
|---|---|
| Title | Displays the product title. This block can also show the product price and rating if separate Price or Rating blocks are not added. |
| Price | Displays the product price, compare-at price, payment terms, and optional tax notice. |
| Description | Displays the product description. |
| Text | Adds custom text with an optional icon or custom icon image. If the text matches the product vendor, it can display as a vendor link. |
| SKU | Displays the selected variant SKU. |
| Badges | Displays product badges, such as sale or sold out badges. |
| Rating | Displays product rating information when a product rating app provides rating data. |
| Share | Displays a share link and can also show a help desk link. |
| Help desk | Displays a separate help link, such as a size guide, contact page, or FAQ page. |
| Custom Liquid | Adds custom Liquid or app snippets. |
| App block | Allows compatible Shopify app blocks to be added. |
Product purchase blocks
| Block | Purpose |
|---|---|
| Variant picker | Lets customers select product options such as color, size, or style. |
| Product variations | Links separate products together as product variation swatches. |
| Quantity selector | Lets customers choose the quantity before adding to cart. |
| Buy buttons | Displays the Add to cart button and optional dynamic checkout buttons. |
| Pickup availability | Shows local pickup availability when pickup is configured in Shopify. |
| Inventory status | Displays stock status and optional inventory quantity. |
| Volume pricing | Displays volume pricing information when the selected product has quantity price breaks. |
Promotional and advanced blocks
| Block | Purpose |
|---|---|
| Collapsible row | Adds expandable content such as shipping information, return policy, or product details. |
| Countdown | Displays a countdown timer when the selected product has the required countdown metafield value. |
| Back in stock | Displays a back-in-stock form when the selected variant is sold out. |
| Product bundle | Shows related products or upgrades that can be added together with the featured product. |
| Complementary products | Shows complementary products configured through Shopify Search & Discovery. |
| Icon list | Displays product highlights from the configured product highlight metafield. You can see how to set up the block Icon list here |
| Line item property | Adds custom input fields to collect extra information before adding the product to cart. |
| Read more | Adds a link to the full product page. |
| Spinning text | Adds decorative spinning text to the product media area. |
Step 4: Configure the Product Media Gallery
The media gallery uses the selected product’s images, videos, 3D models, and variant media.
Recommended setup
| Use case | Recommended setting |
|---|---|
| Clean product showcase | Use Thumbnails layout with thumbnails next to the main media. |
| Editorial or large visual layout | Use 2 columns or Free scroll. |
| Products with many images | Enable thumbnails for easier navigation. |
| Products with videos | Enable video autoplay and video looping if you want videos to play automatically. |
| Products with variant-specific images | Enable Hide other variants’ media after selecting a variant. |
Notes about product media
- The section uses the media from the selected product.
- If the selected product has variant images, the gallery can update when customers select a different variant.
- If the product contains a 3D model, the theme loads the required model viewer styles automatically.
- Product videos can autoplay only when they are muted, which the theme handles automatically.
Step 5: Configure Variants, Swatches, and Product Variations
The Variant picker block allows customers to select product options directly inside the Featured product section.
Variant picker settings
| Setting | Description |
|---|---|
| Enable dynamic product options | Updates available option values based on the current selection. |
| Show variant labels | Displays the option names above the variant picker. |
| Variant picker type | Choose Dropdown or Button. |
| Enable color swatches | Displays color options as swatches when the picker type is Button. |
| Swatch type | Choose Color swatch or Variant image. |
| Size chart page | Connects a page to show as the size chart link for products with a Size option. |
Product variations block
The Product variations block is used when each option needs a separate Shopify product page, but you still want to link those products together with swatches.
| Setting | Description |
|---|---|
| Option name | The label shown above the product variation swatches, such as Color or Style. |
| Option value metafield | The product metafield namespace and key used to store the display value, such as custom.color. |
| Products | Select all variation products, including the current product. |
| Enable color swatches | Displays product variation values as swatches. |
| Swatch type | Choose Color swatch or Product image. |
| Size chart page | Adds a size chart link when needed. |
For the Product variations block, the selected product list should include the product currently being viewed. If the current product is not included in the list, the variation swatches may not display as expected.
Step 6: Configure Buy Buttons and Add-to-Cart Options
The Buy buttons block controls the purchase area inside the Featured product section.
| Setting | Description |
|---|---|
| Show quantity selector | Displays a quantity selector inside the buy button area. |
| Show product price | Displays the product price inside the buy button area. |
| Show dynamic checkout buttons | Shows dynamic checkout buttons such as PayPal, Apple Pay, or other available accelerated payment methods. |
| Show recipient information form for gift cards | Shows recipient fields when the featured product is a gift card. |
| Enable back in stock | Allows back-in-stock behavior from the buy button block when configured. |
| Show name | Shows a name field in the back-in-stock form. |
| Show phone | Shows a phone field in the back-in-stock form. |
Notes
- Dynamic checkout buttons depend on the payment methods available in the store.
- Gift card recipient fields only apply to gift card products.
- The add-to-cart button follows the availability of the selected variant.
- If the selected variant is sold out, the buy button can become unavailable depending on product inventory settings.
Step 7: Use the Read More and Spinning Text Blocks
The Featured product section includes two blocks that are specific to this section.
Read more block
The Read more block adds a link to the full product page.
This is useful when you want customers to preview the product in the Featured product section, then continue to the full product page for more details.
Spinning text block
The Spinning text block adds decorative text to the product media gallery area.
| Setting | Description |
|---|---|
| Text | The text displayed in the spinning text element. Default text is Featured product. |
This block is mainly decorative and works with the product media area.
Step 8: Preview and Test the Section
After setting up the section, open the storefront and test the featured product carefully.
Check the following items:
- The correct product is displayed.
- Product images, videos, and variant media display correctly.
- The product title, price, and description are correct.
- Variant selection updates the selected variant properly.
- Add to cart works correctly.
- Dynamic checkout buttons appear only when expected.
- Product variation swatches link to the correct products.
- Product bundle and complementary products display correctly if used.
- The Read more link opens the full product page.
- The layout looks good on both desktop and mobile.
Notes and Limitations
Please note the following behavior:
- The Featured product section displays one selected product.
- It does not create a duplicate product page. It reuses the product data from Shopify.
- Changes made to the product in Shopify admin will automatically reflect in the section.
- The section can show product options and buy buttons, so customers can add the product to cart directly from the page.
- Some blocks only appear when the product has the required data or setup.
- Pickup availability requires pickup locations to be configured in Shopify.
- Complementary products require setup through Shopify Search & Discovery.
- Countdown requires the product countdown metafield to be filled with a future date and time.
- Icon list requires the theme’s product icon list metafield setting and product metafield values to be configured.
- Product variations require related products and metafield values to be configured correctly.
- Read more always links to the selected product’s full product page.
Troubleshooting
The Featured product section is empty
Check that a product has been selected in the Product setting.
Also make sure the selected product is active and available on the current sales channel.
The wrong product is showing
Open the section settings and confirm that the correct product is selected.
Product media does not update when selecting variants
Make sure each variant has the correct variant image or media assigned in Shopify admin.
If you want to show only media related to the selected variant, enable Hide other variants’ media after selecting a variant.
Color swatches do not display correctly
Make sure the Variant picker type is set to Button and Enable color swatches is turned on.
Also check your color swatch setup in the theme settings and make sure the product option name matches the color swatch trigger.
The Add to cart button is disabled
Check the selected variant’s inventory and availability.
If the variant is sold out and the product does not allow overselling, the add-to-cart button will not be available.
Pickup availability does not appear
Make sure local pickup is configured in Shopify and the selected product is stocked at a pickup location.
Complementary products do not appear
Configure complementary products in the Shopify Search & Discovery app.
Also make sure the Complementary products block is added to the section.
Product bundle does not appear
Make sure products are selected in the Product bundle block, or that the metafield entered in the block contains valid product or variant references.
Countdown timer does not appear
Make sure the product has a valid countdown metafield value and that the date/time is in the future.
Developer Reference
The Featured product section is handled by:
sections/featured-product.liquid
Important related snippets include:
snippets/product-media-gallery.liquid
snippets/product-variant-picker.liquid
snippets/product-variants.liquid
snippets/buy-buttons.liquid
snippets/product-price.liquid
snippets/product-badges.liquid
snippets/product-inventory.liquid
snippets/product-bundle.liquid
snippets/product-complementary.liquid
The section uses the selected product from this setting:
section.settings.product
The product form ID is generated from the section ID and product ID, allowing the featured product form to work independently from other product forms on the same page.
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.
Share:
How to Set Up Gift Wrapping in Concept version 5.0.0 and later