[Tutorial] Venture Clickable Slideshow

elhajjami
Tourist
11 0 4
Caution

This is not supported by Shopify. Basic Knowledge of HTML is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

I just want to share with you the solution to make images on the slideshow clickable on Venture theme, with the choice to show or hide the slideshow button, Please duplicate your theme before starting.

 

I made this tutorial because I didn't find it anywhere with this feature I added.

 

1. Open Sections/slideshow.liquid

2. I added 5 lines to the code just before <noscript> and I closed them.

1.jpg

 

Or just replace this code from line 34 to 59

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

 

With this code (please look at previous picture to check the code you added is in the correct place.)

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

 

3. Now Add this code just after line 472, look at the picture below.

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

2.jpg

 

4. Save, and go to customize your theme.

You will see new field added like this picture

 

3.jpg

 

From there you can choose where the customer go when they click on the slider.

 

IF you let the field image Link empty, it goes automatically with link in button link.

IF you let the field button link empty, it hides the button from the slider and automatically goes with image Link.

 

I made a bunch of customizations on my Venture theme

If you want more tuto's like this just let me know.

Note: I'm not a developer just ordinary marketer.

TalonFIghtGear
Tourist
4 0 1

First step works, but the line you said to paste after 472 produces an error. 

 

117096671_328856358501554_6145544889515379881_n.png

0 Likes
AndrewBrian
Excursionist
20 3 6

Hey -

Sorry to bug you about this.

I succeeded in making the slideshow pictures clickable, however I am using other customizations to make a separate slideshow for mobile, and when I add this code it removes my mobile section from sight...

I think my issue is I am unsure of how to rename the separate slideshow sections in the theme editor, so the both appear as "Slideshow" and I just know the bottom one is for mobile.

Are you able to help with this?

 

Cheers

 

Andrew

0 Likes
Xochitl
Tourist
5 0 3

Hi, I also succeeded in making the slide images clickable, I too got error message when entering the second part of the code until I tried it a couple more times and got it to be able to 'save'. However no my issue is that the following slides or anything displays blank now. Take a look at the image attached, see that blanks space? That's supposed to be another slide. Can someone help? 

Screen Shot 2020-10-25 at 2.36.45 PM.png

0 Likes
RAISOME
New Member
2 0 0

Hey Thank you!! That worked for me!! Although i had to put the second code snippet after 524 line. Thanks again! 

0 Likes
Marwisniewski
New Member
5 0 0

Did you managed to fix this bug? I have the same problem .

0 Likes
Fractious25
Tourist
20 0 2

Hi 

First thank you for a great tutorial - I made i work! 

However, i have a problem when having multiple sliders. It seems like the other sliders automatically links to the link of the first slide. Even if i insert another link to e.g. slide 2, is will go to the same link as in slide 1. 

Is there a fix for this? 

Best regards
Janus

0 Likes
MVUILL
Excursionist
39 0 9

thank you so much, it works perfectly!

0 Likes
Marwisniewski
New Member
5 0 0

Hi 

Skype : einsteinnephew.ens1

0 Likes
GSLFab
Excursionist
25 0 5

If you didn't figure it out already, you've remove the closing bracket for the previous section, and the opening bracket for the following section. Look close at the image he posted and make sure the brackets are identical

0 Likes