Palo Alto 6.2.1 has been released
Release notes
Palo Alto Doumentation
NewSupport
Palo Alto 4.6
Palo Alto 4.6
  • Palo Alto Theme Documentation
  • Changelog
    • The new experience
    • What's new in 4.6
  • Header
    • Announcement bar
    • Transparent header
    • Mega Menu
    • Highlighted link
    • Logo
  • Sections
    • Target Settings
    • How to use sections
    • Recommended Image Sizes
    • Highlight words
    • Palo Alto sections
      • Collection list
      • Featured collection
      • Featured product
      • Products list
      • Tab collections
      • Marquee
      • Custom content
      • Grid
      • Image accordions
      • Image with text
      • Overlapping images
      • Shop the look
      • Slideshow
      • Split images
      • Video
      • Banner with text columns
      • Blog posts
      • Contact form
      • Custom Code
      • Icons row
      • Locations
      • Newsletter
      • Press/Logo
      • Shoppable blog posts
      • Tabs
      • Testimonials
      • Text
      • Text columns with images
      • Promotion row
      • Divider
  • Upsell
    • Upsell
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Product Grid
      • Quick shop
      • Cart
      • Loading icon
      • Checkout
      • Theme style
      • Buttons
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-order
    • Theme blocks
      • Title and price
      • Form
      • Product description
      • Accordions
      • Upsell
      • Share button
      • Text
      • Icon
      • Icon row
      • Inventory countdown
      • Popup text
      • Divider
      • Cutline
      • Complementary products
    • Swatches
    • Product ratings
  • Collections
    • Collection Pages
    • Filtering options
    • Sub-collections
    • Collection pages promo
    • Cutline
    • Badges
  • Popups
    • Popups
    • Popup Behavior
  • Footer
    • Footer
      • Logo
      • Link list
      • Text
      • Blog
      • Newsletter
    • How to remove the Shopify credit
  • Blogs
    • Blog Pages
    • Creating blog page templates
    • Recommended posts
  • Pages
    • Pages
  • Updates
    • Checking your theme version
    • Downloading the latest version
    • Updating your theme
  • Support
    • Contacting support
    • Sharing a preview link
  • Custom
    • How to make CSS customizations
    • How to add Custom Fonts
Powered by GitBook
On this page
  • Customize the trigger words
  • Colors
  • Customizing
  • Add custom color names and values to swatches.json
  • Add custom images to the assets folder
  • Disabling swatches
Export as PDF
  1. Products

Swatches

PreviousComplementary productsNextProduct ratings

Palo Alto will display swatches for color variants in collection filtering and the product form on product pages.

Palo Alto will detect if your variant label is Color or Colour and automatically display swatches

Customize the trigger words

To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:

You can add more trigger words that will help use swatches for other options.

The result is the same and you can use different custom swatches as well.

Colors

Palo Alto can easily detect simple color names and convert them to swatches. There are a total of 140 color names Palo Alto can detect, all other more complex names will be represented by a default grey color swatch.

Customizing

Add custom color names and values to swatches.json

Use the swatches.json file located in the Assets folder to add your own custom names and HEX color values:

Add custom images to the assets folder

With Palo Alto, you can upload your own custom swatch images and display them on product and collection pages.

How to:

  • Create a small square image (60x60 or 100x100 for best results)

  • Upload to the Assets folder

  • Modify swatches.json to include your color name and image

Disabling swatches

Swatches can be toggled on and off in the Theme settings under Product Grid:

You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches:

If your products have color names other than the listed colors in the , you can add your own color names and values or upload images to the Assets folder:

To find additional HEX color codes, visit:

Color names list
Color names list
https://colorhunt.co
Product form, default product template
Change trigger words by using the Language Editor