Featured product

Section overview

The Featured Product section allows you to showcase a selected product with its complete details, providing a full product page experience within any page of your store.

Common use cases

• Highlighting a best-selling product on your homepage

• Creating focused landing pages for special promotions or new releases

• Featuring seasonal products in content pages

• Building educational pages around flagship products

Usage tips

• Best practices

  • Select a product with high-quality images for the gallery to make the best visual impact

  • Use the flexible block system to prioritize the most important information for your specific product

  • Consider using the accordion block for detailed specifications to keep the interface clean

  • Place the most important content at the top of each column

• Common pitfalls to avoid

  • Adding too many blocks can overwhelm customers - focus on essential information

  • Not utilizing the media gallery settings appropriately for your product images

  • Forgetting to check how options and variants display on both desktop and mobile

  • Leaving default content placeholders in text blocks

• Mobile responsiveness considerations

  • The layout automatically shifts to a single column on mobile devices

  • Media gallery size can be separately configured for mobile and desktop

  • Consider the order of your blocks as this affects the vertical scrolling experience on mobile

  • Test the zoom functionality on mobile to ensure it provides a good customer experience

Section settings

Setting	Description
Product	Select the product to display in this section
Use default variant	When enabled, the first available variant will be preselected
Use default plans	When enabled, the first available subscription plan will be preselected
Use default selling plan widget	When enabled, uses the default Shopify selling plan widget instead of a custom implementation
Media gallery style	Choose between a simple slider or a slider with thumbnails
Desktop media size	Sets the width percentage of the media gallery on desktop devices
Mobile media size	Sets the width percentage of the media gallery on mobile devices
Image border	Sets the border style for product images
Gallery position	Position the gallery on the left or right side of the product details
Show alt text	Displays the image alt text below the gallery
Show variant images	Changes the gallery images when a variant with its own images is selected
Enable zoom	Allows customers to zoom in on product images
Zoom level	Sets the magnification level when zooming product images
Media color scheme	Sets the background color for the media gallery
Media border	Sets the border style for the media gallery container
Media ratio	Sets the aspect ratio for product images (portrait or square)
Media object sizing	Determines how images fill the container (fit or fill)
Use ratio	Forces images to maintain the selected aspect ratio
Top spacing	Sets the amount of space above the section
Bottom spacing	Sets the amount of space below the section
Color scheme	Sets the background color for the entire section
Column width	Sets the width percentage for the left column
Enable media margin	When enabled, adds margin around the media gallery
Enable main margin	When enabled, adds margin around the main section content

Block settings

Title

Displays the product title with optional additional content.

• Block limit: 1

• Settings:

  Setting	Description
  Content	Additional content to display alongside the title
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Savings badge	Shows savings as a percentage, amount, or hides it
  Show product badges	Displays product badges such as "Sale" or "Sold out"
  Show product type	Displays the product type alongside the title
  Show vendor	Displays the product vendor alongside the title
  Show SKU	Displays the product SKU alongside the title

Price

Displays the product price, including compare-at price and payment terms if available.

• Block limit: 1

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Description

Displays the product description, optionally as an accordion.

• Block limit: 1

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the color style for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Text alignment	Aligns text left, center, justified, or right
  Show as accordion	Displays the description in a collapsible accordion
  Default open	When using accordion mode, determines if it's open by default

Options

Displays product variant options, such as size, color, and material.

• Block limit: 1

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Add to cart

Adds the purchase button and quantity selector.

• Block limit: 1

• Settings:

  Setting	Description
  Optional text	Text to display below the add to cart button
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Enable dynamic checkout	Shows dynamic checkout button below add to cart

Text

Adds a custom text block with rich text formatting.

• Block limit: 10

• Settings:

  Setting	Description
  Content	Custom text content to display
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Text alignment	Aligns text left, center, justified, or right

Accordion

Adds a collapsible content section with a title and custom content.

• Block limit: 10

• Settings:

  Setting	Description
  Title	The heading for this accordion block
  Content	The content shown when the accordion is expanded
  Icon	Optional icon to display next to the title
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the color style for the accordion
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Default open	Determines if the accordion is open by default

Table

Displays product information in a structured table format.

• Block limit: 1

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)

Form

Adds a contact form for product inquiries.

• Block limit: 1

• Settings:

  Setting	Description
  Content	Content to display above the contact form
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Border color	Sets the color of the border for this block
  Button color	Sets the color style for the submit button
  Border position	Determines where borders appear (none, top, bottom, or both)

Linked products

Displays related or recommended products.

• Settings:

  Setting	Description
  Title	Heading for the linked products section
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Custom field

Adds a custom field input for product customization.

• Settings:

  Setting	Description
  Label	The label for the custom field input
  Required field	Makes this field required for form submission
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Breadcrumb

Displays breadcrumb navigation to show product location in your store.

• Block limit: 1

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Inventory

Shows product inventory information and stock level.

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Rating

Displays product ratings and reviews.

• Settings:

  Setting	Description
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Drawer

Adds a button that opens a popup drawer with additional content.

• Block limit: 10

• Settings:

  Setting	Description
  Linked option	Connect drawer to a specific product option
  Title	The label for the button that opens the drawer
  Page	Select a page whose content will appear in the drawer
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Liquid

Adds custom Liquid code for advanced customization.

• Settings:

  Setting	Description
  Liquid	Custom Liquid code to render within the block
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column

Upsell

Displays upsell product recommendations.

• Settings:

  Setting	Description
  Title	Heading for the upsell section
  Content	Custom content for the upsell section
  Top spacing	Sets the amount of space above this block
  Bottom spacing	Sets the amount of space below this block
  Color scheme	Sets the background color for this block
  Border color	Sets the color of the border for this block
  Border position	Determines where borders appear (none, top, bottom, or both)
  Position	Places this block in the left or right column
  Show as accordion	Displays the upsell in a collapsible accordion
  Default open	When using accordion mode, determines if it's open by default