Finished Collection-branded pages

This may just be a placeholder. I’m trying to backfill some content that I did not have the time to write in the last quarter of 2024.

Collections

Collections are a generic meta-category for Shopify. We are using them as “sub-brand” classifications. So each game-line has its own “collection”. Products are then assigned to one or more collections.

One challenge we had was that we wanted each game line to have a slightly different visual style. “Blister Critters” is significantly different, tonally, from “Stillfleet”.

There were two challenges here:

1. Define the differentiable points for the visual displays
2. Tell shopify to display the correct visual version for a given collection

Differentiating visual style

The first one was mostly a branding thing. The team handled that.

I created different CSS files for each visual style. This set fonts, colors, backgrounds, etc.

Differentiating stylesheet inclusion

This was a little trickier.

What I did was to add a data-attribute to the body tag that displays which collection you’re viewing.

Then in the individual stylesheets, I put all styles beneath body[data-brand="stillfleet"] (or whatever), so that they only apply on that given page.