Gallery

Add a section to your homepage which displays up to four images of your choice, with optional text and links.

These images can be used for anything you like - an image of a product or a testimonial, or a shot of a member of staff, linking to a page with further information, for example.

This is a very versatile section which is simple to construct and explained in further detail below.

Adding the Gallery section

To add your image gallery on your storefront, you will need to head to your Shopify admin area and navigate the following steps:

  1. Online Store → Themes → Customize

  2. Sections

  3. Select "add section"

  4. Under "Image", choose "Gallery"

  5. Click "Add" to finalize.

Settings

The gallery has a range of settings that can give your Gallery a unique feel. These general settings control the gallery as a whole.

See Content Blocks for individual content settings.

Color Scheme

Choose how the background contrast of the section displays.

Heading & Description

Any headings and descriptions added will sit along the top of the Gallery section.

Remove Spacing

By default, a padding is enabled on the gallery images. Enable the checkbox to reduce the padding, bringing the content closer together.

This has a different effect depending on how many content blocks are featured in the Gallery.

Width

Set the width of the Gallery photos to Full width or to the size of the content.

Content Position

The Content position provides an effect for additional content to display. These features apply optional effects for all the content blocks.

Color's for the text and gradient can be edited later on in the individual content block options. For a direct link to the color settings, see here.

Hover

Hovering the cursor over the content block image will display the Header and Sub header, along with a gradient backdrop if enabled in the content options.

Buttons will also display on hover.

Overlay

The overlay option will overlay the header, sub-header and button (If applicable) on top of the content block and display a gradient background.

Below image

The content will display below the content block image.

Buttons, if enabled, display underneath the Heading and Subheading.

Hide

No content will show at all. Links applied to the content blocks will still be active.

Content Blocks

The Gallery is separated into content blocks and can host up to 4 blocks in total.

Click to expand these details to make amendments and see additional options to edit your Gallery section content.

Click the arrow to collapse the content to reveal more options.

Adding an image

To add your image, click the “select image” button and choose your file. We recommend images to be resized to the same before uploading, for each content block.

Edit or add Alt text to an image

Clicking Edit will allow you to add alternative text to the image for SEO and visually impaired customers.

Flow - Gallery Section - Adding Alt text to Gallery Images

Click the empty field to link the content block when clicked, to an existing page, collection, blog or product within the store. Additionally, you can add in your own URL to link externally.

Heading & Subheading

Add a header and/or a sub-header to display upon hovering over the content.

See below for the overlay working on the live demo store:

Button Text

The option gives the merchant the to display a button on the content image. Once text is inputted into the field, a button will display over the top of the content.

Enable Overlay gradient

Checkbox to enable a gradient effect. This is the background color that displays with the Hover and Overlay Content effect.

Disabling the gradient means any effects with Headings or Subheadings, will only display text.

Overlay gradient enabled

Overlay gradient disabled:

Color settings

Change the colour of the text, and gradient overlay of the content block.

Overlay color changes the color of the Overlay gradient when enabled.