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 -->

 

Replies 6 (6)

David_Weru
Shopify Partner
177 16 43

Hi @Shop17,

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

Shop17
New Member
4 0 0

newitem.ca

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 -->

David_Weru
Shopify Partner
177 16 43

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.

Shop17
New Member
4 0 0

No, not yet, any ideas????

David_Weru
Shopify Partner
177 16 43

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 -->