Issue with colour swatches not working on small screen sizes after Afterpay and Zip code added

Solved
Tourist
4 2 0

Hello! First time posting so thanks in advance for any help :-)

 

I'm stumped. We are having an issue specifically on smaller screen sizes, whereby on certain product pages, the colour swatches aren't active and can't be selected. Desktop works fine, as does flipping phone screens to landscape mode.

 

Example page here: https://welcometohome.com.au/collections/fabric-sofa/products/jupiter-sofa-pair

 

View on a small phone screen size and you cannot select the swatches.

 

As you can see, there is Afterpay and Zip code snippets on there (as part of the product-template.liquid template).

 

Thanks in advance for reviewing.

 

I can provide the code. Just need edit it as I can't post in entirety due to it exceeding 20,000 chars!

 

0 Likes

Success.

Tourist
4 2 0

OK, here is the main part of code we need to look at:

 

<div class="product-template__container " itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
<div class="page-width">

<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}

{% case section.settings.image_size %}
{% when 'small' %}
{%- assign product_image_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{%- assign product_thumbnail_width = 'medium-up--one-third' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_image_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_image_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
{%- assign height = 1090 -%}
{%- assign enable_zoom = false -%}
{% endcase %}

<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
<div class="Product_image">
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}"{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
</div>
{% endfor %}

<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
</noscript>

{% if product.images.size > 1 %}
{% if product.images.size > 3 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}

<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for image in product.images %}
<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
{% endif %}
</div>
<div class="grid__item {{ product_description_width }} Product_description">
<div class="product-single__meta">

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
<p class="time"></p>

{% if section.settings.show_vendor %}
<p itemprop="brand" class="product-single__vendor">{{ product.vendor }}</p>
{% endif %}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">

<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
{% if current_variant.compare_at_price > current_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }}">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
</span>
{% endif %}
</p>



<!-- Meta tag -->
<!-- zipmoney widgets -->
{% include 'zip-widget' %}
<p><a style="cursor:pointer; color: black;" id="shopify-prod-calc" data-zm-widget="repaycalc" data-zm-amount="20" data-zm-info="true"></a></p>
<style>
#shopify-prod-calc{
position: relative;
right: 10px;
}
</style>
<!-- end zipmoney widgets -->


<!-- Begin Afterpay Liquid Snippet for Shopify v2.2.0 -->
{% assign afterpay_minimum_value_in_cents = 4 %}
{% assign afterpay_maximum_value_in_cents = 100000 %}
{% assign afterpay_logo_theme = 'colour' %}
{% assign afterpay_count_eligible_variants = 0 %}
{% assign afterpay_supported_currencies = 'AUD, NZD' | split: ', ' %}
{% if afterpay_supported_currencies contains shop.currency %}
{% for afterpay_variant in product.variants %}
{% if afterpay_variant.available and afterpay_variant.price >= afterpay_minimum_value_in_cents and afterpay_variant.price <= afterpay_maximum_value_in_cents %}
{% assign afterpay_count_eligible_variants = afterpay_count_eligible_variants | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
<script type="text/javascript">
(
function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments);
},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m);
}
)(window,document,'script','https://www.google-analytics.com/analytics.js','afterpay_ga');
afterpay_ga('create', 'UA-108913162-1', 'auto');
afterpay_ga('send', 'event', 'Liquid Snippet', 'Report Version', '2.2.0');
afterpay_ga('send', 'event', 'Theme', 'Report Name', {{ theme.name | json }});
afterpay_ga('send', 'event', 'Shop', 'Report Currency', {{ shop.currency | json }});
</script>
{% if afterpay_count_eligible_variants > 0 %}
<p class="afterpay-paragraph" style="display:{% if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.price >= afterpay_minimum_value_in_cents and product.selected_or_first_available_variant.price <= afterpay_maximum_value_in_cents %}block{% else %}none{% endif %};" data-product-id="{{ product.id }}">
or make 4 interest-free payments of
<strong><span class="afterpay-instalments">${{ product.selected_or_first_available_variant.price | divided_by: 4.0 | round | money_without_currency }}&nbsp;{{ shop.currency }}</span></strong>
fortnightly with
<a style="display:inline-block; margin-bottom:10px;" href="https://www.afterpay.com/terms" target="_blank">
<img style="vertical-align:middle;" src="https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}.png" srcset="https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}.png 1x, https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}@2x.png 2x, https://static.afterpay.com/integration/product-page/logo-afterpay-{{ afterpay_logo_theme }}@3x.png 3x" width="100" height="21" alt="Afterpay" />
<span style="font-size:12px;"><u>More info</u></span>
</a>
</p>
{% if product.price_varies or afterpay_count_eligible_variants < product.variants.size %}
<script type="text/javascript">
if (typeof Afterpay === 'undefined') {
var Afterpay = {products:[]};
Afterpay.loadScript = function(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState) { // I.E.
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
callback();
}
};
} else { // Others
script.onload = function() {
callback();
};
}
script.src=url;
document.getElementsByTagName('head')[0].appendChild(script);
};
Afterpay.init = function($) {
$('body').on('change', $('form[action^="/cart/add"]'), function(event) {
var $form = $(event.target).closest('form');
var $afterpay_paragraph = null;
var should_show_instalments = false;
var selected_variant_id = parseInt($('input[name=id]:checked, select[name=id], input[name=id], hidden[name=id]', $form).val(), 10);
if (isNaN(selected_variant_id)) {
var $variant_options = $form.find('input[name=id][value], select[name=id] option[value], hidden[name=id][value]').filter(function(index, element) {
return $(element).attr('value').match(/^[1-9][0-9]*$/);
});
$variant_options.each(function(index, element) {
$.each(Afterpay.products, function(product_index, product) {
$.each(product.variants, function(variant_index, variant) {
if (variant.id == $(element).val()) {
$afterpay_paragraph = $('.afterpay-paragraph[data-product-id=' + product.id + ']');
return false;
}
});
if ($afterpay_paragraph !== null) {
return false;
}
});
if ($afterpay_paragraph !== null) {
return false;
}
});
} else if (selected_variant_id > 0) {
$.each(Afterpay.products, function(product_index, product) {
$.each(product.variants, function(variant_index, variant) {
if (variant.id == selected_variant_id) {
$afterpay_paragraph = $('.afterpay-paragraph[data-product-id=' + product.id + ']');
if (variant.available && variant.price >= {{ afterpay_minimum_value_in_cents }} && variant.price <= {{ afterpay_maximum_value_in_cents }}) {
should_show_instalments = true;
$afterpay_paragraph.find('.afterpay-instalments').html('$' + (Math.round(variant.price / 4) / 100).toFixed(2) + '&nbsp;{{ shop.currency }}');
}
}
});
});
}
if ($afterpay_paragraph !== null) {
if (should_show_instalments) {
$afterpay_paragraph.show();
} else {
$afterpay_paragraph.hide();
}
}
});
};
if (typeof jQuery === 'undefined' || parseFloat(jQuery.fn.jquery) < 1.7) {
Afterpay.loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', function() {
var jQuery_1_12_4 = jQuery.noConflict(true);
Afterpay.init(jQuery_1_12_4);
});
} else {
Afterpay.init(jQuery);
}
}
Afterpay.products.push({{ product | json }});
</script>
{% endif %}
{% endif %}
<!-- End Afterpay Liquid Snippet for Shopify v2.2.0 -->

 

{% if product.metafields.afterpay.afterpay %}
<div class="after_pay">
{% for field in product.metafields.afterpay %}
<a target="_blank" class="afterpay ezypayinfo">
{{ field | last }}
<img style=" width:90px; margin-bottom:-7px;" target="_blank" src="{{ 'afterpay1.png' | asset_url }}">
</a>
{% endfor %}
</div>
{% else %}
<div class="after_pay">
{% for variant in product.variants %}
{% assign var check = variant.metafields.afterpay | first | last %}
{% if check %}
<a target="_blank" class="afterpay">
{% assign var abc = variant.metafields.afterpay | first | last %}

{{ abc | remove: 'afterpay' | remove : '["", "' | remove : '*' | remove : '"]' }}
<img style=" width:90px; margin-bottom:-7px;" target="_blank" src="{{ 'afterpay1.png' | asset_url }}">
<input type="hidden" value="{{ variant.title }}" />
</a>
{% else %}
{% endif %}
{% endfor %}
</div>
{% endif %}


{% comment %} <script type="text/javascript">

var variants = {};
{% for variant in product.variants %}
variants[{{variant.id}}] = "{{ variant.metafields.afterpay }}";
{% endfor %}

</script>{% endcomment %}
<!-- Over Meta tag -->


<br>

</div>
<div>
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}

<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>

{% endfor %}
{% endunless %}


<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}

{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>


{% if product.available and product.variants.size > 1 %}
{% if product.options == "Color" %}
{% include 'swatch' with 'Color' %}
{% endif %}
{% endif %}


{% capture colour_variant %}
{% for variant in product.variants %}
{% for option in variant.options %}
{% if product.options[forloop.index0] == 'Color' %}somestring,{% endif %}
{% endfor %}
{% endfor %}
{% endcapture %}

{% assign colour_variant_split = colour_variant | split: 'somestring,' %}
{% assign colour_count = colour_variant_split.size | minus:1 %}

{% if colour_count > 1 %}

{% include 'swatch' with 'Color' %}
{% endif %}

 

{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
<div class="share">Share
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
{% endif %}
<div class="product-form__item product-form__item--submit">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
<p>{{ section.settings.title-addtocart }}</p>
</div>
</form>
</div>
<div class="product-single__description rte" itemprop="description">
<h5>Features</h5>
<div class="accordion-content">
{{ product.description }}
</div>
</div>
</div>
</div>
</div>

</div>
</div>

0 Likes

Success.

Shopify Partner
90 8 10

@kerryvarma 

I have checked the link and I found that swatches it works properly there are some CSS issues.

Please add this CSS at the bottom of responsive.css file

@media only screen and (max-width: 640px){
.swatch .tooltip {
    padding-top: 0px;
}
}

Then if it is not fixed then email me or Skype me.

Thanks & Regards
Akshay Vaghasiya

Shopify Partner | Shopify Experts
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
1 Like

Success.

Tourist
4 2 0

@Akshay_1996 

 

Wow, incredible. It worked! Thank you SO much! Really appreciate your time reaching out and helping. Big high fives and gratitude to you!

 

Kerry

0 Likes

Success.

Shopify Partner
90 8 10

@kerryvarma 

You're very welcome.

If you like my work and response then please like the solution.

Thanks & Regards
Akshay Vaghasiya

Shopify Partner | Shopify Experts
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
1 Like
Tourist
4 2 0

Done!

0 Likes