Skip to content
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 |