How to Add a Splash of Color to Your Shopify Dawn Variant Picker

Once upon a time, in the vast world of e-commerce, we were but humble shop owners, navigating the digital seas of Shopify themes. Imagine, one quiet afternoon, sipping our coffee as we meticulously curated the look of our online store, when a sudden realisation hit us like a freight train. The variant picker? It looked, well, bland. I mean, come on—text for the product variants? We dreamed of something more visually captivating, a zingy pop of images instead. We knew it was time. Time to dive deep into the world of Shopify code and revolutionize the way our customers interacted with our products. Let's embark on this transformative journey together, shall we?

The Great Canvas of Code: Painting Images over Text

Now, if you’ve ever dabbled in code—or just heard the dreaded whispers of developers—modifying the theme feels like an art and science had a wacky high-five. But worry not, dear companion, because we're about to crack this code like eggs for a Sunday morning omelette. The Dawn theme is sleek and minimal, perfect for a fresh start, yet flexible enough to express our wild side.

Step 1: Preparing Our Workshop

Our first adventure is to ensure we have everything set to delve into the code. We'll jump into our Shopify admin, like knights gearing up for a quest. Ready? Find your theme under Online Store > Themes, and click on that cheeky little button, Actions, then select Edit code. The code editor is our canvas, though it might at first seem daunting, like a white whale in a sea of text.

Step 2: Locating the Style Wizardry

Next on our odyssey, imagine strapping on a headlamp and entering a virtual cave. We need to find our line of styling: base.css or maybe it’s named theme.scss. It’s nestled, no doubt, under Assets. This is where we’ll sprinkle our magic dust—code, that is—to bring our vision to reality.

Step 3: Summoning the Colors

The time has come. Here's the part where we change the mundane text to vibrant images. We'll add CSS rules to cozy up next to the existing style. Insert the code below into your stylesheet with a gentle touch, like adding basil to a simmering pot.

.product-form__input {
  display: flex;
  flex-wrap: wrap;
}

.product-form__input input {
  display: none;
}

.product-form__input label {
  cursor: pointer;
  margin: 3px;
  border: 1px solid #ddd;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center;
}

.product-form__input label:hover {
  border-color: #000;
}

.product-form__input input:checked + label {
  border-color: #000;
}

.label-image-variant-1 {
  background-image: url('/path-to-your-variant-image-1.jpg');
}
.label-image-variant-2 {
  background-image: url('/path-to-your-variant-image-2.jpg');
}
/* Repeat for all variants */

Step 4: The Finishing Touch

With glee, we return to our Sections directory and locate product-form.liquid. We add classes to our input labels that corral our desired images. It’s like dressing a llama in a fine top hat—unexpected and delightful.

Within the code:

{% for variant in product.variants %}
<input
  type="radio"
  id="variant-{{ forloop.index }}"
  class="label-image-variant-{{ forloop.index }}"
  name="id"
  value="{{ variant.id }}"
  {%
  if
  variant=""
  ="product.selected_or_first_available_variant"
  %}checked{%
  endif
  %}
  disabled="{{ variant.disabled ? 'disabled' : '' }}"
/>
<label for="variant-{{ forloop.index }}" class="label-image-variant-{{ forloop.index }}"
  >{{ variant.title }}</label
>
{% endfor %}

Reflecting on Our Creation

Ah, there it is—our creation brought to life, like Frankenstein, but with less lightning and more commerce. The variant picker now sings the sweet song of colorful images, enticing customers as bees to a technicolor floral patch. Who knew coding could be this invigorating?

And so, we return to our quiet place, freshly brewed coffee in hand, our store now a testament to our creative spirit and tireless dedication. In a world full of grey text, we dared to be different. Together, we painted with code and brought our visions to the digital world. Our Shopify store isn’t just a storefront; it’s an experience, and our variant picker now echoes that loudly and with vibrant clarity.