Gallery captions on Shopify: title, text, alt and placement

Captions are the part of a gallery that gets decided last and argued about most. Designers want them gone; the person who wrote the copy wants them read; the SEO person wants words next to pictures; the accessibility audit wants alt text and is not sure whether a caption counts. Snug Gallery has three text fields per image and one caption style setting per block, and most of the arguments dissolve once it is clear which field does what and where each one appears. This is that explanation, with the layout exceptions written down.

Three fields, three jobs

Click any image in a gallery inside Snug Gallery and the side panel offers alt text, a caption title and caption text. They are stored separately and used separately.

Alt text is for people who cannot see the image and for search engines. It goes into the img element's alt attribute and nowhere visible on the page. Shopify's own guidance on adding alt text applies unchanged: describe what is in the picture, keep it short, skip the phrase "image of". It is also what the alphabetical sort order reads, so a gallery sorted A to Z is sorted by alt text, not by caption.

The caption title is a short visible label: a product name, a place, a date, the name of the person who sent the photo. The caption text is the longer line or two beneath it. Either can be empty. An image counts as captioned only if at least one of the two has something in it, and an image with neither simply renders without a caption element at all, so there is no empty box to style away.

Line breaks typed into the caption text are kept; the block converts them to line breaks on the page. The title is a single line. Both are HTML-escaped on output, which means you cannot put markup in them, and also means a caption pasted from a spreadsheet cannot break the page.

The five caption styles

The block setting is called Caption style and has five values. Hidden renders no caption at all, although alt text still goes out. Below image puts the title and text under each tile, in the flow of the page, so the tile gets taller to make room. The three overlay styles lay the caption over the bottom of the image on a translucent background: Overlay, always visible, which does what it says; Overlay, show on hover, the default, which reveals the caption when the pointer is over the tile; and Overlay, hide on hover, which shows the caption at rest and clears it when the shopper hovers to look at the picture.

Hover on a touch screen is not a thing, so the show-on-hover style also reveals the caption when the tile's link receives keyboard focus, and on phones the caption behaves as the always-visible overlay would. If the copy is important, choose Below image or the always-visible overlay rather than relying on a hover; the hover styles are for galleries where the picture is the point and the words are a courtesy.

Colours come from two settings beside the style: caption background, which defaults to black at about seventy percent opacity, and caption colour, which defaults to white. They apply to overlays and, for the background, to nothing else; captions below the image inherit your theme's text colour. If you need a different font or size, the Custom CSS setting can target .snug__caption-title and .snug__caption-text without touching the theme.

What each layout does with your choice

Not every layout can honour every style, and rather than render something broken the block quietly substitutes. The rules are short enough to list.

List layout always puts the caption beside the image, whatever style is chosen, unless the style is Hidden. A list is a vertical sequence of large images and the text column next to each one is where a reader expects the words.

Collage and Portfolio cannot show captions below the tile, because their tiles are packed into fixed shapes that leave no room underneath. Choose Below image on either and you get the overlay instead. Portfolio goes further: its overlay is a gradient from the caption background colour up to transparent, the title is always shown, and with the hover style only the text slides in on hover or focus. It is the layout for a studio or agency page where every tile needs a name.

Lookbook moves the caption out of the image entirely, into the aside column that also holds the shop-the-look product cards. On a lookbook the caption title becomes the heading for that look and the caption text sits above the pinned products, which is why lookbook captions are worth writing as copy rather than as labels. The shoppable lookbook guide has examples.

Masonry, grid and carousel follow the setting exactly. If a caption appears somewhere other than where you asked for it, it is one of the three exceptions above, not a bug.

Captions in the lightbox

The lightbox has its own switch, Lightbox captions, on by default. When it is on, the title appears in bold under the enlarged image with the text beneath it, taken from the same two fields. When it is off, the lightbox shows only the image and its controls. The two settings are independent, so a gallery can run with Hidden captions on the tiles and still show them full-size, which is a common choice for photography galleries: clean wall, context on click.

Because the lightbox is attached to the end of the page rather than inside the block, its caption elements are outside the reach of block-scoped Custom CSS; style them from the theme's global CSS if you must.

Customer photos and the name fallback

Photos submitted through the customer-photo form arrive with whatever the customer typed as a caption, up to five hundred characters. The first line, up to 255 characters, becomes the caption title and the whole thing becomes the caption text, so a one-line submission is a title and a longer one is a title plus body. You can edit both before approving.

A separate block setting, Show names, controls what happens when a submitted photo has no caption title: with it on, the submitter's name is used as the title; with it off, the image shows the caption text alone or no caption at all. That is the only place the name is displayed, so leaving Show names off is how you run an anonymous customer gallery.

Captions, SEO and screen readers

Captions are plain text in the page's HTML. Search engines index them alongside the image, so a caption that names the product, the colourway or the place does real work for queries that an alt attribute alone would not catch. A caption is not a substitute for alt text, though: screen readers announce the alt attribute when they reach the image, and a caption in an overlay is read as ordinary text after it. If the caption already says everything, keep the alt short and factual rather than duplicating it; the accessible gallery checklist goes through the rest.

One practical habit: write the alt first, as a description, and the caption title second, as a label. The two end up different by construction, which is what both audiences want.

Frequently asked questions

What is the difference between caption title, caption text and alt text?

Alt text is invisible on the page and describes the image for screen readers and search engines; it is also the field the alphabetical sort uses. Caption title is a short visible label and caption text is the longer visible line beneath it. An image is captioned only if title or text has content.

Why does my caption show as an overlay when I chose Below image?

Collage and Portfolio tiles are packed into fixed shapes with no room underneath, so on those two layouts Below image is rendered as the always-visible overlay. List layout does the reverse and always places the caption beside the image. Masonry, grid and carousel honour the setting as chosen.

Can I hide captions on the tiles but show them in the lightbox?

Yes. Caption style and Lightbox captions are separate settings. Set Caption style to Hidden and leave Lightbox captions on, and the title and text appear only under the enlarged image when a shopper clicks through.

Do hover captions work on phones?

There is no hover on a touch screen, so the show-on-hover style displays the caption as an always-visible overlay on phones, and on desktop it also appears when the tile receives keyboard focus. If the caption copy matters, use Below image or the always-visible overlay instead of a hover style.