Product section on the Main page is Unclickable

Technical Q&A
1

Hi Everyone:

321.png
321.png1464×736 168 KB

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:

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{% if settings.enable_catalog_mode == false%}

{% include 'add-wishlist' %}
{% if sold_out %} {% if settings.pia_sold_svg != blank %} {{settings.pia_sold_svg}} {% else %} {% endif %} {% else %} {% if product.variants.size > 1 %} {% if settings.pia_selectoption_svg != blank %} {{settings.pia_selectoption_svg}} {% else %} {% endif %} {% else %} {% if settings.pia_addcart_svg != blank %} {{settings.pia_addcart_svg}} {% else %} {% endif %} {% endif %} {% endif %}
{% endif %}

{% if product.variants.size > 1 %}

**should I take all these off?????**
{% 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 %}

{% capture tempList %}
{{ colorlist | append: color | append: ’ ’ }}
{% endcapture %}

{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}

{% endif %}
{% endfor %}

{% for option in product.options_with_values %} {% if option.name == 'Color' %} {% for value in option.values %} {% if forloop.index > 4 %} + {{forloop.index | minus : 4}} {% endif %} {% endfor %} {% endif %} {% endfor %}
{%endif%}
2

Hi @Shop17 ,

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

3

newitem.ca

4

Actually, I found something like this:

{% if settings.show_thumbnai_pd %}
{% if product.variants.size > 1 %}

{% 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 %}

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

{% capture tempList %}
{{ colorlist | append: color | append: ’ ’ }}
{% endcapture %}

{% assign colorlist = tempList %}
{% endunless %}

{% endfor %}
{% endif %}
{% endfor %}

{%endif%} {% endif %}
5

Hello, @Shop17 ,

I’ve solved this problem for another user.

https://community.shopify.com/post/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.

6

No, not yet, any ideas???

7

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

{% 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 %}

{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}

{% assign colorlist = tempList %}
{% endunless %}

{% endfor %}
{% endif %}
{% endfor %}

{%endif%}
{% endif %}