How do you separate a product option of color into two categories "Essentials" and "Limited Edition" on Shopify?

user_12519477 0
Viewed 264

The colors should be rendered as radio buttons with a background color of different products are listed in en.default.json. I want to separate the colors displayed on the product page as limited edition colors and essentials as shown on the Girlfriend website

Girlfriend website.

"colors": {
  "white": "FFFFFF",
  "black": "000000",
  "raw": "707070"
}

The following is the code to force colors from the en.default.json in the locales directory:

{% assign value_handle = value | handleize %}
{% assign color_translation_key = 'product.colors.' | append: value_handle %}
{% assign color_hex = color_translation_key | t %}

{% unless color_hex contains 'translation missing' %}
  <span class="option-color color-{{ value_handle }}">
    <span class="option-color-inner">
      <span class="color-swatch" style="background-color: {{ color_hex | prepend: '#' }};">

      </span>
      <span class="visually-hidden">
        {{ value }}
      </span>
    </span>
  </span>
{% else %}
  {{ value }}
{% endunless %}

The color options are rendered as radio buttons in the product page if the product has a color option:

{% for value in option.values %}
  {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
  <input class="variant-radio" id="{{ radio_id }}" type="radio" name="{{ option_name }}" value="{{ value }}" {% if value == selected %}checked{% endif %}>
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
{% endfor %}
shopify liquid json javascript
1 Answers

I assume you just need to split colors into two groups but still allow to choose only one color. In other words, you want visually separate them. If so, you can create a variable with a list of colors from one group e.g. essential colors:

{%- assign essential_colors = "Red,Green,Blue" | split: "," -%}

After that duplicate the code that is used to render color swatches. Use the original code to render essential colors only, by matching the option title:

{% for value in option.values %}
  {%- if essential_colors contains value -%}
     ...code to render essential color swatches...
  {%- endif -%}
{% endfor %}

...and then use the duplicated code to render other colors:

{% for value in option.values %}
  {%- unless essential_colors contains value -%}
     ...code to render other color swatches...
  {%- endunless -%}
{% endfor %}
user_15689630
Related