Modular documentation
Support
Modular latest
Modular latest
  • Modular theme documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Announcement bar
      • Background video
      • Blog posts
      • Collections list
      • Contact form
      • Custom code
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Recently viewed products
      • Rich text
      • Slideshow
      • Split content
      • Split hero
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Theme Settings
    • Theme settings
      • How to make changes
      • Colors
      • Typography
      • Buttons
      • Appearance
      • Search
      • Product grid
      • Product form
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
      • Custom CSS
  • Header
    • Announcement bar section
    • Header
      • Transparent header
      • Logo
      • Mega menu
  • Footer
    • Footer
      • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
  • Products
    • Product pages
      • Pre-order
      • Product ratings
      • Creating new product page templates
    • Blocks
      • Price and title
      • Form
      • Product description
      • Social share
      • Store availability
  • Collections
    • Collection pages
      • Creating more collection page templates
      • Customizing the collection list page
    • Badges
  • Pages
    • Page templates
  • Blogs
    • Blog pages
      • Creating new blog page templates
  • Popups
    • Popup section
  • License
    • Theme license
  • Custom
    • Custom
      • How to add custom color swatches
      • How to make CSS customizations
      • How to set up custom filtering options
      • How to add custom fonts
  • Online Store 2.0
    • The new experience
  • FAQ
    • Frequently asked questions
      • Checking your theme version
      • Downloading the latest version
      • How to use sections
      • Section settings
      • Theme settings
      • Reordering sections
      • Hiding sections
      • Adding sections
      • Recommended image sizes
        • Product images
        • Blog images
        • Slideshow section images
        • Catalog banner images
        • Product feature images
      • Updating your theme
      • Sharing a preview link
      • How to remove the Shopify credit
  • Support
    • Contacting support
Powered by GitBook
On this page
Export as PDF
  1. Custom
  2. Custom

How to add custom color swatches

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