Appearance

Apply the Horizontal gallery template to a product ​

The following guide describes how to apply the Horizontal gallery template to a product on a product page.

Baseline provides a template that applies a "horizontal gallery" style layout to product pages. Complete the steps in this guide to apply the Horizontal gallery template to a product.

Important

This guide assumes that your published theme is Baseline theme.

If your published theme is not Baseline theme

If your published theme is not 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. On your store's Shopify admin page, select 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 Code editor.

    The Actions drop-down in Shopify admin.

  3. In 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 open in 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, apply an alternative filename to your theme's original product.horizontal-gallery.json file, and then create a new product.horizontal-gallery.json file by following the previous steps.

    Proceed to the next steps in this guide to Assign the Horizontal gallery to a product.

Use Shopify's Product editor, in your store's Shopify admin, to assign the Horizontal gallery template to a product by completing the following steps.

  1. On your store's Shopify admin page, select Products.

    The Products tab selected on the Shopify admin page.

  2. To open Product editor, select the product you want to assign the Horizontal gallery template to.

  3. In Product editor, locate and use the Theme template drop-down to select Horizontal gallery.

    The Theme template drop-down 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. On your store's Shopify admin page, select Online store > Themes, locate the theme you want to customize, and then select Customize to open Theme editor.

  2. In Theme editor, use the drop-down at the top of the page to select Products > Horizontal gallery.

  3. In Theme editor's sidebar menu, select Change and then choose your required product.

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

    The Product - horizontal section in Theme editor.

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

    Note

    For information about the section's setting options and blocks, refer to Horizontal gallery.

  6. Preview the section applied to your chosen product.

  7. Select Save to save the changes you made to the section's settings.