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
Export as PDF
  1. Custom

How to add Custom Color Swatches

PreviousUpdating your themeNextHow to make CSS customizations

Color swatches in our Modular theme are saved inside the 'swatches.json' file. You can find this file by going into your Online Store > Themes and clicking on Actions > Edit code.

Use the search bar to find the 'swatches.json' file inside of the Assets folder.

This file holds references to custom color names assigned to color codes. These color codes are then used to set the custom color swatches.

You can edit the existing color codes to change the shade of the color by using any HTML-supported color code method you'd like (HEX, RGB, HSL, and so on).

You can take this a step further and also use images to give your swatches a specific texture. To do this, all you need to do is upload a small 'png' image into the same Assets folder and replace the color code assigned to the swatch you're looking to change with the exact file name.

If you don't find your custom color variant as part of the ones that come preloaded without theme you can add it manually to this file and assign a color code or a custom image to it just as we did above.

The new custom color swatch will require you to add a bit of code. We recommend adding this code near the bottom of the file, right after the last swatch closing bracket:

,
{
  "new color name": "new color code/image"
}

Make sure that the comma from the code snippet starts right after the closing curly bracket of the previous color swatch.