Shine Featured product

Theme: Shine · Section type: All-template section

The Featured product section shows one product with its media, price, variant selector, and buy buttons on any page. Use it to promote a best seller or a new launch, so customers can buy without opening the product page.

Note: You can add Featured product to any template. It isn't available in the header or footer.

Featured product section on a Shine homepage

What you can do

Add the section and choose a product
Add and arrange product blocks
Show stock status and badges
Send customers to the full product page
See what customers see
Look up every section and block setting in "Settings reference"
Fix common problems

Add the section and choose a product

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Featured product. The section comes with a Title, Price, Variant selector, Buy buttons, and Share block.
Under General, select a Product.
Optional: enter a Section subheading, a Section heading, and a Section description.
Click Save.

Tip: To highlight part of the heading, put it between [ and ]. You choose the highlight style in Theme settings > Typography.

Add and arrange product blocks

Click the Featured product section.
Click Add block and select a block.
Drag blocks to change their order in the product information column.
Click Save.

You can add each of these blocks once: Title, Vendor, Product code, Price, Variant selector, Buy buttons, Description, Pickup availability, Countdown timer, Share, and View details button. You can add Icon with text, Collapsible item, Popup content, Custom text, and Custom liquid as many times as you need. You can also add app blocks.

Tip: Keep the section short. Add only the blocks customers need to decide, and use a View details button for everything else.

Show stock status and badges

Click the Variant selector block.
Under Stock number, select Show inventory status. Optional: select Show stock number to show how many items are left.
Click the Price block.
Choose a Text size. Under Stock badge, choose which badges to show: Show Sold out badge, Show Sale badge, and Show New in badge.
Click Save.

Note: You set the low stock threshold and how long a product counts as new in Theme settings > Product information.

Send customers to the full product page

Click Add block > View details button.
Choose a Style: Filled, Outlined, or Text link.
Drag the block below Buy buttons.
Click Save.

The button reads "View details" and opens the product page.

What customers see

Media: customers click a thumbnail or use the arrows to change images. On large screens, thumbnails sit beside or below the main media.
Variants: when customers pick a variant, the media, price, badges, and stock status update. Sold-out options are crossed out, and the add to cart button shows Sold out.
Buy buttons: when Inline add to cart with quantity is on, the quantity selector and Add to cart sit on one row.
Phones: the media sits above the product information, and the heading uses the mobile alignment.

A sold-out variant selected in the Featured product section: the image, Sold out badge, and button update

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the section. You edit color schemes in Theme settings > Colors.
Section subheading	Small text above the heading.
Section heading	The heading above the product. Put words between [ and ] to highlight them.
Heading size	Sets the heading size: H2, H3, H4, or H5.
Section description	Text under the heading.
Product	The product to show.

Media

Setting	What it does
Media ratio	Sets the shape of the main media: Square, Portrait, Landscape, or Adapt to image.
Thumbnails ratio	Sets the shape of the thumbnails: Square, Portrait, or Landscape. Each shape is listed twice, once to fill the thumbnail (crop) and once to fit the whole image inside it.
Thumbnails position on large screen	Places the thumbnails Beside main media or Below main media.
Enable sticky media when scrolling	Keeps the media in view while customers scroll through the product information.

Large screen, Mobile screen

Setting	What it does
Section heading alignment	Aligns the heading, subheading, and description Left or Center. Large screen and Mobile screen have separate settings.

Custom color

Setting	What it does
Media background	Sets the color behind media with a transparent background.

Title block

Setting	What it does
Heading size	Sets the product title size: Headline, H1, H2, H3, H4, H5, or H6.

Vendor block

This block has no settings. It shows the product vendor.

Product code block

Setting	What it does
Show SKU	Shows the SKU of the selected variant.
Show barcode	Shows the barcode of the selected variant.

Price block

Setting	What it does
Show tax and shipping policy	Shows the tax and shipping note under the price.
Text size	Sets the price size: Default, Medium, Large, or Extra large.
Enable item background	Adds a background behind the price.
Background	Sets the background color.
Content	Sets the price text color.
Show Sold out badge	Shows a Sold out badge when the selected variant is out of stock.
Show Sale badge	Shows a Sale badge as Text only or Text + Sale amount, or Never.
Show New in badge	Shows a New in badge on new products.

Variant selector block

Setting	What it does
Show inventory status	Shows whether the selected variant is in stock.
Show stock number	Shows how many items are left next to the stock status. Appears when Show inventory status is on.
Selector style	Shows options as Block buttons or a Dropdown.
Show variant swatches	Shows swatches for the option set in Theme settings > Product information > Variant swatches.
Variant swatches size	Sets the swatch size: Small, Regular, or Large.
Enable size guide	Adds a size guide link next to the Size option.
Label	The text of the size guide link, for example Size chart.
Content	The page that opens in the size guide popup.

Buy buttons block

Setting	What it does
Show quantity selector	Shows the quantity selector. It's hidden automatically when all variants are sold out.
Inline add to cart with quantity	Places the Add to cart button on the same row as the quantity selector. Appears when Show quantity selector is on.
Show dynamic checkout buttons	Shows express checkout buttons, such as PayPal or Apple Pay, based on your payment settings.
Show recipient information form for gift card products	Lets customers send a gift card to someone else with a personal message.
Show payment method	Shows the icons of your store's payment methods.
Heading	The text above the payment icons.

Description block

Setting	What it does
Show Icon	Shows an icon next to the heading.
Icon source	Uses an icon from the Theme library, an Image, or Custom SVG code.
Theme library	The theme icon to show.
Image	A custom icon image. Use a square image.
Custom SVG	SVG code for a custom icon.
Custom icon color	Sets the icon color.
Heading	The description heading.
Display type	Shows the description as Plain text or in a Collapsible item.
Expand item by default	Opens the description when the page loads. Applies only with Collapsible.

Icon with text block

Setting	What it does
Enable item background	Adds a background behind the item.
Background	Sets the background color.
Content	Sets the text and icon color.
Icon source	Uses an icon from the Theme library, an Image, or Custom SVG code.
Icon size	Sets the icon size: 32px, 48px, or 64px.
Theme library	The theme icon to show.
Image	A custom icon image. Use a square image.
Custom SVG	SVG code for a custom icon, shown at the selected icon size.
Heading	The item heading.
Description	The item text.
Enable full container width (Large screen and Mobile screen)	Makes the item full width. Leave it off on 2 blocks in a row to show 2 items side by side.

Collapsible item block

Setting	What it does
Show Icon	Shows an icon next to the heading.
Icon source	Uses an icon from the Theme library, an Image, or Custom SVG code.
Theme library	The theme icon to show.
Image	A custom icon image. Use a square image.
Custom SVG	SVG code for a custom icon.
Custom icon color	Sets the icon color.
Expand item by default	Opens the item when the page loads.
Heading	The item heading.
Description	The content shown when the item is open.

Pickup availability block

Setting	What it does
Show expected pickup time	Shows when the order is usually ready for pickup.
Enable item background	Adds a background behind the block.
Background	Sets the background color.
Content	Sets the text color.

Setting	What it does
Text	The link text, for example Shipping and returns.
Popup content	The page whose content opens in a popup.

Countdown timer block

Setting	What it does
Heading	The heading above the timer.
Heading size	Sets the heading size: H2, H3, H4, or H5. Appears when the heading isn't empty.
Subheading	The text under the heading.
Content alignment	Aligns the content Left or Center.
Hide the countdown when it ends	Hides the timer when it reaches zero.
End date	The end date as YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight.
End time (optional)	The end time as HH:MM, on a 24-hour clock.
End text	The text shown when the countdown ends. Leave it empty to show nothing.
Enable item background	Adds a background behind the numbers.
Countdown number size	Sets the number size: H2, H3, H4, or H5.
Countdown background	Sets the background color of the numbers. Appears when Enable item background is on.
Countdown number	Sets the color of the numbers.
End text (color)	Sets the color of the end text.

Custom text block

Setting	What it does
Text	The text to show.
Text (color)	Sets the text color. It's also used for links in the text.

Custom liquid block

Setting	What it does
Custom liquid	Adds app snippets or other Liquid code.

Setting	What it does
Social media icons style	Shows the share buttons as a Filled button or a Ghost button. On devices that support it, customers see their device's native share menu.

View details button block

Setting	What it does
Style	Shows the button as Filled, Outlined, or a Text link. See "Send customers to the full product page" above.

Troubleshooting

The section shows a placeholder instead of my product.
No product is selected. Click the section and select a Product under General.

The stock status shows a warning icon.
When the stock of the selected variant is at or below the Low stock threshold in Theme settings > Product information, the status shows a warning icon instead of a check mark. Raise or lower the threshold to change when the warning appears.

The quantity selector and Add to cart button are on separate rows.
Select Inline add to cart with quantity in the Buy buttons block. It appears only when Show quantity selector is on.

The size guide link is missing.
The link appears only next to an option named Size, and only after you select a page in Content.

In other themes: Blum Featured Product · Electro Featured Product · Normcore Featured Product

Updated on: 22/10/2026

Was this article helpful?

Thank you!