The Gallery section displays a collection of images in a grid or a horizontal scrolling row. Each image can include a heading, subheading, and link, making the section useful for showcasing lifestyle photography, campaigns, or community content.
Demo Usage
- Demo: Be Yours – Beauty Homepage
- Location: Near the bottom of the homepage, around the “Express yourself with” community-image area, below “Cosmetic Cream Packs.”
- Usage: A row of imagery used to showcase brand and community visuals.
Steps:
1. Add the Gallery Section
- From Shopify admin, go to Online Store > Themes.
- Find your Be Yours theme and click Customize.
- Open the page template where you want to display the gallery.
- Click Add section and select Gallery.
- Add Image blocks and configure the section settings.
- Click Save.
2. Configure Gallery Layout
| Setting | Description |
|---|---|
| Images per row | Sets the number of images per row on desktop (1–6). |
| Spacing between images | Sets the space between images. |
| Desktop image row heights | Controls image height on desktop. |
| Apply overlay on image | Adds a contrast overlay to help text stand out. |
| Make section full width | Expands the section across the page width. |
| Enable scroll on desktop | Displays images in a horizontal scrolling row. |
| Run the row to the screen edges | Extends the scrolling row toward the screen edges. |
| Show section divider | Adds a divider above the section. |
When Enable scroll on desktop is enabled, navigation arrows can appear alongside the section heading when the row has more content than fits on screen.
3. Configure Heading and Mobile Layout
Heading settings
| Setting | Description |
|---|---|
| Heading | Sets the title above the gallery. |
| Heading size | Selects Small, Medium, or Large. |
| Heading alignment | Aligns the heading Left, Center, or Right. |
| Heading tag | Sets the heading's semantic tag. |
Mobile layout settings
| Setting | Description |
|---|---|
| Number of columns on mobile | Shows 1 or 2 columns. |
| Enable swipe on mobile | Lets customers swipe through the images horizontally. |
| Mobile image row heights | Controls the image height on mobile. |
Desktop scrolling and mobile swiping can be configured independently.
4. Add and Configure Image Blocks
Each Image block adds one gallery item.
- Open the Gallery section and click Add block > Image.
- Select an Image.
- Adjust Image focal point to control which part of the image stays visible.
- Add an optional Subheading and Heading.
- Choose Subheading size and Heading size.
- Add a Link if you want the image to open another page or an external URL.
- Choose Content position to place the text over the image.
- Click Save.
Content position supports nine placements: Top, Middle, or Bottom, each aligned Left, Center, or Right.
5. Configure Highlight, Color, and Spacing
| Setting | Description |
|---|---|
| Highlight | Sets the highlight color for the section. |
| Enable highlight | Enables the heading highlight effect. |
| Highlight style | Chooses the text highlight effect. |
| Top padding | Controls spacing above the section. |
| Bottom padding | Controls spacing below the section. |
The Enable highlight and Highlight style settings are also available in individual Image blocks for their heading and subheading.
Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
6. Notes and Troubleshooting
- The Gallery section uses Image blocks; it does not automatically import images from Instagram or another social platform.
- To link a gallery image to an Instagram post or another destination, add the URL in the image block's Link setting.
- If an image is missing, check that the Image setting has been filled in.
- If important parts of an image are cropped, adjust Image focal point, image height, or the source image.
- If text is difficult to read, try Apply overlay on image or adjust the image used.
- If navigation arrows are not visible, confirm Enable scroll on desktop is enabled and that there are enough images to scroll.
- If mobile swiping is unavailable, check Enable swipe on mobile.
- If highlighted text does not appear, enable the relevant highlight setting and format the text in italic.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Testimonials Section in Be Yours
How to Set Up the Map Section in Be Yours