For those not familiar with Gumroad, it is an online platform creators can use to sell their products. As a creator, you can sign up and create products you want to sell. You can pick from a couple of pre-defined templates to customize your page or just use custom CSS. I know CSS can be daunting to people who have never used it. To be honest, it also doesn't make sense for someone to learn CSS and figure out which classes to customize and how to do it. As a creator, you want to spend your time on creating your products, but you also want your products to have a unique look and you use brand colors for example. To help creators customize their Gumroad products, I am started working on Gumroad templates. In this first release, I have created a bundle of 1420 CSS templates that use 90 colors and 15 styles.
How did I do it?
Short answer: automation! My thinking was that if I figure out all variables and how they are connected, I could generate as many templates as I want in a very short time.
My first step was to not write any code at all, even though that's what I usually do. I spent an hour or some tinkering with Gumroad CSS customization, figuring out different CSS classes that were used, how are they applied, how different layouts impact how the components are displayed and so on. At a high level, you can customize your product page, the profile page and follow page on Gumroad. Each page has multiple components such as product cards, price tags, versions, and variant containers and more. All these use CSS classes that can be targeted and customized.
I knew I wanted to start with something small - I didn't want to spend too much time on customizing and perfecting something if no one would be using it. Now, you might say "Why even start creating something, if you don't know if there's a market?". It's a side project, I have learned stuff during this time and even if none looks at this and uses it, it's still valuable. It was either this, or Netlfix, so I figured it was a better use of my time.
I picked the price tag component to start with. It's a straightforward component that shows the price of your product and a strike-through price, in case the product is discounted, just like in the image below.
The main CSS class, involved with styling the price tag is product-price-tag. It's applied to an h2 element that contains the actual price in an element with price class and a span with class old-price (this is the price shown before any discounts).
The tool used here was Chrome Dev Tools - just inspecting the source, playing with the settings and applying them can take you a long way.
Once I understood the base classes, the next step was to create some templates. I created a simple template for the price tag and replaced the actual background and text color values with variables:
The next thing I needed was inputs or values for those three variables. With that, I could go through all combinations and create different CSS styles based on the above template. I came up with the following structure to represent a rendered CSS style (the above template, but with actual color values):
If the above gets applied to the previous template I would get a CSS snippet named red-100-black - note that I followed the same color naming as Tailwind CSS.
I wrote some Javascript to read these values in, run through them and output a new CSS file with actual classes that could be copy/pasted into Gumroad UI.
Having this piece of code helped a lot as the only thing I had to is to create another snippet with token names and values I wanted to replace and run the code. Before I went on to create a bunch of other styles, in addition to the default one above, I tested the generated snippets to make sure they show up correctly in the Gumroad UI and I have created a demo HTML file I can use to just open all styles locally, without the need to going through Gumroad.
That made everything so much faster as I could run the generator code, then open the .html file and I could see how all templates look like right away. With a way to test the CSS, I created more variants for price tags - the one across the top, a corner ribbon one, and a couple of more. Of course, that wasn't enough, I also wanted to use some gradients in the templates.
I followed the above pattern, create the gradient templates and a values file with token replacements:
There are more variables involved here, but the idea is exactly the same. Later, after I had all this working, I was refactoring the code more and I figured I could probably use the same values (tokens) for both types of templates. In the end, I could create a linear gradient that goes from red-100 to red-100 and it would look exactly the same as if the background color was set to the same value.
I am not sure if there are any performance implications to using linear-gradient vs. just a background color, but I haven't finished the refactor yet, so I might worry about that later if it will make sense (I doubt there's much of difference between the two if it's only used a small number of times on a page).
I took the automation a step further when generating the values for gradient components. Since I knew that I want the gradients to go from e.g. {color}-400 to {color}-600, it didn't make too much sense to copy/paste and manually create the values.
I used the colors from the Tailwindcss and created a JSON file with the color names and their HEX codes like this:
Luckily, I didn't have to type all these manually - I copied the colors from the CSS file and used multi-editing/search and replace to quickly get the CSS into the JSON format above.
Now to auto-generate the values for gradients, I had to read in the colors and iterate through all of them and create the JSON file with actual values for every token.
I ended up with a flow that takes a file with different colors and generates the values file (tokens + actual values for the tokens). The values file, together with the templates is then used to generate the final CSS.
Finally, I spent time and created design/sales/marketing material (not sure what the right word for it :) and writing the copy for the product you can check out here.
What did I learn, in no particular order:
Start small - No need to boil the ocean, pick a smaller piece first, understand it, automate as much as possible, then take another bite.
Automation and repeatability is the key - You could create everything that I did manually, without any automation. You'd probably spend a lot of time on it, and it wouldn't be repeatable. With automation, I can modify one template, add more color combinations and recreate everything in a couple of minutes.
I like to design/create - I enjoyed creating the different styles with product images and figuring out which colors fit together. Not that there was much 'design' here per-se, it was more of picking colors, but I enjoyed it nonetheless.
Sales/marketing/writing copy is hard - I am from a developer background, so writing sales and marketing text does not come naturally to me.
In conclusion, I might spend more time on this project, I really want to create a fully automated workflow where I can only pick the colors and end up with a full set of templates for every page. If you're interested in following along, you can follow me on Twitter.
Some stats
- Time spent on this (from Wakatime, so don't read too much into this): ~11 hours
- Time spent on creating the Gumroad product (design, copy,...): ~4hours
- Earnings: $0
Top comments (0)