How to add custom CSS to the Shopify Theme Customizer

How to Add Custom CSS to Your Shopify Theme

Customizing your Shopify store is a great way to stand out and align with your brand’s aesthetics.

Adding custom CSS allows you to modify the appearance of various elements across your entire online store, such as buttons, fonts, and color schemes, providing a consistent look that matches your brand identity.

Please note, however, that changes applied via custom CSS will affect all instances of the CSS classes found on your online store except for the Checkout page.

Prerequisites

• You must have access to your Shopify admin.
• Basic knowledge of CSS is recommended to make the desired changes effectively unless the CSS code has been provided for you.

Steps to Add Custom CSS

1. Navigate to Theme Customization:
   • Log in to your Shopify admin dashboard.
   • Go to Online Store > Themes.
2. Access Theme Settings:
   • Find the theme you want to edit and click Customize.

     

3. Open Theme Settings:
   • In the theme editor sidebar, click on Theme settings.
4. Add Custom CSS:
   • Within the Theme settings menu, select Custom CSS.
   • A text box will appear where you can input your custom CSS code. Here, you can add or modify styles that will apply to your entire store.
5. Save Your Changes:
   • After adding your custom CSS, click Save to apply the changes.

Example Use Case

Suppose you want to change the default color of all buttons in your store. Providing your buttons use the class “button”, you could add the following CSS:

button { background-color: #yourColorCode; /* Replace #yourColorCode with your desired hex color code */ }

By inserting your custom CSS code, you can quickly implement site-wide design changes, enhancing your store’s visual appeal and user experience.

Additional Tips

• Backup Your Theme: Before making any changes, consider duplicating your theme. This precaution ensures you have a backup that can be restored if needed.
• Test Changes: After applying your custom CSS, navigate through your store to ensure the changes appear as expected and do not affect website functionality.