Gallery

Gallery arranges cards of different sizes into a mosaic, each with an image, icon, text and a button or link. It suits feature overviews, lookbooks and category showcases.

Updated 1 min read

A dark gallery with a large tall watch photo on the left and smaller cards for Precision Tracking, Always Connected and All-Day Energy on the right

Build a gallery

  1. In the theme editor, click Add section and choose Gallery.
  2. Add a Card block for each tile. Turn on Tall or Wide to make a card take two rows or two columns.
  3. Set Number of columns on desktop, from 2 to 5, and the gaps.
  4. Click Save.

What a card can show

  • Background image with Image overlay opacity.
  • Icon, with its size, colors and background shape.
  • Heading, Description and a Button.
  • Card link: makes the whole card clickable. Fill in Link descriptive text if the card has no text of its own.
  • Card color scheme, or a Custom background color.

Section settings

  • Minimum height on desktop and mobile: the height of a standard card.
  • Gap on desktop and Gap on mobile.
  • Mobile layout: a carousel, or the cards stacked.
  • Corner rounding on desktop: round every card (Standard), only the outer corners of the whole gallery (Outer), or none. The amount comes from Appearance.
  • Full width, and a heading, description and View more link.
  • Hide this section when there’s no image to show: for galleries whose images come from metafields.

Common questions

How do I make a mosaic or bento grid in Shopify with Ignite?

Add the Gallery section, add a Card block for each tile, and turn on Tall or Wide on the cards that should be bigger.

How does the Gallery look on mobile?

Choose a carousel or stacked cards with Mobile layout.