If you are not comfortable making code changes, we highly recommend hiring an expert developer. View Shopify experts
Summary
💡 Tip: Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.
Custom CSS can be applied to the Paper theme by using the built-in custom CSS feature in your theme editor. For advanced users who have more experience with development, you can also run Tailwind on a local machine to compile new CSS assets.
Using custom CSS
Custom CSS can be used in a variety of ways and is the perfect option for minor customizations. Here are a few guides for commonly requested customizations.
Applying a custom background color to a section
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code. E.g.
#000000
could be changed to#ffffff
.Visit https://coolors.co/generate for an easy-to-use color picker
section { background-color: #000000; }
Applying a custom heading color to a section
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code. E.g.
#000000
could be changed to#ffffff
.Visit https://coolors.co/generate for an easy-to-use color picker
h3 { color: #000000; }
Applying a custom text color to a section
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code. E.g.
#000000
could be changed to#ffffff
.Visit https://coolors.co/generate for an easy-to-use color picker
p, span { color: #000000; }
Adjusting button size
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste in the following code. Adjust any of the values to change the button as needed
.btn { font-size: 24px; padding: 10px 30px; }
Applying a custom button color to a section
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code.
In the below example,
#000000
can be replaced to change the background of the button,#ffffff
can be replaced to change the text color of the bottomVisit https://coolors.co/generate for an easy-to-use color picker
.btn { background: #000000; border: #000000; color: #ffffff; }
Removing button focus border
Open the theme editor by clicking Customize next to the relevant theme.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field.
a:focus { box-shadow: none; } .btn:not(.border--focus):focus { box-shadow: none; }
Advanced CSS customizations
For more advanced customizations we recommend using the Paper toolkit. Using the toolkit you will be able to harness the full potential of Tailwind. Please refer to the GitHub repo for more information.