[Solved] How to add hyperlink to slideshow?

Hi @luigi0411

Katrine here from Plak theme.

So basically you have 2 questions, one regarding adding a link to slideshow without a button and one regarding the exit pop up bug in mobile view.

Question 1 - adding a custom link to slideshow.

• From your Shopify dashboard, click on Online Store => Actions => Edit code
• Open the file slideshow.liquid
• Locate the below line code

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section" class=" {% if section.settings.slide-hide-mob %} small--hide {% endif %}">

• Add this code just before the above line

<a href="YOUR CUSTOM LINK HERE">

• Put your desired link in "YOUR CUSTOM LINK HERE" for example "/collections/all" so the line becomes <a href="/collections/all"> 

• At the bottom of the file, locate the last closing </div>, add </a> just after it

• Click Save

Hi @luigi0411

The solution to your 2 question regarding the exit pop up black layout issue :

• From your Shopify dashboard, click on Online Store => Actions => Edit code
• Open the file exit-popup.liquid
• Locate the javascript line code beginning with

<script>var ddexitpop=function(e){var.......

• Add this code above it

<div class="small--hide">

• Add this code after it

</div>

• Click Save

Katrine| Plak theme support
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as a Solved Solution

Thank you, Katrine.

For the first question,

• Add this code just before the above line

<a href="YOUR CUSTOM LINK HERE">

• Put your desired link in "YOUR CUSTOM LINK HERE" for example "/collections/all" so the line becomes <a href="/collections/all"> 

If I modify it as such, all slideshows will be the same hyperlink.

I hope that without adding buttons, slideshow hyperlinks are equivalent to their button links.

I tried put

{%-for block in section.blocks-%}
          

in front of <a href="YOUR CUSTOM LINK HERE">.

like this:

{%- for block in section.blocks -%}
<a href="{{ block.settings.button_link }}">
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section" class=" {% if section.settings.slide-hide-mob %} small--hide {% endif %}">
{%- if section.blocks.size > 0 -%}
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
id="Slideshow-{{ section.id }}"
data-autorotate="{{ section.settings.autorotate }}"
data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
{% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height:{{- wrapper_height -}}vw"{% endif %}>
{%- for block in section.blocks -%}
<div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>

But, it only works when there is only one slide, and it is not normal to display more than one slide.

And the solution to my 2 question ,I tried it, the phone page is still dark,there is no improvement.

thank you very much for your help.

Hi @luigi0411

For the 1st question, if you would like to chose the custom link directly from the theme editor and assign this link separately to each image when a user click on it, follow these steps :

• From your Shopify dashboard, click on Online Store => Actions => Edit code
• Open the file slideshow.liquid and replace the entire code with this one

<style>.slideshow__image { width : {{section.settings.slid_img_with}}%;}.slideshow__title {font-size : {{section.settings.slid_hd_sz}}px;}.slideshow__subtitle {font-size : {{section.settings.slid_subhd_sz}}px; }.slideshow__text-content {width : {{100 | minus: section.settings.slid_img_with}}%;}@media(max-width: 812px){.slideshow__text-content{width: 100%;}.slideshow__title{font-size: 28px;}.slideshow__subtitle{font-size: 18px;line-height: 1.1;}}</style> 
{%- if section.settings.slideshow_height == 'adapt' -%}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}
{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section" class=" {% if section.settings.slide-hide-mob %} small--hide {% endif %}">
{%- if section.blocks.size > 0 -%}
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
id="Slideshow-{{ section.id }}"
data-autorotate="{{ section.settings.autorotate }}"
data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
{% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height:{{- wrapper_height -}}vw"{% endif %}>
{%- for block in section.blocks -%}
<div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
{% else %}
<a href="{{ block.settings.button_link_custom }}">

<div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position:{{ block.settings.alignment }}";
data-src="{{ block.settings.image | img_url: '300x300' }}" > 
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
</a>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image:url('{{ block.settings.image | img_url: '2048x' }}'); background-position:{{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
{%- assign text_alignmentsb = block.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignmentb = text_alignmentsb.first -%}
{%- assign text_vertical_alignmentb = text_alignmentsb.last | strip -%}
<div class="slideshow__text-wrap slideshow__text-wrap--desktop">
<div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignmentb }} text-{{ text_horizontal_alignmentb }}">
<div class="page-width">
{% unless block.settings.slide_title == blank and block.settings.subheading == blank %}
<ul class="slideshow__text-content-list">
{%- unless block.settings.slide_title == blank -%}
<li class="h2 mega-title slideshow__title">
{{ block.settings.slide_title | escape }}
</li>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<li class="mega-subtitle slideshow__subtitle">
{{ block.settings.subheading | escape }}
</li>
{%- endunless -%}
</ul>
{% endunless %}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_link_button -%}
<div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}">
<a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
{{ block.settings.button_label | escape }}
</a>
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
<div class="slideshow__controls">
{%- if section.blocks.size > 1 -%}
{%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%}
<div class="slideshow__arrows"
style="width:{{- arrows_width -}}px">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
</div>
{%- if section.settings.autorotate -%}
<button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-rotate">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
</span>
</button>
{%- endif -%}
{%- endif -%}
</div>
</div>
<div class="slideshow__text-wrap slideshow__text-wrap--mobile small-hide">
{% if section.blocks.size > 1 %}
<div class="slideshow__arrows slideshow__arrows--mobile">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
</div>
{% endif %}
{%- for block in section.blocks -%}
{%- assign show_text = false -%}
{%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
{%- assign show_text = true -%}
{%- endunless -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_text or show_link_button -%}
<div class="slideshow__text-content slideshow__text-content--mobile-{{ forloop.index0 }} text-center">
<div class="page-width">
{%- unless block.settings.slide_title == blank -%}
<h2 class="h1 mega-title slideshow__title slideshow__title--mobile">
{{ block.settings.slide_title | escape }}
</h2>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile">
{{ block.settings.subheading | escape }}
</span>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="btn slideshow__btn slideshow__btn--mobile">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div> 
{% schema %}
{
"name": {
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fr": "Diaporama"
},
"class": "index-section index-section--flush index-section--slideshow",
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "slide-hide-mob",
"label": {
"de": "Auf dem Handy verstecken",
"en": "Hide on mobile",
"es": "Ocultar en el móvil",
"fr": "Masquer sur mobile"
},
"default": false
},
{
"type": "select",
"id": "slideshow_height",
"label": {
"de": "Diahöhe",
"en": "Slide height",
"es": "Altura de diapositiva",
"fr": "Hauteur de la diapositive"
},
"default": "adapt",
"options": [
{
"label": {
"de": "An erstes Bild anpassen",
"en": "Adapt to first image",
"es": "Adaptar a la primera imagen",
"fr": "Adapter à la première image"
},
"value": "adapt"
},
{
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fr": "Petite"
},
"value": "small"
},
{
"label": {
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fr": "Moyenne"
},
"value": "medium"
},
{
"label": {
"de": "Groß",
"en": "Large",
"es": "Grande",
"fr": "Grande"
},
"value": "large"
}
]
},
{
"type": "text",
"id": "slid_img_with",
"label": {
"de": "Bild breite %",
"en": "Image width in %",
"es": "Ancho de la imagen %",
"fr": "Largeur de l'image en %"
},
"default": "60"
},
{
"type": "text",
"id": "slid_hd_sz",
"label": {
"de": "Größe des Titels 'px'",
"en": "Header text size in 'px'",
"es": "Tamaño del título 'px'",
"fr": "Taille du titre en 'px'"
},
"default": "63"
},
{
"type": "text",
"id": "slid_subhd_sz",
"label": {
"de": "Subheader-Größe in 'px'",
"en": "Subheader size in 'px'",
"es": "Tamaño del subtítulo en 'px'",
"fr": "Taille du sous-titre en 'px'"
},
"default": "22"
},
{
"type": "checkbox",
"id": "show_overlay",
"label": {
"de": "Überlagerung zeigen",
"en": "Show overlay",
"es": "Mostrar superposición",
"fr": "Afficher la superposition"
},
"default": true
},
{
"type": "checkbox",
"id": "autorotate",
"label": {
"de": "Auto-rotieren der Slides",
"en": "Auto-rotate slides",
"es": "Rotar las diapositivas automáticamente",
"fr": "Rotation automatique des diapositives"
},
"default": false
},
{
"type": "range",
"id": "autorotate_speed",
"label": {
"de": "Slides überall ändern",
"en": "Change slides every",
"es": "Cambiar diapositivas cada",
"fr": "Changer de diapositive toutes les"
},
"max": 9,
"min": 3,
"step": 2,
"unit": {
"de": " s",
"en": " s",
"es": " s",
"fr": " s"
},
"default": 5
}
],
"blocks": [
{
"type": "image",
"name": {
"de": "Foto-Slide",
"en": "Image slide",
"es": "Diapositiva de imagen",
"fr": "Diapositive (image)"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fr": "Image"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"de": "Foto-Position",
"en": "Image position",
"es": "Alineación de imagen",
"fr": "Position de l'image"
},
"default": "center center",
"options": [
{
"label": {
"de": "Oben links",
"en": "Top left",
"es": "Superior izquierda",
"fr": "En haut à gauche"
},
"value": "left top"
},
{
"label": {
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fr": "En haut au centre"
},
"value": "center top"
},
{
"label": {
"de": "Oben rechts",
"en": "Top right",
"es": "Superior derecha",
"fr": "En haut à droite"
},
"value": "right top"
},
{
"label": {
"de": "Mitte links",
"en": "Middle left",
"es": "Al medio a la izquierda",
"fr": "Au milieu à gauche"
},
"value": "left center"
},
{
"label": {
"de": "Mitte mittig",
"en": "Middle center",
"es": "Al medio centrada",
"fr": "Centrée au milieu"
},
"value": "center center"
},
{
"label": {
"de": "Mitte rechts",
"en": "Middle right",
"es": "Al medio a la derecha",
"fr": "Au milieu à droite"
},
"value": "right center"
},
{
"label": {
"de": "Unten links",
"en": "Bottom left",
"es": "Inferior izquierda",
"fr": "En bas à gauche"
},
"value": "left bottom"
},
{
"label": {
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fr": "En bas au centre"
},
"value": "center bottom"
},
{
"label": {
"de": "Unten rechts",
"en": "Bottom right",
"es": "Inferior derecha",
"fr": "En bas à droite"
},
"value": "right bottom"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": {
"de": "Textausrichtung",
"en": "Text alignment",
"es": "Alineación de texto",
"fr": "Alignement du texte"
},
"default": "center center",
"options": [
{
"label": {
"de": "Oben links",
"en": "Top left",
"es": "Superior izquierda",
"fr": "En haut à gauche"
},
"value": "left top"
},
{
"label": {
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fr": "En haut au centre"
},
"value": "center top"
},
{
"label": {
"de": "Oben rechts",
"en": "Top right",
"es": "Superior derecha",
"fr": "En haut à droite"
},
"value": "right top"
},
{
"label": {
"de": "Mitte links",
"en": "Middle left",
"es": "Al medio a la izquierda",
"fr": "Au milieu à gauche"
},
"value": "left center"
},
{
"label": {
"de": "Mitte mittig",
"en": "Middle center",
"es": "Al medio centrada",
"fr": "Centrée au milieu"
},
"value": "center center"
},
{
"label": {
"de": "Mitte rechts",
"en": "Middle right",
"es": "Al medio a la derecha",
"fr": "Au milieu à droite"
},
"value": "right center"
},
{
"label": {
"de": "Unten links",
"en": "Bottom left",
"es": "Inferior izquierda",
"fr": "En bas à gauche"
},
"value": "left bottom"
},
{
"label": {
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fr": "En bas au centre"
},
"value": "center bottom"
},
{
"label": {
"de": "Unten rechts",
"en": "Bottom right",
"es": "Inferior derecha",
"fr": "En bas à droite"
},
"value": "right bottom"
}
]
},
{
"type": "text",
"id": "slide_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "En-tête"
},
"default": {
"de": "Foto-Slide",
"en": "Image slide",
"es": "Diapositiva de imagen",
"fr": "Diapositive (image)"
}
},
{
"type": "textarea",
"id": "subheading",
"label": {
"de": "Untertitel",
"en": "Subheading",
"es": "Subtítulo",
"fr": "Sous-titre"
},
"default": {
"de": "Erzählen Sie Ihre Geschichte mit Fotos",
"en": "Tell your brand's story through images",
"es": "Cuenta la historia de tu marca a través de videos e imágenes",
"fr": "Racontez votre histoire avec des images"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"de": "Button-Name",
"en": "Button label",
"es": "Etiqueta de botón",
"fr": "Texte du bouton"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"de": "Button-Link",
"en": "Button link",
"es": "Enlace de la diapositiva",
"fr": "Lien du bouton"
}
},
{
"type": "url",
"id": "button_link_custom",
"label": {
"de": "custom link (when clicking on slideshow image)",
"en": "custom link (when clicking on slideshow image)",
"es": "custom link (when clicking on slideshow image)",
"fr": "custom link (when clicking on slideshow image)"
}
}
]
}
],
"presets": [
{
"name": {
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fr": "Diaporama"
},
"category": {
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fr": "Image"
},
"settings": {
"autorotate": false,
"autorotate_speed": 5
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

• Click Save

About the 2nd question, in order to not to show completely the black background layout on mobile, follow these steps :

• From your Shopify dashboard, click on Online Store => Actions => Edit code
• Open the file theme.css.liquid
• Locate the line code (it is located generally in the line 8249) beginning with

.tooltip{position:relative;display:inline-block}.......

• Above it, add the below code

 @include media-query($medium-up) {

• Below it add the following

}

• Click Save

Hi there. I tried add the above code to my slideshow so my slides would be clickable without a button overlay. It works perfectly however, on the desktop version there is a liquid code error at the bottom of the slideshow. It doesn't show up on mobile. Can you please advise? We have already contacted support on this issue and have received no response. 

www.eleven10leather.com

Posted by: @eleven10leather

Hi there. I tried add the above code to my slideshow so my slides would be clickable without a button overlay. It works perfectly however, on the desktop version there is a liquid code error at the bottom of the slideshow. It doesn't show up on mobile. Can you please advise? We have already contacted support on this issue and have received no response. 

www.eleven10leather.com

Hi Nick,

I went to your store and fixed the LIQUID error,

For anyone facing the same issue, here is the fix :

• From your Shopify dashboard click Online store > Actions > Edit code
• Open the file slideshow.liquid
• Change this code

{% include 'icon-chevron-left' %}

• With this one

<i class="fa fa-arrow-left" aria-hidden="true">

• Change this code

{% include 'icon-chevron-right' %}

• With this one

<i class="fa fa-arrow-right" aria-hidden="true">

• Click Save

If you encounter any other issue, feel free to get in touch with us

Kind regards,
Katrine

@plaktheme You may have fixed THAT problem, but you created multiple more!!  Look at our page now; the font is all wrong, images out of place, sections divided...  PLEASE jump back in immediately and help remedy this.

Posted by: @eleven10leather

@plaktheme You may have fixed THAT problem, but you created multiple more!!  Look at our page now; the font is all wrong, images out of place, sections divided...  PLEASE jump back in immediately and help remedy this.

The issue has been fixed Nick

@plaktheme THANK YOU for the quick response!!  🙂