Clickable gallery images on Shopify: link to collections

Picture a grid of twelve photos on your home page, one per range. Clicking a photo takes the shopper to that range. Some destinations are collections, others are pages or a wholesale site on another domain. Your theme may already have a section for this. If its layout or link options do not fit, a gallery where every image carries its own link is another route. This guide covers what to check in the theme first, how image links behave in Snug Gallery, and the details that keep the grid useful as the store changes.

What your theme already gives you

Most Online Store 2.0 themes ship with a Collection list section. You pick collections, the section draws a card for each using the collection's featured image and title, and the card links to the collection. It is the right tool when the categories are collections, the collection images are good, and the number of categories fits the layout. Shopify's page on sections and blocks describes how these sections are assembled.

Look for Collage, Multicolumn or Image with text sections when you want an image other than the collection's own. Link controls, block limits and layout choices vary by theme. Check whether the whole image is clickable or only a separate button, and whether all your tiles fit in one section. If you need several sections, you will also need to keep their spacing and column settings consistent.

If a Collection list does what you need, use it. It is free, it is native, and the images update when you change the collection image. The rest of this guide is for the cases where it does not.

When a linked gallery is the better tool

Consider a fabric shop with twenty-two ranges. It wants all of them on one page, in their natural proportions, with a tag filter so visitors can narrow to Linen or Quilting. A linked gallery can handle that as one image set. Check your theme first: if it does not offer filtering and the layout you need, a gallery avoids building those pieces yourself.

The second case is images that are not collection images. A collection image tends to be a product on white because it also appears in search results and menus. A seasonal grid wants the lifestyle shot: the throw on the sofa, linking to the Throws collection, swapped for the autumn photograph in September without touching the collection itself.

The third is destinations that are not collections. A blog post, a size guide page, a lookbook, a booking site, a sister store on another domain. A tile in a gallery goes wherever its URL points. Themes' collection cards go to collections.

And the quiet one: the same grid on several pages. A gallery is created once in the app and placed as many times as you like in the theme editor, each placement with its own columns and captions. Change a link in the app and every placement updates.

How image links work in Snug Gallery

Each image in a gallery has a Link field and an Open link in a new tab checkbox, next to its alt text, caption and tags. Fill in the link and that tile on the storefront is rendered as an ordinary anchor instead of a lightbox button, so clicking it navigates. Tiles without a link keep opening in the lightbox as before, so a gallery can mix the two, though a grid built as navigation is usually clearer when every tile goes somewhere.

The link is stored in a Shopify metaobject field of type URL, and Shopify accepts only full URLs with an https, http, mailto, sms or tel scheme (see Shopify's list of metafield types). That means https://yourstore.com/collections/throws, not /collections/throws. The quickest way to get a correct address is to open the collection or page in your admin, use the preview icon to view it on the storefront, and copy the address bar.

Only images can carry a link. A video item in the gallery always opens its player, whether it was uploaded to Shopify or added from YouTube or Vimeo. If a tile in a navigation grid needs to move, use a still from the clip and link that; the video gallery guide covers how each kind of video is loaded.

Image links are part of the Standard and Unlimited plans. On the Free plan the field is there and the link is saved, but the storefront renders the tile as a plain lightbox tile, so a grid that looked right in the editor appears unlinked on the page. If links are not working and the store is on Free, that is why.

Links and shop-the-look pins are independent. A pinned image on the Unlimited plan can also carry a link; the pins sit in their own layer beside the tile, so tapping a pin opens the product card and tapping the photo follows the link. On a navigation grid you will rarely want both.

Build a shop-by-category grid

List the destinations first. For each tile write down the storefront URL it should open, copied from the address bar of the live page rather than typed from memory. Note which ones are on another domain; those are the only ones that should open in a new tab.
Choose or shoot one image per destination at a single shape. Square or 4:3 is the usual choice for a category grid because the tiles read as a set. If the photographs are a mix of landscape and portrait and cropping would hurt them, plan on the Masonry layout instead and accept an uneven grid.
In Snug Gallery, create a gallery called Shop by category, pick Grid (or Masonry), and upload the images. Click each one: set the caption title to the category name, paste the full URL into Link, and tick the new-tab box only for external destinations. If the grid should be filterable, tag each image as well.
Open the home page in the theme editor, add the Gallery block from Snug Gallery and select the gallery. Set Image shape to Square or Landscape so every tile is the same size, choose Overlay, always visible for the caption style so the category name is on the tile without hovering, and pick a hover effect such as Zoom or Lift so a mouse user sees that the tiles respond. The no-code setup guide walks through placing the block if this is your first gallery.
Set the order to Manual and drag the categories you most want visited to the first row. Save, then open the live page and click every tile once, on a phone as well as a desktop. Fix any link that lands on a 404 or opens the wrong market before announcing the page.

The words on the tile

A navigation grid lives or dies by its labels. Phones have no hover, so a caption that only appears on hover may never show for most of your traffic; use Overlay, always visible, or Below image. Keep the label to the category name, two or three words, and let the photograph do the rest.

Alt text changes job when an image is a link. A screen reader announces the alt text as the name of the link, so it should say where the link goes, not what the photograph shows: "Shop linen throws" rather than "grey throw folded on a green sofa". The W3C's note on functional images explains the convention. The accessibility checklist covers keyboard focus on tiles, which linked tiles get from the browser for free.

Resist adding a second line of marketing copy to every tile. On a twelve-tile grid that is twelve paragraphs competing with the images; if a category needs explaining, it needs a better photograph or a better name.

Keeping the links honest

Open your own pages in the same tab. New tabs are for leaving the site, and a shopper who clicks four category tiles and ends up with four tabs will not thank you. The checkbox is per image, so a wholesale portal on another domain can open in a new tab while everything else stays put.

The link is a fixed address. It does not follow a renamed collection, so if you change a collection's handle in its search engine listing, update the tile, or take the redirect Shopify offers when you edit the handle. It also does not know about markets: if your store serves country or language subfolders, a tile pointing at https://yourstore.com/collections/throws sends every visitor to that exact URL, and a shopper browsing /fr/ will leave the French storefront when they click. Stores with subfolder markets should test this before relying on a linked grid for primary navigation.

Swap the photograph, keep the link. When autumn comes, replace the image on the Throws tile rather than deleting the tile and making a new one; the link, caption and position stay. The guide on replaced images explains what to expect from Shopify's CDN when you do.

For a grid whose tiles should land on a filtered view of another gallery rather than on a collection, the URL can carry a filter: https://yourstore.com/pages/work?snug-tag=weddings opens that page's gallery already narrowed to Weddings. The filtered links guide has the details.

When not to link

If the point of the image is the image, leave the link empty. A lookbook photograph that a shopper wants to see full-size should open in the lightbox; a link that whisks them to a collection the moment they click to zoom is a small betrayal, and the lightbox already shows the caption and, on the Unlimited plan, the pinned products. The shoppable lookbook guide covers that arrangement.

If the destination is one product and you want it bought from the photo, pin it instead of linking. A link to a product page is one click more than a pin that adds to the cart in place.

Everything else, the category grid, the brand tiles, the row of partner logos that open their sites, the editorial image that leads to a blog post, is a link on an image, and a gallery with links is a tidy way to keep a lot of them in one place.

Frequently asked questions

Can I make images in a Shopify gallery clickable?

Yes. In Snug Gallery, click an image in the editor and fill in its Link field with a full URL beginning with https://. On the storefront that tile becomes a link and navigates on click instead of opening the lightbox. Image links are available on the Standard and Unlimited plans.

Can a gallery image link to a collection and still open in the lightbox?

No. A tile does one of the two things on click: if it has a link it navigates, if it has none it opens the lightbox. Visitors can still reach a linked image inside the lightbox by opening a neighbouring tile and using the arrows. If one photograph needs both behaviours, upload it a second time and link only one copy.

Why are my gallery image links not working?

Three causes cover almost every case. The store is on the Free plan, which saves links but does not render them. The link was entered as a relative path such as /collections/sale rather than a full https:// address, which Shopify's URL field will not accept. Or the item is a video, which always opens its player and cannot carry a link.

Should gallery image links open in a new tab?

Only when the link leaves your store, for example to a wholesale portal or a partner's site. Links to your own collections and pages should open in the same tab so the back button and the shopper's sense of place keep working. The setting is per image, so you can mix the two in one gallery.