We do not provide support for code customizations
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

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Navigate to the section you want to edit and select it.

3. In the settings panel scroll to the bottom and open the Custom CSS option.

4. 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

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Navigate to the section you want to edit and select it.

3. In the settings panel scroll to the bottom and open the Custom CSS option.

4. 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

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Navigate to the section you want to edit and select it.

3. In the settings panel scroll to the bottom and open the Custom CSS option.

4. 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

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Navigate to the section you want to edit and select it.

3. In the settings panel scroll to the bottom and open the Custom CSS option.

4. 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

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Navigate to the section you want to edit and select it.

3. In the settings panel scroll to the bottom and open the Custom CSS option.

4. 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 bottom

   • Visit https://coolors.co/generate for an easy-to-use color picker

   .btn { background: #000000; border: #000000; color: #ffffff; }

Removing button focus border

1. Open the theme editor by clicking Customize next to the relevant theme.

2. In the settings panel scroll to the bottom and open the Custom CSS option.

3. 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.

View on GitHub