Modular documentation
Support
Modular 3.1
Modular 3.1
  • Modular Theme Documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Blog posts
      • Collections list
      • Contact form
      • Custom HTML
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Rich text
      • Slideshow
      • Split hero
      • Tabs
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Announcement
    • Announcement bar section
  • Header
    • Transparent header
    • Logo and store name
    • Mega Menu
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-Order
    • Product ratings
  • Collections
    • Collection Pages
    • Creating more Collection page templates
    • Customizing the Collection List page
    • Badges
  • Pages
    • Pages
  • Online Store 2.0
    • The new experience
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Search
      • Products
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
  • Blogs
    • Blog Pages
    • Creating new Blog page templates
  • Footer
    • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
    • How to remove the Shopify credit
  • Popups
    • Popup section
  • Updates
    • Checking your theme version
    • Downloading the latest version
  • Support
    • Contacting support
    • Sharing a preview link
    • Updating your theme
  • Custom
    • How to add Custom Color Swatches
    • How to make CSS customizations
    • How to set up custom filtering options
    • 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 set up custom filtering options

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, and choose Edit code:

Alternatives and "theme.dev.css"

On some versions of Modular, "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.