As a cartoonist, Gumroad is great: it allows me to easily sell PDF e-books and physical merch in the same place and doesn't charge a monthly fee. It even has an automated integration with Printful, which I use to make shirts and totes.
But as a designer, I have serious issues with the way Gumroad website displays its product "cover" images.
Note: Screenshots below have been taken from the excellent Kyle T Webster Photoshop brush pack store. I'm using it as an example because Gumroad uses it as a case study and because it's very popular among illustrators and cartoonists.
Issue 1: Product titles are hard to read
On desktop view, the product title doesn't appear unless you mouse over it:
It's only a little better on mobile, where it uses a way-too-clever script to detect when a user has scrolled to that product, at which point the white text shows up. (To make matters worse, the detection mechanism fails if you scroll fast.)
Furthermore, did I mention that the product-title text is backed by a wispy shadow that makes the text hard-to-read on certain images:
Note that Kyle's own workaround here is to put the product title inside the image, near the top and in bold.
Issue 2: Gumroad's recommended image sizes get cut off
Gumroad's own recommended image sizes don't work very well. They recommend wide rectangles of 670x335 or 670x500.
So this is a 670x500 image from Kyle's store:
And this is what it looks like on mobile:
The image is similarly truncated if you arrange your store profile on desktop view to use squares as Kyle does for parts of his store:
Issue 3: Image is broken in single-product view on mobile
Gumroad's single-product lightbox on mobile is broken:
(That grey space is not supposed to be there. The frontend code, for some reason, forces the image container to be 670 pixels tall.)
While there's nothing we can do about number three (the broken lightbox), there are workarounds for the product title and for the images being cut off. We have two options:
You'll notice that most of his product uses square images with large product titles on top:
Here's what it looks like on mobile:
As you can see, it works pretty well. The bottom part of the image does get cut on mobile, but it's non-essential. And the price tag does eat into the title a little bit, but you can still read it.
However, Kyle's workaround didn't quite work for me because the price tag kept eating into my product titles. Admittedly, it was because I didn't want to jack up the font to be super-sized as he does. Nor did I, as in another one of Kyle's examples below, place the title squarely on the left:
My current workaround
My current workaround for my own Gumroad store is to use the recommended 670x500 image but:
- I add a product title to the bottom of the image (away from the price tag)
- I leave a blank space on the left and right edges (these get cut when the layout is square) and make sure the text doesn't flow over
Essentially, it's a 500x500 image placed in a 670x500 container. For example:
Nothing from the top or bottom gets cut, so it's easier to plan for than Kyle's square-image workaround. Looks great on desktop and great on mobile:
However, there is one major downside. When the mouseover/scroll script triggers the automated product text, it competes with the one in the image:
In short, my workaround is not a perfect solution either, and I'd advise you to try both workarounds on your own products/store before choosing one.
Despite all of that, as a cartoonist, Gumroad is still the best option for me. I really wish I didn't even have to think about these workarounds but there's currently no similar service with the features I need. So – dear Gumroad, I love your product... but could you please fix it?