Scrolling gallery
A band of images that scrolls sideways on its own, with optional oversized text over it. Decorative rather than navigational.
At a glance: Add it to any page with Add section. Holds up to 10 blocks.
Good for
- A moving lookbook strip on the homepage
- A band of lifestyle photos behind a big brand word
- A lively break between two text-heavy sections
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Scrolling gallery and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Large text
| Show large text | Adds a line of oversized display text to the section.
Makes headings and descriptions more prominent, with adjustable size levels. Off by default. |
| Large text | Oversized display text, usually a single word or short phrase.
Only appears when Show large text is on. |
| Desktop text width | How much of the gallery's width the oversized text spans on desktop. The text scales to fill that width, so a higher value means bigger letters.
Adjustable from 10% to 100% (default 60%). Only appears when Show large text is on. |
| Mobile text width | How much of the gallery's width the oversized text spans on mobile. The text scales to fill it.
Adjustable from 10% to 100% (default 90%). Only appears when Show large text is on. |
| Large text color | Color of the oversized display text.
Default: #ffffff. Only appears when Show large text is on. |
Scrolling
| Scroll direction | Which way the content travels.
Choose Right or Left (default). |
| Scroll speed | How fast the content moves. Lower is slower.
1 is slowest, 10 is fastest. Adjustable from 1 to 10 (default 5). |
| Pause on hover | Stops the animation while the pointer is over the section.
On by default. |
| Item gap | Space between items in the row or grid.
Adjustable from 4px to 48px (default 12px). |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Gallery item block
Content
| Item type | Full fills the column with one image. Split stacks two smaller images in the column. Split with empty stacks one image with a blank space, which breaks up the rhythm of the band.
Choose Full (default), Split or Split with empty. |
Images
Image ratio will be applied to both Image 1 and Image 2.
| Image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Applies to both Image 1 and Image 2. Choose Adapt to image (default), Portrait (3:4), Landscape (4:3) or Square (1:1). |
| Image 1 | The image for this block.
800 x 1000px .jpg recommended. |
| Image 1 link | Makes the image clickable. |
| Open link in new tab | Opens the image's link in a new browser tab. Best kept for links that leave your store.
Off by default. |
| Image 2 | 800 x 1000px .jpg recommended.
Only appears when Item type is Split. |
| Image 2 link | Where the second image goes when clicked. Only used by the Split item type.
Only appears when Item type is Split. |
| Open link in new tab | Opens the second image's link in a new browser tab.
Off by default. Only appears when Item type is Split. |
| Empty block position | Whether the blank space goes above or below the image in a Split with empty item.
Choose Top or Bottom (default). Only appears when Item type is Split with empty. |
Tips
- Mix the item types. Alternating Full, Split and Split with empty gives the band a varied rhythm instead of a row of equal tiles.
- Keep the large text short. One word or a short phrase stays readable as it scales across the images.
- Upload at least 1500px wide for Full items. Split items only need about 1000px.
Troubleshooting
The second image's link doesn't work
Image 2 link only applies to the Split item type. Split with empty has just one image, which uses the first link.