A-Z Brand page

Shopify Discussion

Topic summary

A user is attempting to create an A-Z brand directory page on their Shopify store, modeled after a reference example. They’ve created a custom page template and snippet, but are encountering display issues:

Current Problems:

  • The page only displays correctly on mobile devices
  • Elements are not properly centered
  • Layout doesn’t match the intended design

Visual Context:
The user has shared three screenshots showing their desired outcome and current implementation issues.

Status:
The discussion remains open with the user asking for clarification on where to add suggested code or fixes. No complete solution has been provided yet.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I would like to create an A-Z brand page similar to the below. I have created a page template and snippet however they are not working. It is only showing on mobile and they are not centred etc.

evamc1010_0-1745407135121.png
evamc1010_0-1745407135121.png2456×1060 173 KB

evamc1010_1-1745407458177.png
evamc1010_1-1745407458177.png682×320 18.3 KB

evamc1010_2-1745407486163.png
evamc1010_2-1745407486163.png1154×862 55.3 KB

1 Like
2

Thank you for replying. Where exactly do I add these?

3

An A to Z brand page on Shopify has two main parts to get right: the template wiring and the layout. The issues you describe (only showing on mobile, not centered) usually come from the theme setup and one or two CSS rules.

Most of my merchants prefer a dynamic brand page that updates itself instead of a hard-coded list. The app they usually use for that is Brand Page Pro A‑Z Brands List on the Shopify App Store.

Theme checks:

  1. Make sure your custom page template (for example page.brand-index.json) is assigned to the page in Online Store → Pages → Template.
  2. In that JSON template, include the section that renders the brand list. A snippet on its own does nothing until a section or template calls it.
  3. Check your CSS so the section is not hidden on desktop with a media query and display: none.

If you were given code as a snippet and are not sure where to put it:

  1. Create a new section file in your theme and paste the markup there.
  2. Reference that section from your page.brand-index.json template so it actually renders.
  3. Assign that template to your A to Z page in the page settings.

Layout checks:

  1. Use a simple grid or flex layout for the brand tiles, with a sensible max-width and margin: 0 auto so the content is centered.
  2. Group brands under clear A, B, C headings so people can scan rather than scroll one long column.
  3. Test with very short and very long brand names and on a few breakpoints to make sure cards do not jump around.
  4. If the list is only centered on mobile, check for desktop media queries that override text-align or flex alignment and bring those back in line.

If you want to avoid maintaining the A to Z list by hand, you can have the index generated from your existing data so new brands and name changes stay in sync without editing the template each time.