How to add hyperlin...
 
Notifications
Clear all

How to add hyperlink to slideshow?  

  RSS

luigi0411
(@luigi0411)
New Member
Joined: 2 months ago
Posts: 4
28/04/2020 7:50 pm  

I don't want to add buttons and text on slideshow.
How to add a hyperlink to slideshow so that guests can click on the picture to jump to other webpages?

And I noticed that if exit popup is turned on, although it will not be displayed on the phone page, the page will become dark.
So I deleted the small--hide, and the result was that the exit popup could not be displayed properly on the phone page.
I restored the small--hide and tried to delete <div class = "veil">, although the mobile page is no longer dimmed, I can no longer click any links.
Do you have a suitable solution?

Thank you!


Quote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
28/04/2020 9:11 pm  

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

ReplyQuote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
28/04/2020 9:22 pm  

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


ReplyQuote
luigi0411
(@luigi0411)
New Member
Joined: 2 months ago
Posts: 4
29/04/2020 9:00 pm  

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.

 


ReplyQuote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
29/04/2020 9:52 pm  

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

ReplyQuote
Share: