Slideshow Clickable - Venture

Highlighted
Shopify Partner
271 38 42

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
12 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
Highlighted
Tourist
3 0 1

Thanks for  this, very helpful.

 

When  adding your code to my  Venture theme, everything seems  to work fine, but it does mess up the layout of the original header and button. Any suggestions on how to mainain the original layout here?

 

BeforeBeforeAfterAfter

 

1 Like
Highlighted
Tourist
5 0 1

@PaalCoffee did you manage to solve the format issue? Bumping into the same problem when using the code. Thx

0 Likes
Highlighted

Whats the store URL of the 'messed up" buttons and I'll have a look and post here

Basically the tutorial is fine, but as the theme has changes over time there may be some refinements needed.

 

Dan 'the web man' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
0 Likes
Highlighted
Tourist
5 0 1

Sounds great: my stores website is www.anderewelten.de though I have not published the changes to the slideshow due to the formatting error. I did test the code in a duplicate theme and saw the error there and therefore did not publish. However can you still support with this info?

1 Like
Highlighted
Shopify Partner
5867 860 1966

@LisaSkywalker 

Thanks, post can you please try this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes