Slideshow Clickable - Venture

New Member
14 0 1

Hi all,

I'm trying to make my slideshow images clickable without a button. I'm using the Venture Theme and tried to look for a solution but all I could find were solutions for other themes and codes that I can't find on my files. Does anyone have any info on how to do that? 

 

Thanks a lot,

Albert

0 Likes
Shopify Partner
666 95 92

Hello ,

Open file
Online Store-> Themes -> Edit code->Sections->slideshow.liquid
Search this code:

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

Replace this code with below code:

<a href="www.google.com">  
         <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>
         </a>
Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
1 Like
Highlighted
New Member
14 0 1

Done, and now where can I select the url? Or is the one that the image had with the button that you can use for the slideshow?

 

Thanks a lot!

0 Likes
New Member
14 0 1

Okay that was a huge progress, thanks a lot! 

Now when I click sends me to a page where it says "page not found". Any tips on that?

 

Thanks A LOT, 

Albert

0 Likes
New Member
14 0 1

Alright. little update. Changed "google.com" for the correct link that I wanted for the first image and its working perfectly fine, but now in the second image of my slideshow also goes to that link. Any chance to put different links for different images?

 

Thanks,

Albert.


0 Likes
Shopify Partner
666 95 92

Hello ,
You need do more customization to change different url for different images.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
0 Likes
New Member
14 0 1

And how could I do that? Is there any code that I could add to solve it?

 

Thanks,

Albert

0 Likes
Shopify Partner
95 9 10

Hi @AlbertCollado,


I can help you with that, shoot me an email.

Shopify help
denisaksutik@gmail.com
0 Likes
New Member
14 0 1

@PallaviAny ideas how to customise the code to link the different images to different links?

 

Thanks,

Albert

0 Likes