Appearance
Gallery
This guide describes setting a Gallery section.
Use the section to display a selection of images on a store page.
The previous video shows a Gallery section in Theme editor. The section's checkbox option is enabled to display images at Full width inside the section. With this option set to off (default), a gap or "whitespace" is displayed around each image inside the section. With this option set to on, the whitespace is not displayed.
For general guidance with modifying sections, refer to Sections overview.
Set up a gallery section
To set up a gallery section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a gallery section. For example, select the Home page.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Gallery. Refer to Shopify help: Add a section.
From the side menu, select Gallery.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Heading | In the Heading box, enter text to display as a title inside the section. |
| Text size | Use the Text size options to set a size for text inside the section. The options are: Small, Medium, and Large. Refer to Typography. |
| Full width | Select the Full width checkbox to turn on/off displaying a "whitespace" gap between images inside the section. |
| Images per row - desktop | Use the Images per row options to display 2, 3 or 4 images within each row inside the section. This setting applies only to desktop display devices. |
| Crop images | Use the Crop images options to specify a cropping style for the section's images. The options are: No crop, Landscape, Square, and Portrait. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Text color | Use the Text color options to specify a color for text inside the section. Set the text color to use the section's color scheme color for Primary, Secondary or Tertiary text. Alternatively, set the text color to White or Black. Refer to Colors. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select 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. |
| Remove section | Select Remove section to delete the section from the current page. |
Configure an image inside a gallery section
A default gallery section contains six image (blocks). To configure an image block inside a gallery section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a gallery section. For example, select the Home page.
From the side menu, expand the Gallery section menu.
To configure an existing image block, select the Image block from the side menu.
To add a new image block, select Add block, choose Image, and then select the Image block you added.
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.
Apply the block settings described in the following table.
| Setting name | Description |
|---|---|
| Image | Use the Image selector options to set up an image inside the block. Refer to Add, replace or remove an image or video inside a section or block. |
| Image > Connect dynamic source | To display an image from a dynamic source, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Caption (optional) | In the Caption box, enter text to display inside the block. The image is overlaid with the text you enter. |
| Link (optional) | In the Link box, enter a URL for the caption text to use or select a link to a store page. To remove a link, select the X icon inside the text box. |
| Link (optional) > Connect dynamic source | To display a link from a dynamic source, select the Connect dynamic source icon beside the Link selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Remove block | Select Remove block to delete the block from the current section. |