Appearance

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.

  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 nameDescription
Featured product > ProductUse 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 widthSelect 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 positionSelect 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 positionSelect 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 schemeUse 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 loopingSelect 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.
Theme settingsSelect Theme settings to access additional settings. Refer to Section theme settings menu.
Remove sectionSelect 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.

    • To find a product, enter the name of the product in the Search box.

    • To create a product, follow the Create product link to open the Add product menu on your store's admin page. Use the menu to add the product's details. Refer to Shopify help: Adding and updating products.

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

  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 descriptionSetting
Edit a product's detailsFollow 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.
Change to another productSelect the Change dropdown, choose Change product, and then select one of the following options.
  • To find a product, enter the name of the product in the Search box.
  • To create a product, follow the Create product link to open the Add product menu on your store's admin page. Use the menu to add the product's details. Refer to Shopify help: Adding and updating products.
Select the required product from the list of products, and then choose Select.
Remove a product from the sectionSelect 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.

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 nameBlock descriptionBlock 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.
  • Select the checkbox Show dynamic checkout button to show/ hide a button with the customer's preferred payment method, beside the Add to cart button, inside the featured product section. Refer to Shopify help: Dynamic checkout buttons.

  • Select the checkbox Show pickup availability to show/ hide indicators, inside the featured product section, for products that can be collected from customer "pick up" locations. Refer to Shopify help: Show pickup availability to your customers.
Quantity selectorDisplays a quantity selector, inside the featured product section, for choosing the number of products to purchase.No customizable settings available.
VendorDisplays the name of a product's vendor, inside the featured product section.No customizable settings available.
DescriptionDisplays 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.
TextDisplays 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.

  • 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 textDisplays 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.
Collapsible tabDisplays 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.

  • 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.

  • 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.

  • 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 listDisplays 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.

  • 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.

  • 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-upDisplays 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

  • 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.

  • 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.