Appearance

Product - split ​

This guide describes setting up the Product - split section.

Use the section to set what's displayed on a Product page, when a visitor selects a product from a page assigned to the Products > Split template. Refer to Shopify help: Apply a new template to a product.

An example Product - split section on a store's product page.

The previous image shows a Product section on a store's Product - split page. In the section's settings, in the upper left, the checkbox option is set to Enable thumbnails on desktop display devices. This setting displays thumbnail images inside the section's lower left area. The thumbnails are created from items in the product's media gallery.

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

Set up a product - split section ​

To set up a Product - split section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select Products > Split.

    Note

    The section is available only on the Products > Split page template.

  2. From the side menu, select Product.

    The Product - split section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Layout > Desktop layoutSelect the Desktop layout radio buttons to set a layout style for section's product form. The options are Product form on left or Product form on right. This setting applies to desktop display devices.
Media > Enable image zoomSelect the checkbox Enable image zoom to show/hide a panel that contains images of a product. The panel opens when a product's image is selected inside the section. The panel provides zoom in/out for images.
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. Using this setting requires uploading video media to the Products area of your Shopify admin. Refer to Shopify help: Product media.
Desktop > Autoplay videosSelect the checkbox Autoplay videos on desktop to turn on/off playing videos automatically, inside the section. This setting applies to desktop display devices.
Desktop > Enable thumbnailsFor products with multiple images/videos, select the checkbox Enable thumbnails on desktop to show/hide thumbnail images inside the section. The thumbnails are created from items in the product's media gallery. If there are more than 6 items in a product's media gallery, the thumbnails are displayed below the product form. This setting applies to desktop display devices.
Desktop > Media widthSelect the Media width radio buttons to set a width for the section's media area. The options are Half width and Full width. This setting applies to desktop display devices.
Desktop > Media styleSelect the Media style radio buttons to set a style for the section's media area. The options are Cover and Contain. To display uncropped media, select Contain. This setting applies to desktop display devices.
Mobile > Add additional space above mediaSelect the checkbox Add additional space above media to add/remove the spacing (padding) that's displayed above the section. This setting applies to mobile display devices. To hide an overlaid header on mobile display devices, set this option on. Refer to W3 Schools: CSS Padding.
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, 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.

Configure a block within a product - split section ​

A default Product - split section contains 5 (product) blocks. To configure a block inside the section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select Products > Split.

  2. From the side menu, expand the Product 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.

    The Product - split section's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show, hide, or 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 - split blocks.

Table: Product - split blocks ​

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

The blocks indicated with an asterisk * are contained in a default Product - split section. To configure a block, refer to Configure a block within a product - split section.

Block nameBlock descriptionBlock setting(s)
Title*Displays a product's title inside the section.Select the Text size radio buttons to set a style for title text inside the block. The options are Standard heading or Feature heading.
Price*Displays a product's price inside the section.There are no customizable settings available for this block.
Quantity selector*Displays a quantity selector, inside the section, for choosing the number of products to purchase.Select the Hide label checkbox to show/hide the "Quantity" label prefix inside the block.
Variant picker*Displays a variant picker for choosing variations of a product, inside the section.
  • Select the Options style radio buttons to set a style for the variant picker to Drop down or Button.

  • Select the checkbox Hide option labels to show/hide the name of the currently selected product variant inside the block.
Buy buttons*Displays the Add to cart and Buy it now buttons inside the 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 block. Refer to Shopify help: Dynamic checkout buttons.

  • Select the checkbox Show pickup availability to show/hide indicators, inside the block, for products that can be collected from designated customer "pick up" locations. Refer to Shopify help: Show pickup availability to your customers.

  • Select the checkbox Show recipient information form for gift card products to show/hide a Gift card recipient information form inside the block. With this setting enabled, when a customer purchases a gift card product from your store, they use the form to provide details about the gift card's recipient - like the recipient's name and email address. Refer to Shopify help: Adding or updating gift card products.
Complementary productsWhen a customer selects a product from your store, related products are displayed inside the section. To setup complementary products, install the Shopify search & discovery app, and refer to Shopify developer help: Product recommendations.
  • In the Heading text box, enter text to display as title text inside the block.

  • To display heading text from a dynamic source, if available, select the Connect dynamic source icon, beside the Heading box, and then choose a dynamic source to add. Refer to Shopify help: Metafields.

  • Use the Heading size dropdown to set a size for heading text inside the block. Set the block's heading text to use the same size as Standard heading or Feature heading text.

  • Adjust the slider Maximum products to show to set the total number of products to display inside the block. The minimum number is 1, and the maximum is 10.

  • Select Remove block to delete the block from the section.
Star ratingDisplays customer submitted product ratings, represented as star icons, inside the section.
  • Select the radio buttons Star rating type to set the type of ratings to display inside the block. The options are Theme or Shopify product reviews. Refer to Shopify help: Product reviews.

  • Select the Star color radio buttons to apply the color scheme's Text or Accent color to the star (rating) icons inside the block.
TextDisplays a text area to contain additional product information, inside the section.
  • In the Text box, enter text to display inside the block. To display text from a dynamic source, 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 Icon dropdown to choose a graphical icon to display beside the text, inside the block. There are more than 50 icons, including: Box, Check mark, Map pin, Price tag, and Star, as well as icons related to food and health. For no icon, select None (default).
Rich textDisplays an area with formatted text and links inside the section.
  • In the Rich text box, enter text to display inside the block. Format the text or add a link using the Text editor pane.

  • To display text from a dynamic source, like product Title or Vendor, select the Insert dynamic source icon, beside the Rich text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
DescriptionDisplays a text area to contain additional product information, inside the section.Select the Truncate description checkbox to show/hide a Read more button, inside the block. Selecting the button opens an expanded text area that contains additional product information. Enable this setting for products with variant images and longer descriptions. To use this setting, set collapsible tabs to off.
Supporting linksDisplays a menu of links inside the section. This block supports a single menu level.
Pop-upDisplays a pop-up overlay to contain additional product information, inside the section.
  • In the Link label box, enter text for the link to use inside the block. When the link is selected, a pop-up overlay is displayed. To use text from a dynamic source, if available, 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 block. To display content from a dynamic source, if available, 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. Contact form fields cannot be displayed in the pop up. Refer to Shopify help: Metafields.

  • Select the Icon dropdown to choose a graphical icon to display beside the text, inside the block. There are more than 50 icons, including: Box, Check mark, Map pin, Price tag, and Star, as well as icons related to food and health. For no icon, select None (default).
LiquidDisplays advanced customizations from Liquid code, like app snippets, inside the section.
  • In the Liquid box, enter Liquid template language code.

  • Select the checkbox Suppress default block spacing to turn on/off the default spacing between blocks. Refer to Layout.
Collapsible tabsDisplays a text area with expandable tabs, to contain additional product information, inside the section.
  • For items 2 and 3, select the Enable checkbox to show/hide the item inside the block.

  • For items 1 to 3, in the Heading box, enter text to display as the block's title text. To display text from a dynamic source, if available, select the Insert dynamic source icon, beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • For items 1 to 3, in the Tab content box, enter text to display inside the block. Format the text and add links using the text editor pane. To display content from a dynamic source, if available, select the Insert dynamic source icon, beside the Tab content box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • For items 1 to 3, use the selector Tab content from page > Select page to add content from another store page into the block. To display content from a dynamic source, if available, 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.

  • For items 1 to 3, select the Icon dropdown to choose a graphical icon to display beside the block's title text. There are more than 50 icons, including: Box, Check mark, Map pin, Price tag, and Star, as well as icons related to food and health. For no icon, select None (default).
Icon listDisplays a list of items with icons, inside the section, arranged in a horizontal row.
  • In the Heading box, enter text to display as the block's title text.

  • To display heading text from a dynamic source, if available, 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 radio buttons to set text inside the block to use the color scheme's Text or Secondary color.

  • For items 1 to 5, use the Item # > Text box to enter text to display beside the (list) item, inside the block.

  • For items 1 to 5, to display (list) text from a dynamic source, if available, select the Insert dynamic source icon, beside the Item # > Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • For items 1 to 5, select the dropdown Item # > Icon to choose a graphical icon to display beside the (list) item's text, inside the block. There are more than 50 icons, including: Box, Check mark, Map pin, Price tag, and Star, as well as icons related to food and health. For no icon, select None (default).
ShareDisplays an area, inside the section, with buttons for sharing links to your store's products via social media. Refer to Social media.There are no customizable settings available for this block.