How to add 2 colors divider in 1 color variant?

[withaudette]

Hi! I’m using the Be Yours Theme, and i would like to add 2 colors in 1 color variant like this:

Would anyone know how to do this? Thank you

[Thriveagency]

What You’re Trying to Do:

For example:

• Variant title: “Red/Blue”

• Display: A single swatch circle (or square) split between red and blue.

---

Step-by-Step: Add Two Colors in One Swatch### 1. Use Custom CSS for Split Color Swatches

You’ll need to edit your theme code to add custom swatch styles.

a) Go to:

Online Store > Themes > Be Yours > Actions > Edit Code

---

b) In the Assets folder, open base.css (or theme.css, whichever exists).

Paste this at the bottom:

css
.split-swatch { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1px solid #ccc; } .split-swatch::before, .split-swatch::after { content: “”; position: absolute; width: 50%; height: 100%; top: 0; } .split-swatch::before { left: 0; background-color: red; /* First color / } .split-swatch::after { right: 0; background-color: blue; / Second color */ }

---

2. Apply the Class to the Correct Swatch

Now you need to find the part of your theme where swatches are rendered.

In Be Yours, this is usually in a file like:

snippets/product-variant-options.liquid
or
snippets/product-form.liquid

Search for something like:

liquid
{% if option.name == ‘Color’ %}

Find the

or that renders the color swatch. Add a condition like:

liquid
{% if value == ‘Red/Blue’ %}

{% else %} {% endif %}

You may need to tweak the logic depending on how the theme handles swatches.

---

Optional: Dynamically Set Colors

You could extend this later by dynamically assigning colors based on the variant title using Liquid + inline styles. For example:

liquid

{% assign colors = value | split: ‘/’ %} {% assign color1 = colors[0] | downcase %} {% assign color2 = colors[1] | downcase %}

With updated CSS:

css
.split-swatch::before { background-color: var(–color1); } .split-swatch::after { background-color: var(–color2); }

---

If you want, I can look at your actual swatch code and tell you exactly where to paste it. Just copy-paste the relevant Liquid snippet here.

[withaudette]

Hi I’m still unsure how to do this, could you give me a step by step?

[Easify-Jolie]

Hi @withaudette

If you want to show 2 colors in 1 variant, like “White & Red,” I recommend using Easify Product Options. It allows you to create color swatches with 2 colors in a single option — and the best part is, no coding needed! You can easily set it up and show both colors in one variant, making it super simple for your customers to choose.

• This is the result:

• This is the app setting:

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know or reach out to Easify!