Multipurpose theme documentation
Multipurpose Fashion Theme
Gallery
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Image & Media Sections > Gallery
Overview
The Gallery section displays a responsive grid of images with optional captions and links. Use it for lookbooks, portfolios, product highlights, or brand imagery. Features include:
- CLS-safe aspect-ratio containers and responsive grid
- Optional animation (None, Fade, Stagger) when the gallery enters the viewport
- Accessible lightbox with focus trap, ESC/arrow navigation, and aria-live announcements
- Theme editor support: selecting a block opens its image in the lightbox
- Multiple aspect ratios, crop styles, and mobile column control
- Optional hover scale effect and fade overlay
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Gallery.
- Save.
📷 Image placeholder: Add a screenshot of Gallery section on storefront.
Quick Setup (3 Steps)
- Add Image blocks — Add one block per image.
- Upload images — Add image, optional caption, and link (when Zoom is off) for each block.
- Configure grid — Set images per row, mobile columns, spacing, zoom, and hover effects.
Section Settings
| Setting | Description |
|---|---|
| Heading | Section title |
| Heading size | Small, Medium, Large |
| Text alignment | Left, Center, Right |
| Images per row | Desktop columns (2–6) |
| Mobile columns | Columns on mobile (1–3) |
| Full width | Stretch to viewport |
| Padding top / bottom | Section spacing |
| Grid spacing | Gap between images |
| Enable zoom | Opens images in an accessible lightbox on click |
| Hover scale effect | Subtle scale animation on image hover |
| Fade overlay | Dark overlay on hover |
| Animation | None, Fade, or Stagger (triggers when section enters viewport) |
| Custom CSS | Scoped styles |
Blocks: Image
| Setting | Description |
|---|---|
| Image | Gallery image |
| Caption | Text displayed below the image |
| Link | Optional URL when image clicked (used when Zoom is disabled) |
| Open link in new tab |
Opens link in new tab with
rel="noopener noreferrer"
|
| Aspect ratio | Natural, Square, 4:3, 16:9, Portrait |
| Crop style | None, Rounded, Arch, Rounded wave |
| Image alignment | Top, Center, Bottom (for object-position) |
Lightbox (when Zoom is enabled)
Clicking an image opens an accessible lightbox. Keyboard controls:
- ESC — Close
- ← / → — Previous / Next image
- TAB — Focus cycles within the modal
Click the overlay or close button to exit. Focus returns to the trigger that opened the lightbox.
Step-by-Step Setup
- Add Gallery section.
- Add Image blocks; upload images and optionally add Caption and Link (link applies when Zoom is disabled).
- Set Images per row, Mobile columns, Grid spacing, Enable zoom, and Hover scale effect if desired.
- Save.
For merchants
- Use high-quality, consistent images.
- Add captions for context; add links to products or collections when Zoom is disabled.
- 4–6 images per row works well for desktop; 2 columns on mobile is typical.
- In the theme editor, selecting an image block opens it in the lightbox for quick preview.
FAQs
Gallery displays a responsive grid of images. Use it for lookbooks, editorial collections, campaign imagery, portfolios, and product highlights.
If Zoom is enabled, clicking opens a lightbox. If Zoom is disabled, images can link to pages.
Up to 20 image blocks (max_blocks: 20).
For best performance, keep the count reasonable on pages that already contain heavy media.
It sets the number of columns on desktop, from 2 to 6.
On smaller screens, the grid becomes narrower automatically, and you can also control mobile behavior via Mobile columns.
It sets the number of columns on mobile, from 1 to 3.
- 1: best for editorial photography and large images
- 2: balanced, common for fashion grids
- 3: compact, good for small product-style tiles
When enabled, the section stretches to the full viewport width. When disabled, it stays inside the theme’s standard page-width container.
Full width often looks best for lookbooks and brand storytelling pages.
They toggle section padding above and below the Gallery. Use them to align spacing with adjacent sections.
It sets the gap between images from 0 to 60px. Higher spacing creates a cleaner, editorial look. Lower spacing creates a dense, product-style grid.
Zoom opens images in a lightbox on click.
- If Zoom is enabled, clicking opens the lightbox and the image block link is not used.
- If Zoom is disabled, clicking follows the image block Link (if provided).
When enabled in an Image block, the link opens in a new browser tab.
This setting only applies when Zoom is disabled, because Zoom takes over the click behavior.
It adds a subtle zoom-in hover interaction on images. This is purely visual and does not change layout.
If your images contain text or fine detail, consider disabling it to avoid motion distraction.
It adds a dark overlay on hover, useful for adding contrast when captions are present or for a premium editorial feel.
Controls entry motion for gallery items:
- None: no animation
- Fade: simple fade-in
- Stagger: staggered fade or fade-up sequence
The section should respect the user’s reduced motion preference.
Each Image block can include an optional Caption. If set, it displays under the image.
For best visual consistency, keep captions short and consistent in length.
Aspect ratio controls how images are sized and cropped inside the grid:
- Natural: keeps the image’s original ratio
- Square: consistent 1:1 tiles
- 4:3: classic editorial photo ratio
- 16:9: wide campaign and banner-style shots
- Portrait: 3:4 for fashion model photography
Crop style changes the image container shape, not the image file itself.
- None: square corners
- Rounded: rounded corners
- Arch: arch-like silhouette
- Rounded wave: decorative organic shape
It changes the focal anchor point of the image within the cropped frame: Top, Center, or Bottom.
Use Top for portraits where the head should not be cropped, and Bottom for footwear or product detail.
Yes. Use the section’s Custom CSS field. It applies only to this section instance.
Keep changes small to avoid conflicting with responsive layout and accessibility.
- Upload appropriately sized images (avoid huge originals when not needed).
- Use modern formats like WebP when possible.
- Keep aspect ratios consistent to reduce layout shifts.
- Avoid using the maximum block count on pages with heavy video.
Most common causes:
- The uploaded image is too small for the chosen grid density.
- Full width is enabled but source images are not large enough.
- High column count (5 to 6) combined with small original assets.
Mixed aspect ratios can create visual inconsistency, especially if some blocks use Natural while others use fixed ratios.
For uniform tiles, choose the same aspect ratio for all blocks, such as Square or Portrait.
A Theme Store ready lightbox should include:
- Focus trap inside the dialog while open
- Focus restored to the clicked image trigger on close
- ESC to close
- ArrowLeft and ArrowRight to navigate
- aria-live announcement for slide changes (example: “Image X of Y”)
Yes, when implemented with:
- CLS-safe aspect ratio containers
- Correct responsive images (srcset + sizes)
- Accessible lightbox behavior
- No jQuery dependency
- Reduced motion respect
- Theme editor lifecycle support (section load and unload)
These are common checkpoints during Theme Store review.
This is expected. When Zoom is enabled, the click action is reserved for opening the lightbox viewer.
If you want the gallery to act as navigation, disable Zoom and use the Link field per block.
- Heading: section title text
- Heading size: Small, Medium, Large
- Text alignment: Left, Center, Right
Check these:
- Zoom is enabled in section settings.
- At least one Image block has an uploaded image (not just placeholders).
- The gallery JS asset is loaded only when Zoom is enabled.
- No console errors from another script on the page.