Custom CSS
Creators can customize the look and feel of their profile and product pages with custom CSS.
Custom CSS Workshop
Custom CSS Reference
This is not an exhaustive list by any means, and we encourage you to explore the possibilities of custom CSS snippets.
What is CSS?
CSS (cascading style sheets) functions as the aesthetic DNA of a website, telling the HTML that makes up the framework of the page how it should "look." Any changes you make to the CSS will not affect the links or the structure of the page - it will just affect the look of the page.
If you've never worked with CSS before, we recommend checking out W3schools or some Youtube tutorials to learn how to work with CSS.
Specifically, if you want to learn how to locate the elements of a page that you want to adjust, we suggest checking out Traversy or any Youtube tutorial about finding CSS Selectors.
How to enable CSS snippets
On your profile page you will see a STYLE button in the navigation bar. This is an example from the profile page.
Click Style and you will see a dropdown menu, with a box for Custom CSS snippets.
For example, if you wanted to make ALL of your product pages' purchase forms red, you would enter:
.buy-form-main {
background-color: red !important;
}
Then you would add additional CSS snippets to adjust your pages below the bracket.
Enter your code snippets into your Custom CSS box, separated by line breaks, then click Update account details to save all changes. Changes will go live immediately.
Below are a number of elements for you to target. If you feel that some are missing on the page, let us know!
Product Pages
Your product page is the individual page of an individual product. There are quite a few things to customize on this page.
Rather than providing you with a giant list of possible CSS functions on the page, here are a few CSS selectors you can target:
The author byline:
.author-byline
The purchase form:
.buy-form-main
The font of your product description:
.product-main blockquote.product-description
The price tag:
h2.product-price-tag
h2.product-page-tag:before
Check out this product for some go-to templates!
The Facebook, Twitter, Email buttons:
#product_page .sharing,#user_page .sharing
The product's payment form:
#product_page#wrapper,#product_page#wrapper .product-row
The "# left" banner on products with a limited quantity:
.products-left-container
Versions/Variants:
.variant-holder__variant-option__price-tag
The "Powered by Gumroad" button:
.powered-by-footer
Preview arrows:
.preview-arrow
.preview-arrow.next
.preview-arrow.previous
Profile Pages
Profile pages are where all of your products are listed in one place. Learn more about them here!
Here are a few things to target:
Your bio:
.seller-main .bio
The background of your bio:
.seller-main
The product filter column:
.product-filters__column
The follow button and prompt:
.creator-profile-card .creator-profile-card__form, .creator-profile-card--medium .creator-profile-card__form, .creator-profile-card--small .creator-profile-card__form
The product information box over your product covers:
.product-card .product .product-main .product-information
The "Powered by Gumroad" button:
.powered-by-footer
Follow Page
Learn more about the follow feature here!
.creator-profile-card__name
#user_page .wrapper.showing-no-products .creator-profile-card--medium
.creator-profile-card__bio=
.profile-picture-large .profile-picture
.creator-profile-card--medium .creator-profile-card__social
The "Powered by Gumroad" button:
.powered-by-footer
Product Download Page
Hide the "Send to Kindle" button:
.kindle-button { display: none; }
More resources:
- A free course on CSS
- Peter Jausovec is a Gumroad creator who specializes in CSS tricks. See his store and his Github profile for more snippets. He's also posted a very cool thread on Reddit about automating his own CSS templates
- Here are some old snippets available on Github
- "CSS in 44 Minutes" - a Gumroad product