The Shopify ✹Course

The Shopify ✹Course

It’s been a long time coming, but it’s finally here! You can read all the official marketing copy on the ilovecreatives enrollment page, so on this blog I want to talk about the behind the scenes and my philosophy when creating the curriculum.

Screenshot from the course trailer where I am high fiving myself in the bottom right corner 😂😂

Shooting the trailer video in LA was an absolute BLAST. I was laughing the entire day, riffing with Puno (who is a great Creative Director), and doing all kinds of skits and dancing on the blue screen.

“If you don’t come for the code, at least come for the dancing”

Highlights of the LA trip: 143 Save the Last Dance (I’m in the recap video!), Mama’s Nightmarket, sharing freelancing notes with Puno, and making Gina giggle while I recorded voiceover.

See post on Instagram @ilovecreatives

What’s the course about?

It’s about making themes, dude. Which is something I’ve always been obsessed with. You probably don’t know this, but I used to make Xanga themes back in the early 00’s. Xanga was a platform that actively resisted customization. Compared to those days, Shopify is a breeeeze!

This course is not about drop shipping or marketing or any of the stuff you normally find when you search “Shopify Tutorial” on Youtube. It’s about the nerdy shit—the design and the development of the theme.

But not too nerdy! I’ve seen a lot of Youtube tutorials that are made for developers who already know other programming languages. And those are waaaay too complex for beginners. Not to mention, they don’t even cover design!

When creating this course, I intentionally focused on the space between design and development by referencing the 90’s–00’s concept of a “webmaster” or a “web designer” who is a jack of all trades. From basic server knowledge to pixel perfect front-end development, the web designer is a generalist across disciplines, yes—but a specialist in web design.

Technical Details

If you know me, you know that I’ve been a huge web design nerd since middle school—and my favorite language has always been CSS. Shopify Liquid gives me the same energy as CSS did when it launched in the early 2000s. Just like CSS, it’s a language with a very opinionated yet minimal syntax that lets you focus on the front end.

The most exciting thing about Shopify, compared to other platforms, is the ability to edit all the HTML. For example, if your product title looks like this:

<h1>{{ product.title }}</h1>

You can just open the code editor and change the HTML to this:

<h1 class="funky">{{ product.title }}</h1>

Now you have the CSS class .funky to style to your heart’s content! It makes this whole e-commerce thing feel reminiscent of making handmade websites.

I mean, come on, can you think of another mainstream platform that lets you directly edit the HTML? Not Squarespace, not Webflow, not WordPress (as of twentytwentytwo), not Cargo.

Sure, you’ve got your Headless CMS and static site generators, but to be a web designer in that space you’ve got to have pretty advanced developer chops. For web designers who don’t want to deal with servers, deployments, or dependencies, but still want advanced customization… there’s Shopify Themes.

I waffled a lot on how much CSS to cover, how much to talk about freelancing, and how to explain arrays to non-developers. I came up with a really good metaphor for that one, actually. The finished product is a really good balance of educational examples that teach underlying concepts. And I’m going to keep on working on it and iterating, because it’s a living product that will shift and grow with time!

Acknowledgements

A ton of people helped (and are continuing to help!) with this course. If I forgot to mention you, let me know!

Puno, Maggie, Gina, Yewande, Chelli, Bambi, Hanna, Crissy, Sarah, Mindy, Daniel, alexwifi, Patrick, Mike, Nathalie, Spencer, A. Dorantes–Contreras, Harold, George, Elina, Paulina, Nikki

Thank you everyone! ❤️

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.