How to add custom CSS to the Shopify Theme Customizer

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.

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

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.

You can add specific CSS to Shopify Markets that are configured, simply select the market from the dropdown at the top

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 */ }

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