For creators with more unique needs for their Gumroad product pages and profiles, we allow for the use of custom CSS.
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.
How to enable CSS snippets
On your profile page, follow page, and product pages, 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 form red, you would enter:
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.
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 purchase form:
The font of your product description:
The price tag:
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:
The "# left" banner on products with a limited quantity:
The "Powered by Gumroad" button:
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:
The background of your bio:
The product filter 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
Learn more about the follow feature here!
#user_page .wrapper.showing-no-products .creator-profile-card--medium