Showcase gallery
A heading and button with a gallery of photos arranged around them, either turning slowly in a ring or scattered like prints on a table. A decorative way to introduce a collection or a campaign.
At a glance: Add it to any page with Add section. Holds up to 8 blocks.
Good for
- Opening a campaign or lookbook with a showpiece
- Showing a lot of lifestyle photography without a grid
- Framing a single message with imagery
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 Showcase gallery and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Layout
| Desktop section layout | Top turns the images in a ring above the heading, and Bottom turns them in a ring below it. Static scatters the images around the heading like prints on a table. They don't move, but each lifts slightly on hover.
Choose Top (default), Bottom or Static. |
| Mobile section layout | Whether the ring of images turns above or below the heading on mobile. The static layout is desktop-only, so mobile always uses the ring.
Choose Top (default) or Bottom. |
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. |
| 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. |
Scrolling
| Scroll direction | Which way the content travels.
Choose Right (default) or Left. Only appears when Desktop section layout is not Static. |
| Scroll speed | How fast the content moves. Lower is slower.
1 is slowest, 10 is fastest. Adjustable from 1 to 10 (default 5). Only appears when Desktop section layout is not Static. |
| Pause on hover | Stops the animation while the pointer is over the section.
On by default. Only appears when Desktop section layout is not Static. |
Background
| Enable background image | Fills the section with a photo and places the gallery on a card in front of it, so the photo shows as a frame around it.
Off by default. |
| Desktop background image | 2880 x 1280px (large) .jpg recommended.
Only appears when Enable background image is on. |
| Mobile background image | 1200 x 900px .jpg recommended.
Only appears when Enable background image is on. |
| Desktop background size | Minimum height of the framed card on desktop: about 440px for Small, 550px for Medium and 640px for Large. Full screen makes it the height of the browser window.
Choose Small, Medium (default), Large or Full screen. Only appears when Enable background image is on. |
| Mobile background size | Minimum height of the framed card on mobile: about 375px for Small, 450px for Medium and 500px for Large. Full screen makes it the height of the screen.
Choose Small, Medium (default), Large or Full screen. Only appears when Enable background image is on. |
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
| Image | The image for this block.
Upload a square or portrait image for best results. |
| Link | Makes the image clickable. |
| 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. |
Tips
- Use all eight items for Static. The scattered layout repeats every eight photos, so eight fills it evenly.
- Choose square or near-square photos. Each item is small, so tight crops of one subject read best.
- Keep the heading short. The images move around it, so a short line is easier to read.
Troubleshooting
The Static layout isn't showing on my phone
Static is desktop-only. On mobile the images always form a ring, placed above or below the heading by Mobile section layout.
The scroll settings disappeared
Scroll direction, speed and pause on hover only apply to the moving ring, so they're hidden when Desktop section layout is Static.