Appearance

Apply the Horizontal gallery template to a product ​

This guide explains how to apply the Horizontal gallery template to a product page.

Baseline provides a template that uses a horizontal gallery layout for product pages. To use this layout, complete the steps in this guide to assign the Horizontal gallery template to a product.

Important

This guide assumes that your published theme is the Baseline theme.

If your published theme is not the Baseline theme

If your published theme is not the Baseline theme, we recommend that you publish your version of Baseline.

Alternatively, if you're not ready to publish, complete the following steps before you proceed with this guide:

  1. In your Shopify admin, select Sales channels > Online store > Themes, and then locate your published theme.

  2. Beside your published theme's name, select the ellipsis icon ..., and then select Edit code to open the Code editor.

    The Actions dropdown in Shopify admin.

  3. In the Code editor, expand the Templates directory, and then select the Add new file icon.

  4. For the filename, enter product.horizontal-gallery.json.

    The Horizontal gallery JSON file opened in the Code editor.

  5. Select Save to save your new file.

    Ensure you save your new file inside the Templates sub-directory.

    Note

    If your published theme already includes a template file named product.horizontal-gallery.json, you cannot create a new file with the same filename. As a workaround, rename your theme's original product.horizontal-gallery.json file to use a different filename, and then create a new product.horizontal-gallery.json file by following the previous steps.

    Then proceed to Assign the Horizontal gallery to a product.

Complete the following steps in Shopify's Product editor to assign the Horizontal gallery template to a product:

  1. In your Shopify admin, select Products.

  2. Choose the product you want to assign the Horizontal gallery template to.

  3. In the Product editor, use the Theme template dropdown to select Horizontal gallery.

    The Theme template dropdown in the Shopify Product editor.

  4. Select Save to save the changes you made to the product's template.

Note

For more information about applying a template to a product, refer to Shopify help: Apply a new template.

Customize a Horizontal gallery product page ​

Use Shopify's Theme editor to customize how a product displays on a Horizontal gallery product page by completing the following steps:

  1. In your Shopify admin, select Sales channels > Online store > Themes.

  2. Next to the name of the theme you want to customize, select Edit theme to open the Theme editor.

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

  4. In the Theme editor's sidebar, select the Product - horizontal section.

  5. Use the product picker to choose the product you want to preview.

    The product picker in Shopify's Theme editor.

  6. In the section's settings menu, adjust the section and block options to suit your requirements.

    Note

    For information about the section and block options, refer to Horizontal gallery.

  7. Preview the section applied to your chosen product page.

  8. Select Save to save your changes.