Slideshow Clickable - Venture

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
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
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
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

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
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
Shopify Partner
85 9 12

Hi @AlbertCollado,


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

Shopify help
denisaksutik@gmail.com
0 Likes
Tourist
14 0 1

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

 

Thanks,

Albert

0 Likes