"i only speak liquid" #13: Custom upsells using Tailwind CSS 🍃

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Tony) share learnings we face daily. This is my 1st edition of 4 before we rotate out to another developer. Hope you enjoy it!  

PS: I'm an expert on Storetasker: It’s a gated network of vetted Shopify developers. Apply here if you want in.

What I’ve been thinking about:

I’ve been thinking a lot about custom upsell carousels using Tailwind CSS & Shopify CLI.

The great thing about using Tailwind CSS here that it significantly reduces the time it takes to write CSS, and it re-uses CSS classes, so you keep CSS files small (faster load times).

I wrote out an entire piece on how to do this with all the code snippets you might need here. Hope you find it useful!

3 links you can’t miss:

•  Tailwind UI - Now that you know how to use Tailwind CSS in your Shopify theme development workflow, explore all the ready-to-deploy components made with Tailwind CSS using Tailwind UI and skyrocket your productivity.

• Shopify VS Code Extension - The official Shopify VS code extension permits you to use liquid in VS code without triggering warnings or errors; also, it allows you to use the auto-complete feature for liquid, comment code blocks using the {% comment %} tag with a hotkey, perform theme checks to find errors in a theme and other perks.

• Shopify CLI - If you are not using the Shopify CLI, you are missing massive gains in productivity during your coding workflow. It’s much easier to develop a theme locally than using the web tool on the Shopify admin. Check it out!

One app I like:

Oberlo by Shopify

Even though I’m not a big fan of dropshipping (returns could drive negative margins easily), I firmly believe in dropshipping for market research.

With drop shipping, you can import products to your Shopify store without risking your inventory, find out what products bring good sales, and then you can consider sourcing inventory in your warehouse.

A small-risk, big-rewards way to market research, and Oberlo makes it easy.

One learning as a freelancer:

I don’t enjoy QA as a typical programmer. Quality assurance is time-consuming and hard because you need to think outside the logic you used to create your software, and it requires building testing cases.

However, I wanted to increase my retainers this year. So, I hired a customer retention consultant who convinced me to make QA my first priority.

I usually do unit testing for my javascript, a functional test for key features, and check fonts, font sizes, margins, paddings, widths, heights, etc. I try to make everything pixel-perfect.

I also explore the functionality of a store before working with them and check the functionality is intact after I finish implementing my code.

Since I started doing a deep QA, I discovered that my repeated customers increased, my number of revisions decreased, and clients would recommend me to their colleagues, acquaintances, and friends more.

So, take QA very seriously. Focus on quality brings big rewards in the mid-term.

-Tony