Featured product

Section overview

The Featured Product section allows you to showcase a selected product with full details and functionality on any page, similar to the product page experience.

Common use cases

• Highlighting a flagship product on the homepage

• Creating dedicated landing pages for special promotions

• Showcasing seasonal or limited-edition products

• Building category pages with featured items

Usage tips

• Select a product that represents your brand well as this section provides a comprehensive product view

• Customize the section's layout and positioning to match your store's design

• For best visibility, position this section prominently on pages where conversion is important

• On mobile, consider your media gallery position and mobile column layout settings for optimal viewing

• Ensure all essential product information is visible without requiring excessive scrolling

Section settings

Setting	Description
Product	Select the product to feature in this section
Enable default variant	Select first available variant automatically when customer loads the page
Enable default plans	Select first available selling plan automatically when customer loads the page
Enable default selling plan widget	Use the default Shopify selling plan selection interface
Media gallery style	Choose between grid, slider, or slider with thumbnails for product images
Media gallery position	Position the media gallery at the top, right, bottom, or left of the content
Media slider size desktop	Control the size of the slider on desktop devices (percentage)
Media slider size mobile	Control the size of the slider on mobile devices (percentage)
Media grid size	Set number of images to display in grid view before pagination
Indicator type	Choose the style of slider indicators (none, full, or standard)
Enable arrows	Show navigation arrows on the product gallery slider
Show alt text	Display alt text on product images when available
Show variant images	Show variant-specific images when variant is selected
Enable header overlap	Allow this section to overlap with the header
Enable zoom	Allow customers to zoom in on product images
Zoom level	Control how much customers can zoom into product images
Media color scheme	Choose the color scheme for product media
Media border	Select border styling for product media
Media ratio	Choose the aspect ratio for product images (portrait or square)
Media object sizing	Choose how images fill their container (fit or fill)
Use ratio	Force all images to maintain the same aspect ratio
Top spacing	Control the space above the section (in pixels)
Bottom spacing	Control the space below the section (in pixels)
Color scheme	Select the section's background color scheme
Custom color	Choose a custom background color (when custom scheme is selected)
Enable color fade	Enable page background color transition effect when scrolling
Mobile column layout	Choose whether left or right column appears first on mobile
Column width	Control the width ratio between left and right columns
Enable media margin	Apply horizontal margin to media gallery
Enable main margin	Apply horizontal margin to main content

Block settings

Linked products

Displays related or complementary products.

• Block limit: None

Setting	Description
Title	Add a title for the linked products section
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Custom

Adds a custom input field for special product options or requests.

• Block limit: None

Setting	Description
Label	Text label for the custom field
Required field	Make this field required for form submission
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Breadcrumb

Displays breadcrumb navigation to help customers understand their location.

• Block limit: 1

Setting	Description
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Title

Shows the product title with additional details.

• Block limit: 1

Setting	Description
Content	Additional content to display with the title
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column
Savings badge	Show savings amount as percentage, amount, or not at all
Show product badges	Display product badges (such as "Sale" or "New")
Show product type	Display the product type
Show product vendor	Display the product vendor/brand
Show product SKU	Display the product SKU

Price

Displays the product price and any discounts.

• Block limit: 1

Setting	Description
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Font family	Select the font family for the price display
Position	Place this block in the left or right column

Text

Adds custom text to highlight product features or information.

• Block limit: 10

Setting	Description
Content	Custom text content to display
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column
X alignment	Align text left, center, justify, or right

Description

Shows the product description.

• Block limit: 1

Setting	Description
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column
X alignment	Align text left, center, justify, or right
Show accordion	Display description in a collapsible accordion
Use open accordion	Expand accordion by default

Accordion

Creates collapsible content sections for organizing product information.

• Block limit: 10

Setting	Description
Title	Title for the accordion section
Content	Content to display when accordion is expanded
Icon	Optional icon to display beside the accordion title
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column
Use open accordion	Expand accordion by default

Inventory

Displays product inventory level or availability status.

• Block limit: 1

Setting	Description
Inventory threshold	Set the inventory level below which to show low inventory messaging
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Pickup

Shows local pickup availability information.

• Block limit: 1

Setting	Description
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Options

Displays product variants and selling plan options.

• Block limit: 1

Setting	Description
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column

Add

Creates an add-to-cart button with optional supporting content.

• Block limit: 1

Setting	Description
Content	Optional text to display below the add-to-cart button
Top spacing	Control the space above the block (in pixels)
Bottom spacing	Control the space below the block (in pixels)
Color scheme	Select the color scheme for this block
Border color	Select the color for block borders
Border position	Choose where borders appear (none, top, bottom, or both)
Position	Place this block in the left or right column
Enable quantity	Allow customers to select quantity before adding to cart
Enable dynamic checkout	Show dynamic checkout buttons for direct checkout
Enable gift card recipient	Allow customers to add gift card recipient info