# Featured product

This guide describes setting your store’s Featured product section to display a product on a store page.

The following video shows a featured product section on a store’s homepage. In the video, the Variant picker block is repositioned above the Price block, inside the featured product section.

For general guidance with modifying sections, refer to Sections overview.

To set up a featured product section on a store page:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the featured product section. For example, select the Home page template.

    Note

    The featured product section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section (opens new window).

  2. Select Add section > Featured product.

    To configure a block, refer to Configure a block within a featured product section.

    The add featured product section option in theme editor
  3. From the side menu, select Featured product.

  4. Select a setting described in the following table.

Section setting name Description
Featured product > Product Use the Product menu options to set up a product in the featured product section. Refer to Set up a product in the featured product section.
Desktop image width Select the dropdown Desktop image width to set a width for the image in the featured product section. This setting applies to desktop displays, and the dropdown options are: One third, One half, Three fifths, and Two thirds. The image and text tiles are resized accordingly.
Desktop image position Select the dropdown Desktop image position to position the image to the Left or Right, inside the featured product section. This setting applies to desktop displays.
Desktop content position Select the dropdown Desktop content position to set a position for content inside the featured product section. This setting applies to desktop displays, and the dropdown options are Top, Middle and Bottom.
Color scheme Use the Color scheme dropdown to set the color scheme for the featured product section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Media > Enable video looping Select the checkbox Enable video looping to turn on/ off continuous replay for videos inside the featured product section. If this setting is set to off, the video plays once. Refer to Shopify help: Product media (opens new window).
Theme settings Select Theme settings to access additional settings. Refer to Section theme settings menu.
Remove section Select Remove section to remove the featured product section from the current page template.

Set up a product in the featured product section by applying settings in Featured product > Product to:

To add a product into the featured product section:

  1. In Featured product > Product, choose Select product, and then select one of the following options.

  2. Select the product from the list of products, and then choose Select.

To modify a product inside the featured product section:

  1. Choose a task described in the following table, and then apply the corresponding settings in Featured product > Product.
Task description Setting
Edit a product’s details Follow the Edit product link. The link opens the product editor on your store’s admin page. Use the editor to modify the product’s details. Refer to Shopify help: Product details (opens new window).
Change to another product Select the Change dropdown, choose Change product, and then select one of the following options. Select the required product from the list of products, and then choose Select.
Remove a product from the section Select the Change dropdown, and then choose Remove product.
The modify product options for the featured product section in theme editor

To configure a block within a featured product section:

  1. In Customize theme, select a template that contains a featured product section.

  2. From the side menu, select Featured product.

  3. From the Featured product side menu, select a block, and then apply the corresponding settings described in the Table: Featured product blocks.

    • To add a block into the featured product section, from the Featured product side menu, select Add block, and then choose a block to add.

      The add block options for the featured product section in theme editor

    Note

    Inside a featured product section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks (opens new window).

The following table describes the blocks inside the featured product section, and their corresponding settings.

Some blocks have No customizable settings available, and the blocks indicated with an asterisk * are contained in a default featured product section. To configure a block, refer to Configure a block within a featured product section.

Block name Block description Block setting(s)
Title* Displays a product’s title, inside the featured product section. No customizable settings available.
Price* Displays a product’s price, inside the featured product section. No customizable settings available.
Variant picker* Displays a variant picker for choosing variations of a product, inside the featured product section.
  • Select the Options style dropdown to set a style for the product variant selector, inside the featured product section. The options are Text with underline, Radio, Button, and Dropdown.

  • Select the Hide option labels checkbox to show/ hide the name of the currently selected product variant, inside the featured product section.
Buy buttons* Displays the Add to cart and Buy it now buttons, inside the featured product section.
Quantity selector Displays a quantity selector, inside the featured product section, for choosing the number of products to purchase. No customizable settings available.
Vendor Displays the name of a product’s vendor, inside the featured product section. No customizable settings available.
Description Displays a text area to contain additional product information, inside the featured product section.
  • Select the checkbox Enable collapsible tabs to show/ hide tabs, inside the featured product section, for accessing expanded text areas that contain additional product information. Refer to Create collapsible tabs.

  • Select the Truncate description checkbox to show/ hide a Read more button, inside the featured product section, for accessing an expanded text area that contains additional product information. Enable this setting for products with variant images and longer descriptions. To enable this setting, set collapsible tabs to off.
Text Displays a text area to contain additional product information, inside the featured product section.
  • Use the Text box to enter additional text to display inside the featured product section. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).

  • Select the Font dropdown to set additional text, inside the featured product section, to use the same font as Heading or Body text.

  • Select the Text size dropdown to set a size for the additional text, inside the featured product section. The options are: S = small, M = medium, M/ desktop L = medium on smaller displays and large on desktop displays, M/ desktop XL = medium on smaller displays and extra large on desktop displays, and M/ desktop 2XL = medium on smaller displays and extra large x 2 on desktop displays.

  • Select the Icon dropdown to choose a graphical icon to display beside the additional text, inside the featured product section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Rich text Displays a formatted text area to contain additional product information, inside the featured product section.
  • Use the Text box to enter additional text to display inside the featured product section. Format the text using the text editor pane. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).
Collapsible tab Displays a text area with expandable tabs, to contain additional product information, inside the featured product section.
  • Use the Heading box to enter title text for the collapsible tab block, inside the featured product section. Refer to Create collapsible tabs. To display a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).

  • Select the dropdown Heading text style to set a text style for titles in the collapsible tab block, inside the featured product section. Set titles to use the same font as Heading or Body text.

  • Use the Tab content box to enter additional text to display in the collapsible tab block, inside the featured product section. Format the text using the text editor pane. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Tab content box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).

  • Use the selector Tab content from page > Select page to add content from another store page into the collapsible tab block, inside the featured product section. To display content from a dynamic source, select the Connect dynamic source icon, beside the selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields (opens new window).

  • Select the Icon dropdown to choose a graphical icon to display beside the collapsible tab’s title text, inside the featured product section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Icon list Displays a list of items with icons, inside the featured product section.
  • Use the Heading box to enter title text for the icon list block, inside the featured product section. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).

  • Select the Text color dropdown to set a color for text in the icon list block, inside the featured product section, to Text or Secondary.

  • For list items 1 to 5, use the Item # > Text box to enter text to display beside the item, in the icon list block, inside the featured product section. To display content from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window).

  • For list items 1 to 5, select the dropdown Item # > Icon to choose a graphical icon to display beside the item’s text, in the icon list block, inside the featured product section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Pop-up Displays a pop-up overlay to contain additional product information, inside the featured product section.
  • Select the Icon dropdown to choose a graphical icon to display beside the text, in the pop-up link text block, inside the featured product section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).

  • Use the Link label box to enter label text for the link in the pop-up link text block, inside the featured product section. When the link is selected, a pop-up overlay is displayed. To use text from a dynamic text field, like product Title or Vendor, select the Insert dynamic source icon, beside the Link label box, and then choose a metafield to add. Refer to Shopify help: Metafields (opens new window)

  • Use the selector Page > Select page to add content from another store page into the pop-up block, inside the featured product section. To display content from a dynamic source, select the Connect dynamic source icon, beside the Page selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields (opens new window).

  • Select the Text color dropdown to set a color for text in the pop-up block, inside the featured product section. The options are Text and Secondary.