Dawn theme variant auto select disable

ChaletEtCeci
Shopify Partner
8 0 0

Hi,

I'm trying to disable the auto selecting the first variant option available.

howeveer, I have a custom swatch and need help with the code.

 

            {% assign option_name = "Color,Style,Colour" %}

{% assign swatch_size = '3vw' %} {% comment %} Change the color swatch size below.{% endcomment %}
{% assign swatch_shape = 'round' %} {% comment %} Change the swatch shape. Use either 'round', 'square', 'rectangle' or 'round-edge'. {% endcomment %}

{%- assign variants_available_arr = product.variants | map: 'available' -%}
{%- assign variants_option1_arr = product.variants | map: 'option1' -%}
{%- assign variants_option2_arr = product.variants | map: 'option2' -%}
{%- assign variants_option3_arr = product.variants | map: 'option3' -%}

{%- unless product.has_only_default_variant -%}
{% assign picker_type = block.settings.picker_type %}
{%- if picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset {% if option_name contains option.name %} class="swatchComponent" style=" padding: 0;" {% else %} class="js product-form__input" style="border:none" {% endif %}>
{% if option_name contains option.name %}
<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
<div id="panelPrecios" class="swatchContainer">
{% assign productVariantImage = "" %}
{%- for value in option.values -%}
{%- for productOption in product.variants -%}
{%- if productOption.options[0] == value -%}

{% if productOption.metafields.custom.variant_color_image != blank%}
  {% assign productVariantImage = productOption.metafields.custom.variant_color_image %}
{% else %}
  {% assign productVariantImage = productOption.featured_image %}
{% endif %}
  
{%- endif -%}


{%- assign option_disabled = true -%}
                        {% for option1_name in variants_option1_arr %}
                          {% case option.position %}
                            {% when 1 %}
                              {% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                            {% when 2 %}
                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                            {% when 3 %}
                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                          {% endcase %}
                        {% endfor %}

  
{%- endfor -%}
<div class="amin_product ">
<input  class="inputColor rr"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
type="radio"
id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
{% if option.selected_value == value %}checked{% endif %} {% if option_disabled %}class="disabled"{% endif %}>
<label  data-toggle="tooltip" class="labelColor"
for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
data-color="{{value | downcase | replace: ' ', '-' }}"
style="
{% case swatch_shape %}
{% when 'round' %} border-radius: 50%; aspect-ratio: 1;
{% when 'square' %} aspect-ratio: 1;
{% when 'rectangle' %} height: calc({{swatch_size}} / 2);
{% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
{% endcase %}">
<img loading="lazy" data-toggle="tooltip" media="{{ productVariantImage }}" src="{{- productVariantImage | img_url: 'small' | uniq -}}" title="{{ value | escape  }}" alt="{{- productVariantImage.alt -}}">


</label>
    <div class="tooltip_product">
    <img loading="lazy" class="tooltip"  media="{{ productVariantImage }}" src="{{- productVariantImage | img_url: 'small' | uniq -}}" alt="{{- productVariantImage.alt -}}">
</div>
  </div>
  
{% endfor %}
</div>
{% else %}
<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
{%- for value in option.values -%}
  {% assign otpionsize= option.name | downcase %}
{% if otpionsize == 'size' %} 
  {%- assign option_disabled = true -%}
  {% for option1_name in variants_option1_arr %}
                          {% case option.position %}
                            {% when 1 %}
                              {% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                            {% when 2 %}
                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                            {% when 3 %}
                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
                                {%- assign option_disabled = false -%}
                              {% endif %}
                          {% endcase %}
                        {% endfor %}
  {% endif %}
  
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %} {% if option_disabled %}class="disabled"{% endif %}>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" class="options">
{{ value }}
</label>
{%- endfor -%}
{% endif %}
</fieldset>
{% endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}

<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
{% if option_name contains option.name %}
<variant-color>
<fieldset class="swatchComponent" style=" padding: 0;">

<legend class="form__label">{{ option.name }}<color-name></color-name></legend>
<div class="swatchContainer">
{% assign productVariantImage = "" %}
{%- for value in option.values -%}
{%- for productOption in product.variants -%}
{%- if productOption.options[0] == value -%}
{% assign productVariantImage = productOption.featured_image %}
{%- endif -%}
{%- endfor -%}
<input class="inputColor"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
type="radio"
id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
{% if option.selected_value == value %}checked{% endif %}>
<label class="labelColor"
for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
style="
{% case swatch_shape %}
{% when 'round' %} border-radius: 50%; aspect-ratio: 1;
{% when 'square' %} aspect-ratio: 1;
{% when 'rectangle' %} height: calc({{swatch_size}} / 2);
{% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
{% endcase %}">
<img loading="lazy"  class="tooltip" src="{{- productVariantImage | img_url: 'small' | uniq -}}" alt="{{- productVariantImage.alt -}}" >
</label>
{% endfor %}
</div>

</fieldset>
</variant-color>
{% endif %}

<div class="product-form__input product-form__input--dropdown" {% if option_name contains option.name %}style="display: none"{% endif %}>
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select {% if option_name contains option.name %} colorSelect{% endif %}"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}">
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
<script>
class VariantColor extends HTMLElement {
constructor() {
super();
this.inputColors = this.querySelectorAll('.inputColor');
this.inputColors.forEach(color => color.addEventListener('click', this.colorSelected.bind(this)));
}

colorSelected(event) {
const select = document.querySelector(`.colorSelect`);
const item = event.currentTarget.value;
select.value = item ;
}
}

customElements.define('variant-color', VariantColor);
</script>
<style>
fieldset{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}

.swatchComponent {
display: flex;
margin-bottom: 20px;
box-sizing: border-box;
position: relative;
border: none;
}

.swatchContainer {
display: flex;
flex-wrap: wrap;
width: 70%;
}

.inputColor {
display: none;
}

.labelColor {
width: 2.5vw;
margin: 1%;
display: flex;
justify-content: center;
align-items: center;
border: var(--variant-pills-border-width) solid #e5e5e5 !important;
cursor: pointer;
overflow: hidden;
transition: all .3s ease;
}

.labelColor:hover{
transform: scale(1.1);
}

.labelColor img {
object-fit: cover;
width: 100%;
height: 100%;
}

.inputColor:checked + .labelColor + .infoColor {
display: flex;
}

.inputColor:checked + .labelColor {
outline: 2px solid;
border: 2px solid white;
}



  .tooltip:after {
    opacity: 0;
    content: "";
}
.tooltip:hover:after { 
    opacity: 1;
    transition: opacity  0s linear 1s;
    content: attr(att-name);
    position: relative;
    top: -15px;
  	left: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: gray;
    color: white;
}


  .amin_product {
    position: relative;
    margin: 1%;
    width: 3.5vw;
    display: flex;
    transition: all .3s ease;
}

.tooltip_product {
    position: absolute;
    z-index: 1;
    display: none;
    right: -74%;
}
.amin_product:hover .tooltip_product {
    display: block;
}

.tooltip_product {
    position: absolute;
    padding: 5px;
    width: 141px;
    height: 149px;
    background: #fff url(https://www.lurdesbergada.es/world/themes/syngman-cucala2/css/../../../img/color-hover-image.png) no-repeat;
    z-index: 2;
    top: 83%;
    right: 50%;
    transform: translate(46%, 10px);
    background-repeat: no-repeat;
    background-size: cover;
}
img.tooltip {
    width: 100%;
}

img.tooltip {
    position: absolute;
    top: 12px;
    width: 91%;
    left: 6px;
}


  
</style>

 

Can you please let me know which code I need to remove?

Thank you

 

my website is 

www.shopchaletetceci.com

 

Replies 3 (3)

Dirk
Shopify Staff
2340 253 518

Hey, @ChaletEtCeci 

 

I'm not formally trained in code to provide you with an exact solution to disable the auto selector for product variants. However, I'm confident one of our Shopify experts would be able to accomplish this at a reasonable price.
 
Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

Could you please explain exactly why you want this? Perhaps I can help.

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
ChaletEtCeci
Shopify Partner
8 0 0

Hi,

 

It's variant option is currently selecting the first variant option automatically when customer view the product.

Please see the  image below,

But I would like to not have the option selected automatically instead, I want to display like  please choose color, please choose size.

option.png