I’m almost always working with WordPress - however - over the last few years I keep getting asked about Shopify. I’m not really all that into it but I do like to try and help where I can, so I often find myself making slight design modifications to commercial themes as needed.
One really irritating thing (and perhaps I’m doing it wrong, I’m not a Shopify expert by any means) is that a lot of these third-party themes people purchase have little to no documentation and very little consistency with how they’re put together. I’m not a fan of spending two hours digging through the theme files to sort out the organization and nomenclature of everything the original developers did just to spend 20-30 mins building something “quick” out. I don’t mind spending the time to learn new things but again it seems like all of these themes are so different not much translates outside of the fundamentals.
The only thing I’m ever really doing is putting together custom sections/blocks to try and achieve a look that the theme doesn’t have out of the box, but I’m pretty hesitant to make edits to a theme I don’t have much familiarity with.
The solution for me was to put together a section.liquid template that I could drop into any (most?) themes to build out stuff in a pinch without making any modifications to the code itself, I’m calling it my Shopify Multi-Tool 🛠️️.
I put it together with a goal of it being used both as a base to start from for fully custom sections as well as just something that lets me get a lot done as it stands.
You can review the whole thing over at GitHub - but - here’s the general summary of what it offers:
- Base Styling: Basic styling (like background colors and padding) is fully supported and configurable directly within the Shopify UI.
- Advanced Styling: Add custom CSS classes and use a dedicated Custom CSS field with Liquid support.
- Responsive Control: Separate settings for managing Desktop and Mobile Layouts.
- Easy Targeting: Blocks include unique UIDs for CSS and JavaScript targeting.
- Content Insertion: Liquid hooks available before and after blocks for injecting custom Liquid.
- Blocks Included: Ready-to-use Heading, Rich Text, Button, Image, and Custom Liquid blocks.
I did my best while putting it together to make use of CSS variables and inline styles per block to keep everything dry and tried to add in enough classes and unique identifiers for the different elements without causing a bunch of bloat.
Headings, Rich Text, Buttons, and Images are like 90% of what I’m doing most of the time, so those blocks generally cover it for me. I added a bunch of standard style options to each of them, but if I need to do anything crazy, I can add in custom Liquid before and after the block element – or just use the Custom Liquid block to do something custom entirely.
It’s no page builder, but I can get pretty far using this without touching the theme, so I’m pleased with it for now.
One thing I’m still trying to sort out with Shopify is the best way to have multiples of the same section added to a page without having the same/similar JavaScript added each time. I haven’t looked too deeply into it, but that’s definitely something I need to address.
If you’re interested, you can take a peek at what I put together over at GitHub.
If anybody has input or just wants to tell me it sucks, I’m happy to hear it, still very much figuring Shopify out as I go.