Slideshow Clickable - Venture

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

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 incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
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
Highlighted
Tourist
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
Highlighted
Tourist
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
Highlighted

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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
14 0 1

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

 

Thanks,

Albert

0 Likes
Highlighted
Shopify Partner
272 38 43

Hi @AlbertCollado,


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

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

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

 

Thanks,

Albert

0 Likes
Highlighted
New Member
1 0 0

@oscprofessional  i would also like to add this, any idea of how to make the change?



@AlbertCollado wrote:

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

 

Thanks,

Albert


0 Likes