Gallery order on Shopify: manual, newest, A to Z or random

The order photos appear in is a decision most people make once, by dragging, and never revisit. Then the gallery grows to eighty images, the new ones land at the bottom where nobody scrolls, and the question comes back. Snug Gallery has four sort modes: manual, newest first, alphabetical and random. They do different jobs, they run in different places, and one of them quietly disables drag-to-reorder. This guide explains each so you can pick on purpose.

The four modes in one table

Manual: the order you set in the editor by dragging tiles. This is the default and the only mode in which the drag handles do anything.

Newest first: the most recently added items come first, so a gallery you keep topping up always leads with fresh material and nothing needs to be dragged.

Alphabetical: items are sorted by their alt text, A to Z, ignoring case. Items with no alt text sort to the front.

Random: items are shuffled every time the page loads, so two visitors, or the same visitor on two visits, see a different order.

You pick the mode in the gallery editor under Order. It applies to the whole gallery everywhere that gallery is shown, which matters if you use one gallery in several blocks; the mode is a property of the gallery, not of the block.

Where the ordering happens, and why it matters

Manual and newest first are decided when Shopify renders the page. The gallery block reads the stored list of items in the order you arranged it; for newest first it reverses that list before writing any HTML. The browser receives tiles already in the final order, and so does anything else reading the page, including Googlebot, a screen reader, or a shopper with JavaScript disabled.

Alphabetical and random are decided in the browser. The block writes the items in stored order, each tile carrying its alt text as an attribute, and the small script that ships with the block reorders the tiles as soon as it runs, before the masonry layout is calculated and before the lightbox is wired. The reorder is a reshuffle of existing elements, not a second download, so nothing is fetched twice and the page weight is unchanged.

The practical consequence is that the page source and the rendered page can disagree. In random mode the HTML always lists your manual order; the shuffle you see in the browser is not what a crawler stores. For alphabetical mode the HTML is also in manual order, but a crawler that executes JavaScript will see the sorted result, as Google generally does. If the order of images on a page matters to you for search, the guidance in Shopify gallery images in Google image search applies: alt text and the surrounding page do far more work than position.

Random is not random for the first image

Because the shuffle runs in the browser, the first tile in the HTML is still your first manual tile until the script executes. On a fast connection that is a few milliseconds and invisible. On a slow phone there can be a brief moment where the page shows the manual order and then rearranges. The script runs before the masonry layout, so tiles do not jump after being positioned, but a visitor who has scrolled quickly may notice the swap at the top of a long gallery.

Two things follow. First, put your strongest image first in manual order even when the gallery is set to random, because that is the one that occupies the first-tile slot during loading and the one a crawler sees. Second, random mode suits galleries where every item is roughly equal: a wall of customer photos, a mood board, textures. It suits a portfolio badly, where the first three pieces are chosen for a reason. The layout trade-offs are in Masonry, grid, carousel or collage; random mode works with any of them, and is least noticeable in masonry, where tile heights already vary.

Alphabetical sorts by alt text, so write alt text

There is no separate title field for sorting. Alphabetical mode uses each item's alt text, falling back to the media's own alt in Shopify Files and then to the gallery title if both are empty. The comparison is locale-aware and ignores case, so Ánimo sorts next to animo and Zebra does not come before apple because of a capital letter.

Three habits make alphabetical mode behave. Give every item alt text, because empty strings sort first and a cluster of untitled tiles at the top looks like a bug. Lead with the word you want to sort on: Ceramic bowl, blue sorts under C, while Blue ceramic bowl sorts under B. And remember that numbers sort as text, so 10 comes before 2 unless you pad them: 02, 10. Alphabetical mode is most useful for catalogues, team pages and anything a visitor might scan for a name; a fabric swatch library sorted A to Z is far more usable than one sorted by upload date.

Newest first is the low-maintenance choice

If the gallery is a feed, a running record of installations, events, or customer photos you add to each week, newest first means you never reorder anything. Add the photo, it appears at the top. Combined with the per-gallery limits on your plan, a newest-first gallery is also a simple way to keep a page current: the oldest images are the ones furthest down, and the ones to delete when you hit the limit.

Because newest first is decided at render time, it is also the right mode when order is part of the story for search. An event recap page that leads with this year's photos, in the HTML, is a page whose content visibly changes when you update it. That is a small, honest signal of freshness that random and alphabetical cannot give.

Why drag-to-reorder disappears

Open a gallery in the editor with Order set to anything other than Manual and the tiles no longer drag. The editor shows a note instead: drag-to-reorder is available when Order is set to Manual. This is intentional rather than a limitation. If you could drag in newest-first mode, the drag would be undone the moment the page rendered, and you would file a bug. Hiding the handles makes the rule visible.

Your manual order is not lost when you switch modes. It is still the stored order; the other modes are applied on top of it. Switch back to Manual and the tiles return to where you left them, which is also why the advice above about putting a strong image first still applies in random mode.

Filters, lightbox and sort order

Tag filters work on top of whichever order is active: filtering to one tag hides the other tiles and keeps the current order among the ones that remain. The lightbox follows the displayed order too. After the script reorders tiles for alphabetical or random mode it renumbers them, so pressing next in the lightbox moves to the tile the visitor sees next, not to the tile that was next in the stored list. If you link to a pre-filtered view, as described in Linking to a filtered Shopify gallery, the filter applies after sorting in the same way.

Choosing

Manual when position carries meaning: portfolios, lookbooks, anything with a hero image and a story. Newest first when the gallery is a feed you add to and you want zero upkeep. Alphabetical when visitors scan for a name and you have written alt text for every item. Random when every item is equivalent and you want repeat visitors to see something different, accepting that crawlers and the first paint see your manual order instead.

Whatever you choose, Snug Gallery renders from your store's own Files through Shopify's CDN, and the mode can be changed at any time without touching the theme; the block picks up the new order on the next page load.

Frequently asked questions

Why can't I drag images to reorder my Shopify gallery?

In Snug Gallery the drag handles are only active when the gallery's Order setting is Manual. In newest first, alphabetical or random mode the display order is computed, so dragging would have no visible effect; the editor hides the handles and shows a note explaining why. Switch Order back to Manual to drag.

Does random gallery order hurt SEO?

Not materially. The shuffle happens in the visitor's browser, so the HTML a crawler receives always lists the images in your manual order. Alt text and the page's own text decide how images rank, not their position in a grid. Keep your strongest image first in manual order, since that is the one in the first slot in the source.

What does alphabetical order sort by in Snug Gallery?

The item's alt text, with the media's alt in Shopify Files and then the gallery title as fallbacks. The sort ignores case and uses locale-aware comparison. Items with no alt text sort to the front, so give every item alt text before choosing this mode.

If I change the sort mode, do I lose my manual order?

No. The manual order is the stored order of the gallery and the other modes are applied on top of it at render time or in the browser. Switching back to Manual restores exactly the arrangement you had.