Custom CSS

Creators can customize the look and feel of their profile and product pages with custom CSS. An easy, free tool to help with this is Gumlane. But if you'd like to learn more, keep reading!

Custom CSS Quick Reference

This is not an exhaustive list by any means, but we encourage you to explore the possibilities of custom CSS snippets. Unfortunately, we don't offer a comprehensive list at this time but these snippets definitely should get you started:

• background for top of the page: .wrapper { background: white !important; }
• background color for products: .products-section { background: white !important; }
• background images: .products-section { background-image: url("https://photo's url"); background-repeat: no-repeat; }
• Hiding the Gumroad footer: .powered-by-footer { display: none; } 
• Your Creator name (Color and size): .creator-profile-picture-and-name .post-author { color: white !important; font-size: 21px !important; } 
• The bio text right under your creator name: .creator-profile-card__bio { color: white !important; font-size: 21px !important; } 
• Product names: .product-name { color: white !important; }
• Text for product descriptions: .product-description p { color: #d3d3d3 !important; }
• Text for lists in product descriptions: .product-description ul li { color: #d3d3d3 !important; }

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 Gumlane, a free tool built specifically for Gumroad that takes all the head-scratching out of 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 title of your product
.product-name,.product-main .product-information h1

The purchase form: 
.buy-form-main

The font of your product description: 
.product-description p

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

Product Download Page