Product - horizontal

This guide describes setting up the Product - horizontal section.

Use the section to set what's displayed on Product > Horizontal gallery pages.

​

​The previous image shows a Product - horizontal section on a store's Horizontal gallery product page. In the upper right, part of Theme editor's section menu is displayed. To specify a height for the section's media area on desktop display devices, the menu's Desktop height option is set to 50 % (percentage of the overall section height).

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a Product - horizontal section

To set up a Product - horizontal section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select Products > Horizontal gallery.

   Note

   The section is available only on Products > Horizontal gallery pages. To use the section, apply the Horizontal gallery template to a product. Refer to Shopify help: Apply a new template.

2. From the side menu, select Product - horizontal.

3. Select a setting described in the following table.

Setting name	Description
Product variants > Select the first available variant	Set the Select the first available variant option to on or off. With this option enabled, the first available product variant is selected automatically when customers view the product. With this option off, adding to the cart is not possible until each product option has a selection. With this option off and the Theme settings > Products > Availability display mode option set to Adjacent, sold-out styling is not applied until selections for all options have been made.
Product variants > Variant media change behavior	Use the Variant media change behavior option to select Swap with first media or Scroll to media. This option specifies a behavior for the section's media area. The behavior applies when a store visitor selects a product variant inside the section. With the Swap with first media option, the section's media area displays product media items for all variants - arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, the item displayed at the top of the column changes to match the newly selected variant. With the Scroll to media option, the section's media area displays product media items for all variants - arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, a scroll animation effect moves to display the first media item that's associated with the newly selected variant.
Product variants > Always show product featured media first	Set the Always show product featured media first option to on or off. When the Select the first available variant option is enabled, turning on the Always show product featured media first option keeps the product’s featured media displayed first in the media gallery.
Media > Desktop height	Adjust the Desktop height slider to set a height for the section's media area. The slider ranges from 50 % to 100 % (percentage of the overall section height). This setting applies to desktop display devices.
Media > Enable image zoom	Set the Enable image zoom option to on or off. With this option enabled, the section displays product images inside a panel that opens when a customer selects a product image. The panel provides zoom in and out options for images, arrow icons for navigating between images, and an X icon to close the panel.
Media > Enable video looping	Set the Enable video looping option to on or off. With this option on, product videos loop continuously for customers viewing the section's product media. With this option off, product videos play once. Refer to Shopify help: Product media.
Media > Enable video autoplay	Set the Enable video autoplay option to on or off. With this option enabled, product videos play automatically for customers viewing the section's product media, instead of requiring customers to start playback manually. Videos are muted during automatic playback. The setting does not apply to videos hosted on YouTube or Vimeo.
Mobile spacing > Space above description content	Adjust the Space above description content slider between 0.5x and 2x to set the amount of space that's displayed above the section's description content area. Note that this option does not apply if the preceding block has gridlines.
Mobile spacing > Space above extra information content	Adjust the Space above extra information content slider between 0.5x and 2x to set the amount of space that's displayed above the section's extra information area. Note that this option does not apply if the preceding block has gridlines.
App blocks > App block area	Use the App block area option to set app content to display in the section's Social, Description, or Product form area.
App blocks > Space above	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the section's app content area.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use this color scheme for header and footer	Select the Use this color scheme for header and footer option to turn "header and footer color" mode on or off. With this setting enabled, the color scheme you choose for the section is also applied to the product page’s header and footer. This option applies only to the product template.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.

Configure a block within a Product - horizontal section

A default Product - horizontal section contains eight Product blocks. To configure a block inside the section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select Products > Horizontal gallery.

2. From the side menu, expand the Product - horizontal section menu.

3. To configure an existing block, select the block from the side menu.

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

   Note

   Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

4. Apply a block setting described in the Table: Product - horizontal blocks.

Table: Product - horizontal blocks

The following table describes the blocks inside the Product - horizontal section, and their corresponding settings.

Some blocks have No customizable settings available. The blocks indicated with an asterisk * are contained in a default Product - horizontal section. To configure a block, refer to Configure a block within a Product - horizontal section.

Block name	Block description	Block setting(s)
Title *	Displays a product's title inside the section.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Price *	Displays a product's price inside the section.	Use the Font and text size option to apply the Body, Standard heading, Feature heading, or Secondary heading font and text size to the block's price text. Set the Show discount tag option to on or off. With this option enabled, a discount tag is displayed on products with a sale price. Use the Type option to display a Percentage or Fixed-amount inside discount tags. To use this setting, enable the Show discount tag option. Set the Use accent color option to on or off. With this option enabled, the accent color from the section's current color scheme is applied to discount tag text. To use this option, enable the Show discount tag option. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Variant picker *	Displays product options or a "variant" picker for choosing variations of a product, inside the section.	Use the Options style setting to apply a Button, Text with underline, Radio, or Drop-down style to the product options picker inside the block. Use the Full width buttons option to turn "full width" mode on or off. With this option enabled, buttons occupy the full width of the block. To use this option, set Options style to Button. Use the Spread options setting to turn "spread" mode on or off. With this option enabled the list of options are spread out to occupy the width of the block. To use this option, set Options style to Text with underline. Set the Hide option labels option to on or off. With this option off, labels are displayed for product options inside the block. Use the Hide sold out or unavailable variants option to show or hide variant options inside the block, for product variants that are currently out of stock or not available for purchase. Enabling this option and setting the Theme settings > Products > Availability display mode option to Adjacent may result in some product option combinations being unreachable. Please consider turning one or the other off. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Quantity selector *	Displays a quantity selector, inside the section, for choosing the number of products to purchase.	Use the Style option to apply a Border or Underline style to the block's quantity picker. Set the Fill column width option to on or off. With this option enabled, the quantity picker occupies the full width of the block. To use this option, set the Style option to Border. Set the Hide label option to show or hide a text label for the block's quantity picker. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Buy buttons *	Displays the Add to cart and Buy it now buttons inside the section.	Use the Show installments option to show or hide Shopify's Shop Pay installments options inside the block. Refer to Shopify help: Shop Pay installments. Set the Show dynamic checkout button option to show or hide a button with the customer's preferred payment method, beside the block's Add to cart button. Refer to Shopify help: Dynamic checkout buttons. Set the Fill column width option to on or off. With this option enabled, the block's Add to cart and Buy it now occupy the full width of the block. Full width buttons are visible when the column is wider than the button’s minimum width. Set the Show total price option to on or off. With this option enabled, the product's total price is displayed inside the block's Add to cart button. Note that showing the price inside the button hides the button's default right arrow icon. Use the Character option to select ·, •, ↑, →, ↓, and more. The character you choose is displayed as a separator between the block's Add to cart button's label text and price. Adjust the Repeat character slider between 1x and 3x to specify how many separator characters to display between the block's Add to cart button's label text and price. Use the Show pickup availability option to show or hide indicators, inside the block, for products that can be collected from your store's designated customer "pick up" locations. Refer to Shopify help: Show pickup availability to your customers. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block's pickup availability area. To use this option, enable the Show pickup availability option. Use the Show recipient information form for gift card products option to show or hide the block's recipient information form. With this setting enabled, visitors who purchase a gift card from your store can use the form to send the gift card by providing the recipient's email address. Visitors can also enter a personal message, and send the message to the gift card's recipient. Refer to Add recipient fields to your gift card product. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Description *	Displays a text area to contain a product's description text inside the section.	Set the Truncate description option to on or off. With this setting enabled, a Read more button is displayed inside the block. Selecting the button opens an expanded text area that contains a product's description text. This setting is useful for products with variant images and longer descriptions. Adjust the Maximum words before truncation slider between 10 and 100. This setting controls how many words are shown before product description text is truncated. To use this setting, enable the Truncate description option. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Icon list	Displays a list of items with icons, inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Heading field, enter a single line of text to display as the block's title. Use the Text color option to set the block's text to use the section color scheme's Text or Secondary color. For items 1 to 5, in the Item # > Text field, enter a single line of text to display beside the item inside the block. For items 1 to 5, use the Item # > Icon options to choose a graphical icon to display beside the item's text, inside the block. For example, select the Box, Check mark, Map pin, Price tag, and more. For no icon, select None (default). Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Product group	Displays a customizable product picker inside the section for selecting sibling products from within a product group.	In the Product group metafield key field, enter a namespace and key for a product group metafield. For example, enter custom.product_group. Refer to Link related products with Product groups. In the Product display title metafield key field, enter a namespace and key for a product display title metafield. The values from the metafield are displayed instead of the product title inside the block. Refer to Link related products with Product groups. Use the Options style setting to choose a style for the product picker inside the block. The options include Button, Swatches, Thumbnails, and more. Use the Hide label option to show or hide a text label for the block's picker. Use the Full width buttons option to turn "full width" mode on or off. With this option enabled, buttons occupy the full width of the block. Note that for Swatches and Thumbnails option styles, the Full width buttons option applies only when the Show value option is enabled. Use the Show value option to show or hide corresponding values inside the block. To use this option, set Options style to Swatches or Thumbnails. Use the Spread options setting to turn "spread" mode on or off. With this option enabled the list of options are spread out to occupy the width of the block. To use this option, set Options style to Text with underline. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Vendor	Displays the name of a product's vendor inside the section.	Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Complementary products	When a customer selects a product from your store, the block displays related products inside the section. To set up complementary products, install the Shopify search & discovery app, and refer to Shopify developer help: Product recommendations.	In the Heading field, enter a single line of text to display as a title inside the block. Use the Heading text style options to apply the Heading or Body text style to the block's heading. Use the Product tile type option to select Standard or Text overlay. This setting specifies the type of product tile to display inside the block. With Standard product tiles, product details, like product title and price, are displayed below the block's product images. With Text overlay product tiles, product details overlay the block's product images. Adjust the Maximum products to show slider between 1 and 10. This option sets the maximum number of complementary product suggestions to display inside the block. Use the Products per row on desktop options to show 2 or 3 products in each row, within the block, on desktop displays. Use the Products per row on mobile options to show 1 or 2 products in each row, within the block, on mobile displays. Use the Enable quick buy option to show or hide a Choose options button on product tiles inside the block. A store visitor uses the button to choose product options, like variants, to add to their cart. To use this option, set the Product tile type to Standard. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Inventory status	Displays a text indicator of a product's availability, inside the section.	Adjust the Low inventory threshold slider between 0 and 100. When the in-stock quantity of a product is greater than the slider value, the text Ready to ship is displayed inside the block. Otherwise, the block displays the text "Only n in stock". n is the in-stock quantity of the product. Use the Show low inventory count option to show or hide a count of remaining stock inside the block after the Low inventory threshold is exceeded. With this option enabled, the block displays the text "Only n in stock". n is the in-stock quantity of the product. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Location inventory status	Displays the quantity of a product that's available in each of your store's inventory locations, inside the section.	Use the Locations to show options to select All locations or In stock locations only. This option specifies the inventory locations to use for displaying the quantity of available product. Refer to Shopify help: Assigning inventory to locations. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Text	Displays a text area to contain additional product information, inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Text field, enter a single line of text to display inside the block. Use the Font options to apply the Body, Subheading, or Heading font to the block's text. Use the Text size options to set the block's text to use the Body, Subheading, Standard heading, or Secondary heading text size. Use the Symbol option to select None, Icon, or Subheading. This setting lets you choose whether the block shows no symbol, an icon, or subheading-styled text. Use the Icon option to select the type of icon to display inside the block. Icon options include Box, Chat bubble, Check mark, Coat hanger, and more. Alternatively, to hide the icon, select None. To use this option, set the Symbol option to Icon. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Rich text	Displays an area with formatted text and links inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Text field, enter text to display inside the block. Use the inline text editor to format the text and add links as needed. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Information list *	Displays additional product information inside the section, using a table or list layout.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Text field, enter text to display inside the block. Use the inline text editor to format the text and add links. For a list layout, add each list item on a new line. For a table layout, add each row item on a new line. To specify data for your table's headers and rows, use the format Label: Content in your text. Use the Font option to apply the Heading or Body font to the block's text. Use the Text size options to apply the Body, Standard heading, or Secondary heading text size to the block's text. Use the Style options to apply a Table, Table with gridlines, or List style to the block's text content. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Collapsible tab	Displays a text area with expandable tabs, to contain additional product information, inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Heading field, enter a single line of text to display as the block's title. Use the Heading text style options to apply the Heading or Body text style to the block's title. In the Tab content field, enter text to display inside the block's tab area. Use the inline text editor to format the text and add links as needed. Use the Tab content from page picker to choose a store page as a source of text for the block's tab area. Use the Icon option to select None, Box, Chat bubble, Check mark, Coat hanger, and more. This setting lets you choose an icon to appear alongside the block's heading text. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Popup	Displays a popup overlay to contain additional product information, inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. Use the Icon options to choose a graphical icon to display inside the block. For example, select the Box, Check mark, Map pin, Price tag, and more. For no icon, select None (default). In the Link label field, enter a single line of text to display as a label for the block's link. Use the Page picker to choose a store page as a source of text for the block's popup overlay area. Use the Text color option to set the block's text to use the section color scheme's Text or Secondary color. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Share	Displays an area, inside the section, with buttons for sharing links to your store's products via social media. Refer to Social media.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Separator	Displays a separator between the current block and the previous block inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.
Custom liquid	Displays advanced customizations from Liquid code, like app snippets, inside the section.	Use the Desktop column options to set the block's content to display in the section's Extra information, Description or Product form column. In the Custom Liquid field, enter Liquid template language code. Refer to Learning Liquid: A guide to Shopify theme development. Adjust the Space above slider between 0.5x and 2x to set the amount of space that's displayed above the block. Select Remove block to delete the block from the section.