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

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