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. Or check out Sahil's tutorial above! 

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 title of your product
.product-main .product-information h1 

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 titles of your products: 
.product-card .product .product-main .product-information h1

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!