Fluorescent
Cornerstone
Cornerstone
  • Cornerstone Help Center
    • Start using Cornerstone
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 heading tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Colors
    • Fonts
    • Animation
  • Pages
    • Templates
      • Home page
      • Blog page
      • Blog posts
      • Collections list page
      • Contact page
      • Customer accounts
      • Password page
      • Search page
      • 404 page
    • Sections
      • Section styles
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list
      • Collection list buttons
      • Contact form
      • Countdown banner
      • Countdown bar
      • Featured collection
      • Featured collection with media
      • Featured product
      • Grid
      • Icon with text columns
      • Image hero
      • Media with content split
      • Multi-column
      • Newsletter
      • Newsletter compact
      • Overlapping media with content
      • Promotion grid
      • Quick links
      • Rich text
      • Sales banner
      • Scrolling content
      • Slideshow
      • Tabbed collections
      • Testimonials
      • Video hero
    • Popups
      • Sign up popup
      • Age verification
      • Countdown signup popup
      • Promotional popup
  • Header
    • Announcement bar
      • Language selector
      • Country selector
      • Social media icons
      • Announcements
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
    • Mobile menu
    • Search bar
  • Footer
    • Footer
      • Contact and social block
      • Links block
      • Logo block
      • Newsletter and social block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom liquid
  • Products
    • Product listings
      • Layout and style
      • Product card details
    • Product badges
    • Quick shop
  • Product pages
    • Product template
    • Layout and style
      • Media gallery
      • Sticky product details
      • Recommended products sidebar
      • Breadcrumbs
      • Navigation buttons
      • Gift card recipient form
    • Overview blocks
      • Product header
      • Description
      • Variant selector
      • Buy buttons
      • Share icons
      • Collapsible rows block
      • Complementary products
      • Custom option
      • Customer support block
      • Image block
      • Image with text block
      • Information popup
      • Product labels
      • Payments and trust
      • Stock level indicator
      • Text block
      • Text columns with icons
      • Text list with icons
      • App blocks
    • Variant options
      • Chips
      • Swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
      • Media grouping
    • Product recommendations
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • 1. Create and upload custom swatch images
  • 2. Set up product variants

Was this helpful?

  1. Product pages
  2. Variant options
  3. Swatches

Use custom images

Last updated 4 months ago

Was this helpful?

Using custom images for swatches is great for product variants that have patterns or textures. Custom swatch images require image file names and variant names that match, which we will cover below.

Adding custom swatches images involves two general steps: (1) Create and upload your custom swatch images and (2) Set up your product variants with matching names.

1. Create and upload custom swatch images

For each product variant, you need to create a PNG image by screenshotting or cropping your product images. Each swatch image needs a file name that matches the variant name in your product options.

For example, if the product variant is called "Sea Blue", the swatch image file must be named sea-blue.png.

If your store uses multiple languages, make sure to upload swatch images with file names that match the translated name of your product variants, for each language.

For example, if your store uses English and German, you need two swatch image files for the default variant name (yellow.png) and the translated name (gelb.png).

STEPS
  1. You can create PNG image files by taking a screenshot (step 2) or cropping your product images (step 3).

    We recommend images with minimum length or width of 70px.

  2. Screenshots: Use the built-in screenshot tool on your computer to capture swatches from your existing product images:

    Windows:

    Mac:

  3. Cropped images: Alternatively, crop a section of your product photo with a photo editing application (like Preview or Photoshop).

    Windows:

    Mac:

  4. Save your images as PNG files with a file name that matches the variant name. File names must be in lowercase and use hyphens instead of spaces. Add image files for each store language matching the translated variant name.

    For all image files, use lowercase only (no capitals):

    Variant name
    File name

    Gray

    gray.png

    Green

    green.png

    For variants with multiple words, use hyphens - instead of spaces:

    Variant name
    File name

    Sea Blue

    sea-blue.png

    Red and Blue

    red-and-blue.png

    For multiple languages, add image files for each language with the translated names of the product variant:

    Language
    Variant name
    File name

    English

    Yellow

    yellow.png

    German

    Gelb

    gelb.png

    French

    Jaune

    jaune.png

  5. Once you have renamed your swatch images, go to Content > Files in your Shopify admin.

  6. Click the Upload files button in the top-right corner and add all your swatch image files. You can select multiple files at once.

  7. Go to Step two: Set up your product variants.

2. Set up product variants

Once you've uploaded your images, you need to set up your product variants with names that match the file names of your swatch images.

STEPS

In your Shopify admin:

  1. Go to Products and click the product you want to edit.

  2. Under Variants, click Add options like size and color checkbox if you're adding variants for the first time.

  3. Add the Option name (e.g. "Color" or "Material").

    Remember to add this option name in your Theme settings to enable swatches.

    See Shopify's for more information about product options.

  4. Add the Option values (product variants) with a name that corresponds to the correct swatch image file.

    For example, if you've uploaded dark-blue.png as a swatch image, the product variant must be named Dark Blue.

    If your store uses multiple languages, add the translated variant names using feature.

    Variant name
    File names

    Green

    yellow.png, gelb.png, jaune.png

    Sea blue

    sea-blue.png

    Red and blue

    red-and-blue.png

  5. Preview your store to confirm that the swatches now appear.

    If the theme cannot locate a matching swatch image for a color variant, a White swatch is shown. In this case, make sure the file names match the variant name, use hyphens - instead of spaces, and are all lowercase (no capitals).

  6. Click Save.


Related links

Enable swatches
Use default color swatches
Use custom color swatches
Change swatch styles
Show swatches on product cards
Enable dynamic option availability
How to use Windows Snipping Tool
Take a screenshots on your Mac
How to Crop Images on Windows
How to crop an image in Preview on Mac
Variants guide ↗
Shopify's Translate & Adapt