Liquid, JavaScript, themes, sales channels
Hi Everyone:
Theme purchase from TM; however they do not support this theme anymore.
Site URL: newitem.ca
Theme provider: SHOPILAUNCH
All I want is the product thumbnail to be clickable, and directly take my customer to the product page.
Thank you in advance. Thank you!
Here is the product. hover. liquid:
<!-- ICON PRODUCT -->
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{% if settings.enable_catalog_mode == false%}
<div class="product-icon-action">
<div class="add-wishlist">
{% include 'add-wishlist' %}
</div>
<div class="add-to-cart">
{% if sold_out %}
<a href="{{ product.url | within: collection }}" class="inline-block icon-addcart margin_right_10 box-shadow" data-toggle="tooltip" data-placement="top" data-original-title="{{settings.pia_sold_name}}">
{% if settings.pia_sold_svg != blank %}
<i class="fsz-unset">{{settings.pia_sold_svg}}</i>
{% else %}
<i class="{{settings.pia_sold}}"></i>
{% endif %}
</a>
{% else %}
{% if product.variants.size > 1 %}
<a href="{{ product.url | within: collection }}" class="inline-block icon-addcart margin_right_10 box-shadow" data-toggle="tooltip" data-placement="top" data-original-title="{{settings.pia_selectoption_name}}">
{% if settings.pia_selectoption_svg != blank %}
<i class="fsz-unset">{{settings.pia_selectoption_svg}}</i>
{% else %}
<i class="{{settings.pia_selectoption}}"></i>
{% endif %}
</a>
{% else %}
<form method="post" action="/cart/add" enctype="multipart/form-data" class="inline-block icon-addcart margin_right_10 box-shadow" data-toggle="tooltip" data-placement="top" data-original-title="{{settings.pia_addcart_name}}">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<button type="submit" name="add" class="enj-add-to-cart-btn ">
{% if settings.pia_addcart_svg != blank %}
<i class="fsz-unset">{{settings.pia_addcart_svg}}</i>
{% else %}
<i class="{{settings.pia_addcart}}" style="font-size: 22px;"></i>
{% endif %}
</button>
</form>
{% endif %}
{% endif %}
</div>
<div class="quick-view">
<a href="javascript:void(0)" class="engoj_btn_quickview icon-quickview inline-block box-shadow" data-id="{{ product.handle }}" data-toggle="tooltip" data-placement="top" data-original-title="{{settings.pia_quickview_name}}">
{% if settings.pia_quickview_svg %}
<i class="fsz-unset">{{settings.pia_quickview_svg}}</i>
{% else %}
<i class="{{settings.pia_quickview}}"></i>
{% endif %}
</a>
</div>
</div>
{% endif %}
<!-- END ICON -->
<!-- THUMBNAIL PRODUCT -->
{% if product.variants.size > 1 %}
<div class="d-flex align-items-center image-thumbnail"> should I take all these off?????
<div class="variant-image-group engoj_select_color ">
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants limit:4 %}
{% capture color %}{{ variant.options[index] }}{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<span class=" border_thumbnail" >
<a class="{% if forloop.first %}active {% endif %}circle-thumb js_change_border" href="javascript:void(0)" {% if variant.image != null %}data-engojvariant-img="{{ variant.image.src | product_img_url: 'grande' }}"{% endif %} style="background-image: url({{ variant.image.src | product_img_url: 'grande' }});background-size:cover;"></a>
</span>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
<div class="more_variant">
{% for option in product.options_with_values %}
{% if option.name == 'Color' %}
{% for value in option.values %}
{% if forloop.index > 4 %}
<a href="{{ product.url | within: collection }}">+ {{forloop.index | minus : 4}}</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
{%endif%}
<!-- END THUMBNAIL -->
Hi @Shop17,
If you post a link to the store, I could point out what you'd have to fix to make this clickable.
newitem.ca
Actually, I found something like this:
<!-- THUMBNAIL PRODUCT -->
{% if settings.show_thumbnai_pd %}
{% if product.variants.size > 1 %}
<div class="variant-image-group engoj_select_color space_top_20">
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}{{ variant.options[index] }}{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<span class="border">
<a class="circle-thumb" href="javascript:void(0)" {% if variant.image != null %}data-engojvariant-img="{{ variant.image.src | product_img_url: 'grande' }}"{% endif %} style="{% if text == 'white' %}border: 1px solid #bcbcbc; {% endif %}background-image: url({{ variant.image.src | product_img_url: 'grande' }});background-size:cover;"></a>
</span>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{%endif%}
{% endif %}
<!-- END THUMBNAIL -->
Hello, @Shop17,
I've solved this problem for another user.
This is the site now with clickable thumbnails/images:
https://whitedragonteas.co.uk/
I had to add an option in the editor for the link destination upon clicking as one did not exist.
If you would like the same done, please message me.
No, not yet, any ideas????
If you see a popup, you're close. The next part will be editing the section file.
{% if settings.show_thumbnai_pd %}
{% if product.variants.size > 1 %}
<div class="variant-image-group engoj_select_color space_top_20">
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}{{ variant.options[index] }}{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<span class="border">
<a class="circle-thumb"
onclick="alert('I/'m clickable!');"
href="javascript:void(0)" {% if variant.image != null %}data-engojvariant-img="{{ variant.image.src | product_img_url: 'grande' }}"{% endif %} style="{% if text == 'white' %}border: 1px solid #bcbcbc; {% endif %}background-image: url({{ variant.image.src | product_img_url: 'grande' }});background-size:cover;"></a>
</span>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{%endif%}
{% endif %}
<!-- END THUMBNAIL -->
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024