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.
To add your image gallery on your storefront, you will need to head to your Shopify admin area and navigate the following steps:
Online Store → Themes → Customise
Sections
Select "add section"
Under "Image", choose "Gallery"
Click "Add" to finalise.
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.
Choose how the background contrast of the section displays.
Any headings and descriptions added will sit along the top of the Gallery section.
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.
Set the width of the Gallery photos to Full width or to the size of the content.
The Content position provides an effect for additional content to display. This features applies optional effects for all of 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.
Hovering the cursor over the content block image will display the Header and Subheader, along with a gradient backdrop if enabled in the content options.
Buttons will also display on hover.
The overlay option will overlay the header, sub-header and button (If applicable) on top of the content block and display a gradient background.
The content will display below the content block image.
Buttons, if enabled, display underneath the Heading and Subheading.
No content will show at all. Links applied to the content blocks will still be active.
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.
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.
Clicking Edit will allow you add alt text to the image for SEO and visually impaired customers.
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.
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:
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.
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:
Change the colour of the text, and gradient overlay of the content block.
Overlay color changes the color of the Overlay gradient when enabled.
