Palo Alto Doumentation
NewSupport
Palo Alto 4.0
Palo Alto 4.0
  • Palo Alto Theme Documentation
  • Online Store 2.0
    • The new experience
  • Header
    • Announcement bar
    • Transparent header
    • Logo and store name
    • Using the Palo Alto Mega Menu feature
  • Sections
    • How to use sections
    • Recommended Image Sizes
    • Product sections
    • Image sections
    • Text sections
    • Custom sections
  • Products
    • Using the new Palo Alto Product Pages
    • Creating new Product page templates
  • Collections
    • Using the new Palo Alto Collection Pages
    • Filtering options
  • Popup
    • Popup with image
    • How to change the "You agree to..." text
    • Cookie consent
    • Popup bar
  • Footer
    • How to remove the Shopify credit
  • Blogs
    • Using the new Palo Alto Blog Pages
    • Creating new Blog page templates
  • Pages
    • Using the new Palo Alto Pages
  • Updates
    • Checking your theme version
    • Downloading the latest version
  • Support
    • Contacting support
    • Updating your theme
    • Sharing a preview link
  • Custom
    • How to add Custom Color Swatches
    • How to make CSS customizations
    • How to add Custom Fonts
Powered by GitBook
On this page
  • How to open the code editor
  • Alternatives and "theme.dev.css"
Export as PDF
  1. Custom

How to make CSS customizations

Adding your own custom styles and CSS overrides to the theme

PreviousHow to add Custom Color SwatchesNextHow to add Custom Fonts

For developers and to make minor CSS style modifications, use the Code Editor and add your custom CSS overrides at the bottom of theme.css located in the Assets folder.

How to open the code editor

Click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions, choose Edit code.

Alternatives and "theme.dev.css"

As you have probably noticed, "theme.css" is minified and you won't be able to easily change the styles. This is where the "theme.dev.css" file comes in handy.

This file is not minified and holds the exact same code but in a much more user-friendly layout. While you can certainly change the styles in it, these changes won't take effect on your live store. The reason for this is that this file is not read by default.

To activate it, you need to access the "theme.liquid" file and replace the instances of "theme.css" on lines 9 and 44 with "theme.dev.css".

Note: Minified CSS is slightly faster so using "theme.css" is also slightly faster.