How to use custom CSS?

Want to take your store’s design to the next level? This guide shows you how to add custom CSS to your Shopify theme, allowing you to fine-tune the appearance of elements beyond the default theme settings. Whether you're adjusting fonts, colours, spacing, or layout styles, using custom CSS gives you full control to create a truly unique storefront experience.

• Step 1: Log in to your Shopify admin

• Step 2: In the left-hand sidebar, click Online Store, then select Themes.

• Step 3: Find the theme you’re using and click the “Customize” button.

• Step 4: Right-click on the element you want to style and click “Inspect” (or press Ctrl+Shift+I / Cmd+Option+I on your keyboard). This will open your browser’s developer tools and highlight the element in the code. Copy the class, ID, or HTML structure you want to target with CSS. 

• Step 5: Return to the theme editor tab, and in the left sidebar, click Theme Settings, then locate the Custom CSS section.

• Step 6: Add your custom CSS code: Paste the selector you found and write your custom CSS rules. 

For example, if you want the button to be bigger or smaller

• Step 7: Click Save, then refresh your storefront to see your custom styles applied.

Troubleshooting Tips

• App Widget Not Showing?
  Double-check that the toggle is set to "On" and that you’ve saved your changes. If it’s still not appearing, ensure your theme supports app embeds (most modern Shopify themes do!).
  
  
• Need Additional Help?
  If you have inquiries, please do not hesitate to reach out to us via our email at [email protected] or via chat.