Add Color Swatches to the Venture Theme

BRADIENT
Tourist
4 1 2

1. Edit snippets/product-card.liquid

2. Add the following code between:

<div class="selector-wrapper js product-form__item">.......<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>

 

 

...
<div class="selector-wrapper js product-form__item">

                {% if option.name == "Color" %}

                <label>{{ option.name }}</label>
                {% assign index = forloop.index %}

                <div class="variant-swatches">
                  {% for value in option.values %}
                    <input class="single-option-selector single-option-selector-{{ section.id }}" id="color-{{ forloop.index }}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{% endif %} />
                    <label for="color-{{ forloop.index }}">
                      <img src="{{ value | escape | append: '.jpg' | strip | asset_url | downcase }}"/>
                    </label>
                  {% endfor %}
                </div>

                {% else %}

                <label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
...

 

 

3. Add swatch color image at 40x40px jpg in the assets/blue.jpg

4. Add the following CSS code to the bottom of your assets/theme.scss.liquid or your custom.scss

 

 

.variant-swatches {
    display: flex;
    justify-content: start;
}
.variant-swatches input {
    display: none;
}
.variant-swatches label {
    width: 40px;
    height: 40px;
    margin-right: 5%;
}
.variant-swatches label:last-child {
    margin-right: 0;
}
.variant-swatches img {
    width: 40px;
    height: auto;
    border-radius: 50%;
}
.variant-swatches input:checked + label {
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    padding: 2px;
}

 

 

5. Done

Source: https://www.youtube.com/watch?v=JmyQNJTt4gQ

0 Likes