Slideshow Clickable - Venture

Highlighted
Shopify Partner
245 31 37

Hi @trackspikes 
I can add that customization for you. Shoot me an email.
Thank you!

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
0 Likes
Highlighted
New Member
8 0 0

Hi AlbertCollado, have you found out by any chance how to make the slideshow clickable? Thanks in advance, Martin

0 Likes
Highlighted
New Member
1 0 0

Paste in slideshow.liquid

<a data-slide-id="{{ forloop.index }}" href="{{ block.settings.button_link }}">

before <noscript>  tag and close tag </a> after </div> (See image below).

 

image1.jpg

 

If you also want to disable the slider button, comment on the lines below.

 

image2.png

 

 

0 Likes
Highlighted
New Member
11 0 0

I was looking for the same feature and I did it

Notice/ I'm not a developer so do it on duplicated theme first

 

 

 

          <div class="hero__image-content">
            {%- if block.settings.image != blank -%}
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- if block.settings.image == blank -%}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              </div>
              {%- endif -%}
            {%- endif -%}
          </div>

 

<div class="hero__image-content">
            {%- if block.settings.image != blank -%}
            <a data-slide-id="{{ forloop.index }}" href="{{ block.settings.button_link }}">
                      {% if block.settings.image_link != blank %}
          <a href="{{ block.settings.image_link }}">
        {% endif %}  
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- if block.settings.image == blank -%}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div></a></a>
              {%- endif -%}
            {%- endif -%}
          </div>

 

 

          {
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          },

 

If Image link field is empty it goes with button link

 

0 Likes
Highlighted
New Member
11 0 0

I created a topic with the solution, but they hided it, I guess it's against rules to add tutorials

0 Likes