Gumroad's broken cover images + my current workarounds

in Tools & Tips

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:

Gumroad mouse over titles demo gif

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:

Gumroad product title text hard to read screenshot

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:

Original image screenshot

And this is what it looks like on mobile:

Truncated image 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:

Truncated image on desktop

Issue 3: Image is broken in single-product view on mobile

Gumroad's single-product lightbox on mobile is broken:

Gumroad mobile product lightbox screenshot

(That grey space is not supposed to be there. The frontend code, for some reason, forces the image container to be 670 pixels tall.)

The workarounds

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:

Kyle's workarounds

You'll notice that most of his product uses square images with large product titles on top:

Kyle's square image

Here's what it looks like on mobile:

Kyle's square image 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:

Kyle's square image alternative

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:

Cover image for my tote bag

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:

My Gumroad workaround in action 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:

Screenshot of my workaround

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?

By Jason Li

Share this post on

comments powered by Disqus