[Tutorial] Venture Clickable Slideshow

Highlighted
New Member
11 0 0
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.

0 Likes
New Member
2 0 0

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

 

117096671_328856358501554_6145544889515379881_n.png

0 Likes
Highlighted
Tourist
12 1 2

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