Product Page Design - Personalizing variant choice

Highlighted
New Member
7 0 0

Hi everyone, I'm working on a client store and he ask me to do the same as this website : https://www.aquabumps.com/product/bender/

 

I need to do like a mix of a dropdown / radio button for variants.

Here are my variants : product variants.JPG

 

 

The store I am building is using Motion Theme and can be found here :

www.karencoopergallery.myshopify.com

PW: Karen01$

 

Here's the link to an exemple product: https://karencoopergallery.myshopify.com/collections/abstracts/products/abstract-aspens-2?variant=21...

 

I need the variant choices to be like this : 

 

variant example.JPG

 

I need to deliver this project in 2 days I really need your help !!!! 

 

Thank you

 

 

0 Likes

Hello ,
 Do you want Add to cart in both variant similar to reference site. 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
7 0 0

Hi Pavalli, yes they want it to be exactly like the reference website! Here is the code :

{%- assign swatch_file_extension = 'png' -%}
{%- assign is_color = false -%}
{%- assign color_swatch_drop = option_drop -%}
{%- assign color_option_index = 0 -%}

{% if settings.product_color_swatches %}
  {% for option in product.options_with_values %}
    {% if option == color_swatch_drop %}
      {%- assign color_option_index = forloop.index0 -%}
      {%- assign downcased_option = color_swatch_drop.name | downcase -%}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% assign is_color = true %}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

<div class="variant-wrapper variant-wrapper--{{ settings.variant_type }} js">
  <label class="variant__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless settings.variant_labels_enable %} hidden-label{% endunless %}"
    for="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {{ option.name }}
    {% if is_color %}
      <span class="variant__label-info">
        &mdash;
        <span
          id="VariantColorLabel-{{ section_id }}-{{ forloop.index0 }}"
          data-option-index="{{ color_option_index }}">
          {{ option.selected_value }}
        </span>
      </span>
    {% endif %}
  </label>

  
  {% assign option_index = forloop.index %}
  <fieldset class="variant-input-wrap"
    name="{{ option.name }}"
    data-index="option{{ option_index }}"
    id="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
        
    {% for value in option.values %}
      {%- assign product_available = true -%}
      {% if product.options.size == 1 %}
        {%- assign product_available = product.variants[forloop.index0].available -%}
      {% endif %}

    
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {% if is_color %}
          {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
          {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
          >
            {{ value | escape }}
          </label>
        {% else %}
          <label for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"{% unless product_available %} class="disabled"{% endunless %}>{{ value | escape }}</label>
        {% endif %}
      </div>
    {% endfor %}
  </fieldset>
</div>

Thank you very much for your help and your time! :)

0 Likes
New Member
7 0 0

Hi everyone, I still need help. Don't ask for money, I'm not paid enough for this project to give a share.

0 Likes