Advice and answers from the Keficommerce Team

Individual Swatches: Manually adjust colors & images per variant

Shivam Tiwari
Written by Shivam Tiwari

While global settings help you set a style for your entire store, sometimes you need surgical precision. For example, your "Navy Blue" might look different across different fabric collections, or you might want to upload a high-resolution texture for a specific limited-edition item.

The Individual Swatch Configuration tool allows you to step inside a specific option name and fine-tune every individual value manually.

When to Use Individual Configuration

  • Brand Precision: When a standard HEX code doesn't capture the exact shade of your product.

  • Texture Details: When you need to upload a specific image (like carbon fiber or marble) for one color while keeping the rest as solid colors.

  • Special Cases: When one variant (e.g., "Rainbow") needs a custom image, but other variants (e.g., "Red," "Blue") stay as standard colors.

Step-by-Step Guide

1. Locate the Option Row

  1. Open the Product Page Settings tab.

  2. Find the option you want to edit.

  3. Ensure the Display Style is set to a visual type, such as Circular or Square Swatch.

2. Enter the Configuration Menu

  • On the far right of the option row, click the Configure button.

  • A sliding panel or new view will appear, listing every unique Value currently found in your Shopify catalog for that option.

3. Update the Visual Data

For each value (e.g., "Midnight Blue"):

  • To Update the Color: Click the color picker or type in a specific HEX code.

  • To Upload a Custom Image: Click the Upload icon. Select a high-quality image of your product's texture or pattern.

  • To Preview: Look at the small preview circle next to the value name to see how it will appear to your customers.

4. Save Your Settings

  1. Once you have finished making adjustments to individual values, click the Update button at the bottom of the configuration screen.

  2. The changes will instantly reflect on your storefront.

Best Practices for Fine-Tuning

Consistency in Textures

If you are uploading custom images for textures, try to use the same lighting and zoom level for all files. This prevents one swatch from looking "zoomed in" while others look far away.

Handling "Missing" Swatches

If the app finds a new variant value in your Shopify admin that you haven't configured yet, it will display a default color. Periodically check the Configure menu to see if any new values have been added to your catalog so you can assign them the correct visual.

The "Clear" Function

If you make a mistake or want to go back to the global default, look for the Reset or Clear option within the configuration window. This will remove your manual override and revert the swatch back to the automatic color or image.

Need Help?

Our support team is dedicated to helping you build a beautiful storefront: