Matching an Online Store's Look and Feel to Season and Stock. Behind a Shopify Implementation Enabling Intuitive Layout Changes.

Members

Writer

Akari Yamashita

Dev

It’s been about a month since we launched the AFURI BREWING website.
Day-to-day operations seem to be running smoothly, and as the team behind it, that’s a relief. This time, we wanted to dig a little deeper into the CMS story from one of the posts we put out showing what goes on behind the scenes of production.

For mount, this was our first e-commerce site in a while.
And for me personally, it was also my first time building on Shopify.
With that as the backdrop, I want to look back on the trial and error that went into building it on Shopify.

1. Building a Homepage the People Running It Can Reach Intuitively

For this website, we built the following pages entirely from scratch, without using any existing theme (template), to match our own original design.

Top page
https://afuribrewing.com/
About page
https://afuribrewing.com/pages/about
Product listing page
https://afuribrewing.com/collections/all
Product detail page
https://afuribrewing.com/products/afuri-ipa

Of all of that, in this article we want to focus on the part that’s most distinctive to the AFURI BREWING site: the content area of the homepage.

What defines the homepage’s content area is that its layout can be freely customized.

Depending on the season or on stock levels, it can shift between things like:
🛒 A layout that lines up plenty of products to push beer purchases
💐 A more emotive layout that conveys AFURI BREWING’s spirit, intent, and warmth
📢 A layout for seasonal announcements and greetings
…and more — the homepage is built to change its expression like this.

So that, day to day, even someone who isn’t a designer or engineer could freely rearrange the layout, we built this mechanism using Shopify’s standard theme editor.*

* The theme editor is a tool that lets you intuitively customize an online store’s design and layout on screen, without writing any code.

So how do we control the layout without ever touching code?
Here’s a look at the concrete mechanism behind it.

2. A Two-Tier Block Structure That Keeps the Design From Falling Apart

The homepage’s content area is built, broadly speaking, out of two elements: “rows” and “cards.”
It’s a simple structure — inside a “row,” which stacks vertically, up to four columns’ worth of “cards” line up side by side.

Within a given “row,” the number of cards, their order, their size, and the type of content on them can all be freely changed. At the same time, we deliberately fixed the look of each individual card, and the layout rule that automatically right-aligns a row.
By keeping “the overall combination free” while making sure “the design and spacing rules of each individual part stay intact,” we built a system where the design naturally holds together no matter how the person managing it rearranges things.

3. The Technical Walls We Ran Into

The Theme Editor’s Constraints

Making this mechanism work meant running into technical constraints specific to Shopify.

This build lets you freely set a card’s width anywhere between one and four columns. But if whoever’s running the site puts, say, a “3-column” card and a “2-column” card into the same row, that adds up to five columns, and the layout breaks.
Ideally, we wanted Liquid (Shopify’s templating language) to calculate the total column count ahead of time and surface an error message before that could happen. But as we dug into it, it became clear that wasn’t possible.
So we ended up baking a hidden error message into the row template in advance, and handling the decision of whether to show it in a separate layer.

The Problem of Not Being Able to Read the Column Count

The reason Liquid couldn’t do the calculation comes down to a specification of Shopify’s newer block structure.

Blocks can be nested inside one another, but the parent and child blocks are each rendered independently by design.
In other words, there was no way to reach directly, from the “parent block” (the row), into the values held by the “child blocks inside it” (the cards). The approach that’s completely ordinary in web production — looping through the children’s data with a for-loop and adding it up — simply didn’t work in this environment.

* This article used AI to help with the translation.

How We Solved It

We decided it was too hard to solve entirely within Liquid, and took the approach of calculating and judging it in JavaScript after the DOM had rendered.

When the page loads, JavaScript adds up the width of each card, and if the total goes over four columns, it adds a class to the parent row element and surfaces the error message.

Adjustments like right-aligning a row whose total comes in under four columns, or toggling the display of navigation labels like “BEER & GOODS,” are handled through that same mechanism. By covering, on the front end, the parts that Liquid’s specification simply couldn’t handle, we managed to get the behavior working exactly the way we wanted.

4. Looking Back on My First Shopify Build

This was my first time building a Shopify theme, and my first time writing Liquid, too.
I remember that when the project first started, the anxiety of “can I actually pull this off” outweighed everything else.

Consulting with Okabe, our technical director, and making good use of AI along the way, I kept testing and retesting to get it into as manageable a shape as I could.
Still, I got knocked back again and again by the theme editor’s and the block system’s particular quirks. Implementation didn’t move the way I wanted it to, and there were more than a few moments where I felt genuinely frustrated, thinking, “Shopify and I are just not clicking…”

Nevertheless, facing each constraint one at a time, keeping my hands moving every day, and doggedly grinding through test after test, it slowly started coming together.

Even with a technology you've never touched before, testing it one step at a time steadily moves you forward. After all that trial and error, the plain joy of finally getting it to behave exactly as I'd pictured made me feel, for real, "so this is what an engineer's sense of accomplishment feels like." It was an enormous experience.

* This article used AI to help with the translation.