Snug Gallery on an Arabic or Hebrew Shopify store

Shopify added Arabic and Hebrew to the admin in October 2026, and the number of stores that run a right-to-left storefront, or a right-to-left language next to English, keeps growing. A gallery block is mostly pictures, so it is tempting to assume direction does not matter. It matters in four specific places. This guide goes through each one of them for Snug Gallery, says plainly what follows the theme and what does not, and ends with the one layout choice that avoids all the trouble.

How a storefront becomes right-to-left

Direction is a property of the page, not of the app. A theme that supports RTL languages sets dir="rtl" on the html element when the active locale is Arabic, Hebrew, Persian or Urdu, usually with a line in theme.liquid that checks request.locale. Dawn and most current themes do this; some older themes do not, and a store on one of those shows Arabic text inside a left-to-right layout, which looks wrong everywhere, not just in a gallery.

Snug Gallery renders inside that page as a theme app block. It does not set a direction of its own and it does not read the locale. Everything it draws inherits whatever the theme decided, which is the right default: a gallery that forced left-to-right on an Arabic page would be the thing that looks broken. So the first check, before anything in the app, is to open the storefront in the RTL language and confirm the theme itself has flipped. If the navigation and footer are still left-to-right, the fix is in the theme, not the block.

Grid, rows and collage: nothing to do

The three tiled layouts are built on CSS grid and flexbox, and both of those follow the document direction automatically. In a right-to-left page the first image of a grid sits in the top right corner and the row fills leftward, which is exactly the reading order an Arabic or Hebrew shopper expects. The row layout, which computes each image's width from its aspect ratio so a line of photos ends flush on both sides, does the same arithmetic and lays the result out from the right. Collage tiles, which are placed by grid area, mirror along with the grid.

There is no setting for this and nothing to test beyond a glance. The order you set in the editor is still the order shoppers see, read in their direction. If you have a gallery where the sequence tells a story, say a before, during and after of a renovation, that story now runs right to left, which is what the shopper is reading anyway.

Captions and the filter bar

Caption text is set to inherit its alignment from the surrounding page, so Arabic captions align to the right under or over their image without any change. Mixed content behaves the way the browser handles it everywhere else: a caption that is mostly Hebrew with a Latin product code in it renders as bidirectional text, with the code reading left to right inside a right-to-left line. If a caption looks scrambled, the cause is almost always punctuation at the boundary between scripts, and the cure is the same as in any text field: put the Latin part in its own sentence or wrap it in parentheses.

The tag filter bar is a row of flex items, so the chips start at the right in an RTL page and the All chip, which is first in the markup, sits where a right-to-left reader looks first. The counts in the chips are numbers and stay as they are. Tag names come from whatever you typed, so if you want Arabic chips you write Arabic tags; the filter matches the string exactly in either case, as described in the filtered gallery links guide.

Two small things do not flip. The Powered by Snug Gallery line under a gallery, when it is shown, is aligned to the physical right, which in an RTL page is the start of the line rather than the end. And the customer photo submission form aligns its labels to the physical left. Neither breaks anything; both look slightly off to a careful eye, and both are on the list to move to logical properties.

The lightbox

Opening an image full screen works the same in either direction. The two things to know are the arrow keys and the arrows on screen. The keyboard mapping is fixed: the left arrow key always goes to the previous image and the right arrow key always goes to the next, where previous and next mean the order in the editor. In a left-to-right page that matches the visual arrangement. In a right-to-left page the previous image was visually to the right of the one you clicked, so the left key moves you to the image that was on your right. Most RTL users have met this in other galleries and in image viewers generally, because almost nobody flips arrow keys, but it is worth knowing before a customer asks.

Swiping on a phone follows the images, not the keys, so a shopper dragging towards the next image gets the next image. Escape closes, the caption shows below the image aligned with the page direction, and video plays as it does elsewhere; the lightbox guide covers the rest.

The slider: the one layout to avoid for now

The slider layout is a horizontal scrolling track with snap points, previous and next buttons and a row of dots. To know which slide is current and whether the buttons should be disabled, the script reads the track's horizontal scroll position and divides it by the slide width. Browsers do not agree on what that position means in a right-to-left container: some count from zero upward in the scrolling direction, some count downward into negative numbers, and the behaviour has changed across versions. The result on an RTL page is a slider that shows the right images but whose dots highlight the wrong one, whose previous button may be disabled when there is somewhere to go, and whose autoplay can jump in an unexpected direction.

This is a known limitation, not a configuration problem, and the honest advice is to not use the slider on a right-to-left storefront until it is fixed. Every other layout is unaffected. The practical replacement is a grid or rows layout with fewer, larger images.

If your store runs an RTL language alongside English, you cannot set the layout per language; a block has one layout. Choose for the RTL case, since a grid works in both directions and a slider only works in one.

A checklist for an RTL storefront

Switch the storefront to the RTL locale and confirm the theme has flipped: navigation, footer, product page. If not, that comes first.

Open the page with the gallery and check the first image is at the top right for grid, rows and collage.

Read three captions, ideally one with a Latin product name in it, and fix any punctuation that renders out of order.

Open the lightbox, press the left arrow key, and note which way it goes so you can answer a customer in one sentence.

If the block uses the slider layout, change it to grid or rows in the theme editor. The images, captions and tags stay; only the arrangement changes.

If you also run a left-to-right language, repeat the first two checks in that locale. Snug Gallery stores one gallery for both; the theme decides the direction each time.

Frequently asked questions

Does Snug Gallery support RTL languages like Arabic and Hebrew?

The grid, rows and collage layouts, captions, tag filters and lightbox follow the direction your theme sets and need no configuration. The slider layout does not handle right-to-left scrolling correctly yet, so use one of the other layouts on an RTL storefront.

Why does the left arrow key go to the next image on my Arabic store?

Because the keys are mapped to previous and next in the editor order, not to screen direction. In a right-to-left page the previous image sits to the right, so the left key appears to move the wrong way. Swiping on a phone follows the images and is not affected.

Can I set a different gallery layout for the Arabic and English versions of my store?

No. A block has a single layout for all languages. Pick a layout that works in both directions, which in practice means grid, rows or collage, and let the theme flip it for the RTL locale.

My theme does not switch to right-to-left when I choose Arabic. Is that the app?

No. Direction is set by the theme on the html element, usually from the locale in theme.liquid. Snug Gallery inherits whatever the page has. If the whole page is still left-to-right, the theme needs an RTL rule or an update; the gallery will follow once it has one.