Product section on the Main page is Unclickable

Shop17
New Member
4 0 0

Hi Everyone: 

321.png

 

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&colon;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&colon;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 -->

 

0 Likes
David_Weru
Trailblazer
153 14 32

Hi @Shop17,

If you post a link to the store, I could point out what you'd have to fix to make this clickable.

0 Likes
Shop17
New Member
4 0 0

newitem.ca

0 Likes
Shop17
New Member
4 0 0

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&colon;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 -->

0 Likes
David_Weru
Trailblazer
153 14 32

Hello, @Shop17,

I've solved this problem for another user.

https://community.shopify.com/c/Technical-Q-A/want-to-make-images-clickable-on-home-page/m-p/1229964...

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.

0 Likes
Shop17
New Member
4 0 0

No, not yet, any ideas????

0 Likes
David_Weru
Trailblazer
153 14 32

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&colon;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 -->

 

0 Likes