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 :
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 :
I need to deliver this project in 2 days I really need your help !!!!
Thank you
Hello WebWeave,
Do you want Add to cart in both variant similar to reference site.
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"> — <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! :)
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
4m ago | ||
11m ago | ||
15m ago | ||
25m ago | ||
49m ago |