Appearance

Feature product main ​

This guide describes setting up a Feature product main section. Use the section to set how a featured product is displayed on your store's Product - Horizontal gallery page. On Product - Horizontal gallery pages, for products with multiple product images, product images are displayed side-by-side within a navigable gallery.

The following video shows a feature product main section on a store's Product - Horizontal gallery page. In the video, the product image height setting is changed from 65% to 50% for desktop displays.

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

Set up a feature product main section ​

To set up a feature product main section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select Products > Horizontal gallery.

    Note

    The feature product main section is available only on Product - Horizontal gallery pages.

    To add Content sections into the current page, select Add section, from the side menu, and then choose a section to add. Refer to Shopify help: Add a section.

  2. From the side menu, select Feature product main.

    The feature product main section selected in Theme editor.

  3. Select a section setting described in the following table.

    To configure a block inside the section, refer to Configure a block within a feature product main section.

Section setting nameDescription
Images > Desktop image heightAdjust the slider Desktop image height to set a height for product images inside the section. The setting applies to desktop displays. The minimum slider value is 50% and the maximum is 100%.
Variant image change behaviorFor products with multiple product variants and images, use the dropdown Variant image change behavior to set how images behave inside the section when a product variant is selected. When a variant is selected:
  • to replace the current image with the variant's image, choose Swap with first image.
  • to move from the current image to the variant's image, choose Scroll to image.
App blocks > App block areaUse the dropdown App block area to set where app blocks are displayed inside the section. Refer to Shopify help: App blocks. Use the dropdown to display app blocks in the:
  • social media area (Social)
  • the product description area (Description)
  • the area with selectable elements that the customer submits (Product form), like the quantity selector, add to cart and buy buttons.
Media > Enable image zoomSelect the checkbox Enable image zoom to show/ hide a panel that contains product images. The panel opens when a product's image is selected inside the section. The panel provides zoom in/out for images, arrow icons for navigating between images, and an X icon to close the panel.
Media > Enable video loopingSelect the checkbox Enable video looping to turn on/ off continuous replay for videos inside the section. If this setting is set to off, the video plays once. Refer to Shopify help: Product media.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.

Configure a block within a feature product main section ​

A default feature product main section contains six product blocks. To configure a block within a feature product main section:

  1. In Customize theme, at the top of the page, use the dropdown to select Products > Horizontal gallery.

  2. From the side menu, expand the Feature product main section menu.

  3. In the expanded Feature product main menu, select a block to configure.

    To add a block, select Add block, choose a block to add, and then select the block you added.

    The block options for the feature product main section in theme editor

    Note

    Inside a feature product main section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.

  4. Apply the corresponding block settings described in the Table: Feature product main blocks.

Table: Feature product main blocks ​

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

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

Block nameBlock descriptionBlock setting(s)
Title*Displays a product's title, inside the section.No customizable settings available.
Price*Displays a product's price, inside the section.No customizable settings available.
Variant picker*Displays a variant picker for choosing variations of a product, inside the section.
  • Select the Options style dropdown to set a style for the product variant selector, inside the 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 section.
Quantity selector*Displays a quantity selector, inside the section, for choosing the number of products to purchase.No customizable settings available.
Buy buttons*Displays the Add to cart and Buy it now buttons, inside the section.
Description*Displays a text area to contain additional product information, inside the section.
  • Select the checkbox Enable collapsible tabs to show/ hide tabs, inside the 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 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.
Icon list*Displays a list of items with icons, inside the section.
  • Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.

  • Use the Heading box to enter title text for the icon list block, inside the 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 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 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 section. There are 26 icons, including: Box, Check mark, Map pin, Price tag, and Star. For no icon, select None (default).
Share buttons*Displays an area with buttons for sharing links to your store's products via social media.Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.
VendorDisplays the name of a product's vendor, inside the section.No customizable settings available.
TextDisplays a text area to contain additional product information, inside the section.
  • Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.

  • Use the Text box to enter additional text to display inside the 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 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 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 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 section.
  • Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.

  • Use the Text box to enter additional text to display inside the 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 section.
  • Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.

  • Use the Heading box to enter title text for the collapsible tab block, inside the 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 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 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 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 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 section.
  • Select the Section area dropdown to set where the block is displayed inside the section. The options are the Product form, Description, and Extra information areas.

  • Select the Icon dropdown to choose a graphical icon to display beside the text, in the pop-up link text block, inside the 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 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 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 section. The options are Text and Secondary.