Clickable Slideshow in Simple Theme

Highlighted
Shopify Partner
7 0 4

@robinkarlsson Which theme are you are using and what is the theme version?

Senior Software Engineer
0 Likes
Highlighted
New Member
5 0 0

@Rafayel 

Simple. Can’t check version right now but I installed it about two weeks ago so probably the latest version.  

0 Likes
Highlighted
Shopify Partner
7 0 4

I apologize for the late response.  I was unable to replicate your issue for the simple theme.  Please post your slideshow.liquid code so I can take a closer look.

Senior Software Engineer
0 Likes
Highlighted
New Member
5 0 0

No worries! Here it is. The custom code is not here because I had to remove it due to my issue, but I put it on line 90. 

{%- case section.settings.slider_height -%}
{%- when 'small' -%}
{%- assign slider_desktop_height = '400px' -%}
{%- assign slider_mobile_height = '250px' -%}
{%- when 'medium' -%}
{%- assign slider_desktop_height = '500px' -%}
{%- assign slider_mobile_height = '300px' -%}
{%- when 'large' -%}
{%- assign slider_desktop_height = '600px' -%}
{%- assign slider_mobile_height = '400px' -%}
{%- when 'adapt' -%}
{%- assign min_aspect_ratio = section.blocks[0].settings.image.aspect_ratio | default: 2.0 -%}
{%- endcase -%}

{%- unless section.settings.slider_height == 'adapt' -%}
{%- style -%}
#flexslider--{{ section.id }} .slides__slide,
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_desktop_height }};
}

@media screen and (max-width: 768px) {
#flexslider--{{ section.id }} .slides__slide,
#flexslider--{{ section.id }} .slides__image,
#flexslider--{{ section.id }} .slides svg {
height: {{ slider_mobile_height }};
}
}
{%- endstyle -%}
{%- endunless -%}

{%- if section.blocks.size > 0 -%}
{%- assign arrow_offset = section.blocks.size | times: 10 | plus: 60 -%}
{%- style -%}
.slider__controls-button--prev {
left: calc(50% - {{ arrow_offset }}px);
}
.slider__controls-button--next {
right: calc(50% - {{ arrow_offset }}px);
}
{%- if section.settings.slider_height == 'adapt' -%}
{%- if section.settings.slider_home_transition == 'fade' -%}
#flexslider--{{ section.id }} .slides {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- else -%}
#flexslider--{{ section.id }} .flex-viewport {
padding-top: {{ 100.0 | divided_by: min_aspect_ratio }}%;
}
{%- endif -%}
{%- endif -%}
{%- endstyle -%}
<div class="index-section slideshow-container"
role="region"
tabindex="-1"
aria-label="slideshow"
aria-describedby="slideshow-info">
<div class="flexslider flexslider--{{ section.settings.slider_home_transition }}{% if section.settings.slider_height == 'adapt' %} flexslider--adapt{% endif %}"
id="flexslider--{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="slideshow-section"
data-transition="{{ section.settings.slider_home_transition }}"
data-autoplay="{{ section.settings.slider_home_auto }}"
data-speed="{{ section.settings.slider_home_rate | times: 1000 }}"
data-slide-nav-a11y="{{ 'homepage.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
data-slide-nav-active-a11y="{{ 'homepage.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
<ul class="slides supports-js">
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- if block.settings.image.width < max_width -%}
{%- assign slide_width = block.settings.image.width -%}
{%- endif -%}

{%- style -%}
#slide--{{ block.id }} .slides__title,
#slide--{{ block.id }}_clone .slides__title {
color: {{ block.settings.color_text }};
}
#slide--{{ block.id }}:not(.slide-hide)::before, #slide--{{ block.id }}_clone:not(.slide-hide)::before {
opacity: {{ block.settings.overlay_opacity | divided_by: 100.00 }};
}
{%- endstyle -%}
<li id="slide--{{ block.id }}"
class="slides__slide slide-hide"
data-slider-item
data-flexslider-index="{{ forloop.index0 }}"
{{ block.shopify_attributes }}>
{%- if block.settings.image != blank -%}
<img class="slides__image lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ block.settings.alignment }};"
alt="{{ block.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content text-{{ block.settings.text_alignment }}">
<div class="slides-text-content-wrapper-{{ block.settings.text_alignment }}">
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- endunless -%}
</li>
{%- endfor -%}
</ul>

<noscript>
{{ section.blocks[0].settings.image | img_url: '970x', scale: 2 | img_tag: block.settings.image.alt }}
</noscript>
</div>
{%- if section.blocks.size > 1 -%}
<div class="slider__controls-container" data-slider-controls>
{%- if section.settings.slider_home_auto -%}
<button class="slider__controls-button slider__controls-button--pause"
aria-live="polite"
aria-label="{{ 'homepage.slideshow.pause' | t }}"
aria-pressed="false"
data-label-pause="{{ 'homepage.slideshow.pause' | t }}"
data-label-play="{{ 'homepage.slideshow.play' | t }}"
data-slider-pause>
{% include 'icon-pause' %}
{% include 'icon-play' %}
</button>
{%- endif -%}
<ul class="slider-navigation">
<li>
<button class="slider__controls-button slider__controls-button--prev" aria-label="{{ 'homepage.slideshow.previous_slide' | t }}" data-slider-navigation data-slider-prev>
{% include 'icon-chevron-left' %}
</button>
</li>
<li>
<button class="slider__controls-button slider__controls-button--next" aria-label="{{ 'homepage.slideshow.next_slide' | t }}" data-slider-navigation>
{% include 'icon-chevron-right' %}
</button>
</li>
</ul>
</div>
{%- endif -%}
<div class="slideshow__mobile-text-container">
{%- for block in section.blocks -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
<div class="slides__text-content slides__text-content--mobile text-center" data-mobile-slide-text="{{ forloop.index0 }}" data-text-mobile>
{%- unless block.settings.slide_heading == blank -%}
<h2 class="slides__title slides__title--mobile slides__title--{{ section.settings.text_size }} h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="slides__btn slides__btn--mobile btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}

 

{% schema %}
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"class": "shopify-slideshow-section",
"max_blocks": 6,
"settings": [
{
"type": "select",
"id": "slider_height",
"label": {
"da": "Diashøjde",
"de": "Diahöhe",
"en": "Slide height",
"es": "Altura de diapositiva",
"fi": "Dian korkeus",
"fr": "Hauteur de la diapositive",
"hi": "स्लाइड ऊंचाई",
"it": "Altezza slide",
"ja": "スライドの高さ",
"ko": "슬라이드 높이",
"nb": "Lysbildehøyde",
"nl": "Diahoogte",
"pt-BR": "Altura do slide",
"pt-PT": "Altura do diapositivo",
"sv": "Bildhöjd",
"th": "ความสูงของสไลด์",
"zh-CN": "幻灯片高度",
"zh-TW": "投影片高度"
},
"info": {
"da": "Få mere at vide om [retningslinjer for diasshow](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"de": "Mehr über [Slideshow-Richtlinien](https://help.shopify.com/de/manual/using-themes/themes-by-shopify/simple)",
"en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/es/manual/using-themes/themes-by-shopify/simple)",
"fi": "Lisätietoja [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"fr": "En savoir plus sur les [instructions de diaporama](https://help.shopify.com/fr/manual/using-themes/themes-by-shopify/simple)",
"hi": "[दिशानिर्देश स्लाइड करें](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple) के बारे में अधिक जानें.",
"it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)に関して詳しくはこちら",
"ko": "[슬라이드 쇼 가이드 라인]에 대해 자세히 알아보십시오.(https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"nb": "Finn ut mer om [retningslinjer for lysbildefremvisninger](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"nl": "Meer informatie over [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"pt-BR": "Saiba mais sobre [orientações de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-speci...).",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไชด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)",
"zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/simple)"
},
"options": [
{
"value": "small",
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fi": "Pieni",
"fr": "Petite",
"hi": "छोटा",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "medium",
"label": {
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
}
},
{
"value": "large",
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
}
},
{
"value": "adapt",
"label": {
"da": "Tilpas til første slide",
"de": "An erste Folie anpassen",
"en": "Adapt to first slide",
"es": "Adaptar a la primera diapositiva",
"fi": "Sovita ensimmäiseen diaan",
"fr": "Adapter à la première diapositive",
"hi": "पहली स्लाइड को अनुकूल बनाएं",
"it": "Adatta alla prima slide",
"ja": "最初のスライドに適応する",
"ko": "첫 번째 슬라이드에 맞춤",
"nb": "Tilpass til første lysbilde",
"nl": "Aanpassen aan eerste dia",
"pt-BR": "Adaptar ao primeiro slide",
"pt-PT": "Adaptar ao primeiro diapositivo",
"sv": "Anpassa efter första bilden",
"th": "ปรับให้เข้ากับสไลด์แรก",
"zh-CN": "适应第一张幻灯片",
"zh-TW": "配合第一張投影片"
}
}
]
},
{
"type": "checkbox",
"id": "slider_home_auto",
"label": {
"da": "Roter automatisk slides",
"de": "Auto-rotieren der Slides",
"en": "Auto-rotate slides",
"es": "Rotar las diapositivas automáticamente",
"fi": "Käännä diat automaattisesti",
"fr": "Rotation automatique des diapositives",
"hi": "ऑटो-रोटेट स्लाइड",
"it": "Ruota slide automaticamente",
"ja": "スライドの自動切り替え",
"ko": "슬라이드 자동 회전",
"nb": "Autoroter lysbildene",
"nl": "Dia's automatisch draaien",
"pt-BR": "Rodar automaticamente os slides",
"pt-PT": "Reprodução automática de diapositivos",
"sv": "Auto-rotera bilder",
"th": "หมุนสไลด์อัตโนมัติ",
"zh-CN": "自动旋转幻灯片",
"zh-TW": "自動旋轉投影片"
}
},
{
"type": "range",
"id": "slider_home_rate",
"label": {
"da": "Skift slide hver",
"de": "Slides überall ändern",
"en": "Change slides every",
"es": "Cambiar diapositivas cada",
"fi": "Vaihda diat joka",
"fr": "Changer de diapositive toutes les",
"hi": "प्रत्येक स्लाइड बदलें",
"it": "Cambia slide ogni",
"ja": "スライドを変更する間隔",
"ko": "슬라이드를 매번 변경",
"nb": "Endre lysbilde hvert",
"nl": "Wijzig dia's elke",
"pt-BR": "Mude os slides a cada",
"pt-PT": "Mudar diapositivos a cada",
"sv": "Byt bilder varje",
"th": "เปลี่ยนสไลด์ทุก",
"zh-CN": "幻灯片更改时间间隔",
"zh-TW": "每過以下時間即變更投影片"
},
"min": 3,
"max": 9,
"step": 2,
"unit": {
"da": " s",
"de": " s",
"en": " s",
"es": " s",
"fi": " s",
"fr": " s",
"hi": " s",
"it": " s",
"ja": " s",
"ko": " s",
"nb": " s",
"nl": " s",
"pt-BR": " s",
"pt-PT": " s",
"sv": " s",
"th": " s",
"zh-CN": " s",
"zh-TW": " s"
},
"default": 7
},
{
"type": "select",
"id": "slider_home_transition",
"label": {
"da": "Overgangseffekt",
"de": "Übergangseffekt",
"en": "Transition effect",
"es": "Efecto de transición",
"fi": "Siirtymävaikutus",
"fr": "Effet de transition",
"hi": "संक्रमण प्रभाव",
"it": "Effetto di transizione",
"ja": "トランジション効果",
"ko": "전환 효과",
"nb": "Overgangseffekt",
"nl": "Overgangseffect",
"pt-BR": "Efeito de transição",
"pt-PT": "Efeito de transição",
"sv": "Övergångseffekt",
"th": "เอฟเฟกต์การเปลี่ยนสไลด์",
"zh-CN": "过渡效果",
"zh-TW": "轉場效果"
},
"options": [
{
"value": "fade",
"label": {
"da": "Toning",
"de": "Ausblenden",
"en": "Fade",
"es": "Desvanecer",
"fi": "Häivytys",
"fr": "Fondu",
"hi": "फ़ेड",
"it": "Dissolvenza",
"ja": "フェード",
"ko": "페이드",
"nb": "Falme",
"nl": "Vervagen",
"pt-BR": "Apagamento",
"pt-PT": "Desvanecer",
"sv": "Fade-out",
"th": "จางหาย",
"zh-CN": "淡化",
"zh-TW": "淡出"
}
},
{
"value": "slide",
"label": {
"da": "Slide",
"de": "Folie",
"en": "Slide",
"es": "Deslizar",
"fi": "Dia",
"fr": "Diapositive",
"hi": "स्लाइड",
"it": "Scorrimento",
"ja": "スライド",
"ko": "슬라이드",
"nb": "Lysbilde",
"nl": "Dia",
"pt-BR": "Slide",
"pt-PT": "Diapositivo",
"sv": "Bild",
"th": "สไลด์",
"zh-CN": "幻灯片",
"zh-TW": "投影片"
}
}
]
},
{
"type": "select",
"id": "text_size",
"label": {
"da": "Tekststørrelse",
"de": "Textgröße",
"en": "Text size",
"es": "Tamaño del texto",
"fi": "Tekstin koko",
"fr": "Taille du texte",
"hi": "टेक्स्ट आकार",
"it": "Dimensione testo",
"ja": "文字サイズ",
"ko": "텍스트 사이즈",
"nb": "Tekststørrelse",
"nl": "Tekengrootte",
"pt-BR": "Tamanho do texto",
"pt-PT": "Tamanho do texto",
"sv": "Textstorlek",
"th": "ขนาดตัวอักษร",
"zh-CN": "文本大小",
"zh-TW": "文字尺寸"
},
"default": "medium",
"options": [
{
"value": "small",
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fi": "Pieni",
"fr": "Petite",
"hi": "छोटा",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "medium",
"label": {
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"hi": "मध्यम",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"zh-CN": "中等",
"zh-TW": "中等"
}
},
{
"value": "large",
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
}
}
]
}
],
"blocks": [
{
"type": "image",
"name": {
"da": "Slide",
"de": "Folie",
"en": "Slide",
"es": "Diapositiva",
"fi": "Dia",
"fr": "Diapositive",
"hi": "स्लाइड",
"it": "Scorrimento",
"ja": "スライド",
"ko": "슬라이드",
"nb": "Lysbilde",
"nl": "Dia",
"pt-BR": "Slide",
"pt-PT": "Diapositivo",
"sv": "Bild",
"th": "สไลด์",
"zh-CN": "幻灯片",
"zh-TW": "投影片"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"da": "Placering af billede",
"de": "Foto-Position",
"en": "Image position",
"es": "Posición de la imagen",
"fi": "Kuvan sijainti",
"fr": "Position de l'image",
"hi": "इमेज स्थिति",
"it": "Posizione Immagine",
"ja": "画像の位置",
"ko": "이미지 위치",
"nb": "Bildeposisjon",
"nl": "Afbeeldingspositie",
"pt-BR": "Posição da imagem",
"pt-PT": "Posição da imagem",
"sv": "Bildposition",
"th": "ตำแหน่งรูปภาพ",
"zh-CN": "图片位置",
"zh-TW": "圖片位置"
},
"default": "center center",
"options": [
{
"label": {
"da": "Øverst til venstre",
"de": "Oben links",
"en": "Top left",
"es": "Superior izquierda",
"fi": "Ylhäällä vasemmalla",
"fr": "En haut à gauche",
"hi": "शीर्ष पर बाईं ओर",
"it": "In alto a sinistra",
"ja": "左上",
"ko": "왼쪽 상단",
"nb": "Øverst til venstre",
"nl": "Linksboven",
"pt-BR": "Superior esquerdo",
"pt-PT": "Canto superior esquerdo",
"sv": "Överst till vänster",
"th": "ซ้ายบน",
"zh-CN": "左上方",
"zh-TW": "左上角"
},
"value": "left top"
},
{
"label": {
"da": "Øverst i midten",
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"hi": "शीर्ष केंद्र",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
},
"value": "center top"
},
{
"label": {
"da": "Øverst til højre",
"de": "Oben rechts",
"en": "Top right",
"es": "Superior derecha",
"fi": "Ylhäällä oikealla",
"fr": "En haut à droite",
"hi": "शीर्ष पर दाईं ओर",
"it": "In alto a destra",
"ja": "右上",
"ko": "오른쪽 상단",
"nb": "Øverst til høyre",
"nl": "Rechtsboven",
"pt-BR": "Superior direito",
"pt-PT": "Canto superior direito",
"sv": "Överst till höger",
"th": "ขวาบน",
"zh-CN": "右上方",
"zh-TW": "右上角"
},
"value": "right top"
},
{
"label": {
"da": "Midt på til venstre",
"de": "Mitte links",
"en": "Middle left",
"es": "Al medio a la izquierda",
"fi": "Keskellä vasemmalla",
"fr": "Au milieu à gauche",
"hi": "मध्य में बाईं ओर",
"it": "Nel mezzo a sinistra",
"ja": "中央部左側",
"ko": "왼쪽 중간",
"nb": "Midt til venstre",
"nl": "Midden links",
"pt-BR": "Meio esquerdo",
"pt-PT": "Intermédio à esquerda",
"sv": "Mitten till vänster",
"th": "ซ้ายกลาง",
"zh-CN": "中间居左",
"zh-TW": "中央左方"
},
"value": "left center"
},
{
"label": {
"da": "Midt på centreret",
"de": "Mitte mittig",
"en": "Middle center",
"es": "Centrada en el medio",
"fi": "Keskellä keskellä",
"fr": "Centrée au milieu",
"hi": "मध्य केंद्र",
"it": "In mezzo",
"ja": "中心",
"ko": "가운데 중간",
"nb": "Midt i senter",
"nl": "Midden centrum",
"pt-BR": "Meio centro",
"pt-PT": "Intermédio ao centro",
"sv": "Mitten centrerat",
"th": "กึ่งกลาง",
"zh-CN": "中间居中",
"zh-TW": "正中央"
},
"value": "center center"
},
{
"label": {
"da": "Midt på til højre",
"de": "Mitte rechts",
"en": "Middle right",
"es": "Centrado a la derecha",
"fi": "Keskellä oikealla",
"fr": "Au milieu à droite",
"hi": "मध्य में दाईं ओर",
"it": "Nel mezzo a destra",
"ja": "中央部右側",
"ko": "오른쪽 중간",
"nb": "Midt til høyre",
"nl": "Midden rechts",
"pt-BR": "Meio direito",
"pt-PT": "Intermédio à direita",
"sv": "Mitten till höger",
"th": "ขวากลาง",
"zh-CN": "中间居右",
"zh-TW": "中央右方"
},
"value": "right center"
},
{
"label": {
"da": "Nederst til venstre",
"de": "Unten links",
"en": "Bottom left",
"es": "Inferior izquierda",
"fi": "Alhaalla vasemmalla",
"fr": "En bas à gauche",
"hi": "सबसे नीचे बाईं ओर",
"it": "In basso a sinistra",
"ja": "左下",
"ko": "왼쪽 하단",
"nb": "Nederst til venstre",
"nl": "Linksonder",
"pt-BR": "Inferior esquerdo",
"pt-PT": "Canto inferior esquerdo",
"sv": "Nere till vänster",
"th": "ซ้ายล่าง",
"zh-CN": "左下方",
"zh-TW": "左下角"
},
"value": "left bottom"
},
{
"label": {
"da": "Nederst i midten",
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"hi": "निचला केंद्र",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
},
"value": "center bottom"
},
{
"label": {
"da": "Nederst til højre",
"de": "Unten rechts",
"en": "Bottom right",
"es": "Inferior derecha",
"fi": "Alhaalla oikealla",
"fr": "En bas à droite",
"hi": "सबसे नीचे दाईं ओर",
"it": "In basso a destra",
"ja": "右下",
"ko": "오른쪽 아래",
"nb": "Nederst til høyre",
"nl": "Rechtsonder",
"pt-BR": "Inferior direito",
"pt-PT": "Canto inferior direito",
"sv": "Nere till höger",
"th": "ขวาล่าง",
"zh-CN": "右下方",
"zh-TW": "右下角"
},
"value": "right bottom"
}
]
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"da": "Overlejringens uigennemsigtighed",
"de": "Überlagerungsdeckkraft",
"en": "Overlay opacity",
"es": "Opacidad superpuesta",
"fi": "Peittokuvan läpinäkyvyys",
"fr": "Opacité de la superposition",
"hi": "ओवरले की अस्पष्टता",
"it": "Opacità della sovrapposizione",
"ja": "オーバーレイ不透明率",
"ko": "오버레이 불투명도",
"nb": "Overleggets gjennomsiktighet",
"nl": "Ondoorschijnendheid van overlay",
"pt-BR": "Opacidade de sobreposição",
"pt-PT": "Opacidade de sobreposição",
"sv": "Överlagring av opacitet",
"th": "ความทึบของการวางซ้อน",
"zh-CN": "叠加不透明度",
"zh-TW": "疊加層不透明度"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"da": "%",
"de": "%",
"en": "%",
"es": "%",
"fi": "%",
"fr": "%",
"hi": "%",
"it": "%",
"ja": "%",
"ko": "%",
"nb": "%",
"nl": "%",
"pt-BR": "%",
"pt-PT": "%",
"sv": "%",
"th": "%",
"zh-CN": "%",
"zh-TW": "%"
},
"default": 30
},
{
"type": "header",
"content": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"da": "Tekstfarve",
"de": "Textfarbe",
"en": "Text color",
"es": "Color de la fuente",
"fi": "Tekstin väri",
"fr": "Couleur du texte",
"hi": "टेक्स्ट का रंग",
"it": "Colore testo",
"ja": "テキストの配色",
"ko": "텍스트 색상",
"nb": "Tekstfarge",
"nl": "Tekstkleur",
"pt-BR": "Cor do texto",
"pt-PT": "Cor do texto",
"sv": "Textfärg",
"th": "สีข้อความ",
"zh-CN": "文本颜色",
"zh-TW": "文字顏色"
},
"default": "#ffffff"
},
{
"type": "select",
"id": "text_alignment",
"label": {
"da": "Tekstjustering",
"de": "Textausrichtung",
"en": "Text alignment",
"es": "Alineación de texto",
"fi": "Tekstin tasaus",
"fr": "Alignement du texte",
"hi": "टेक्स्ट पंक्तिबद्ध",
"it": "Allineamento del testo",
"ja": "テキストアラインメント",
"ko": "텍스트 정렬",
"nb": "Tekstjustering",
"nl": "Tekstuitlijning",
"pt-BR": "Alinhamento de texto",
"pt-PT": "Alinhamento de texto",
"sv": "Textjustering",
"th": "การจัดตำแหน่งข้อความ",
"zh-CN": "文本对齐方式",
"zh-TW": "文字對齊"
},
"default": "center",
"options": [
{
"label": {
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"hi": "बाएँ",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"zh-CN": "左侧",
"zh-TW": "左方"
},
"value": "left"
},
{
"label": {
"da": "Centreret",
"de": "Mitte",
"en": "Center",
"es": "Centrar",
"fi": "Keskitetty",
"fr": "Centre",
"hi": "केंद्र",
"it": "Al centro",
"ja": "中央",
"ko": "센터",
"nb": "Sentrer",
"nl": "Midden",
"pt-BR": "Centro",
"pt-PT": "Centro",
"sv": "Centrera",
"th": "ตรงกลาง",
"zh-CN": "居中",
"zh-TW": "置中"
},
"value": "center"
},
{
"label": {
"da": "Højre",
"de": "Rechts",
"en": "Right",
"es": "Derecha",
"fi": "Oikea",
"fr": "Droite",
"hi": "दाएँ",
"it": "Destra",
"ja": "右",
"ko": "오른쪽",
"nb": "Høyre",
"nl": "Rechts",
"pt-BR": "Direita",
"pt-PT": "Direita",
"sv": "Höger",
"th": "ด้านขวา",
"zh-CN": "右侧",
"zh-TW": "右方"
},
"value": "right"
}
]
},
{
"type": "text",
"id": "slide_heading",
"default": "Image slide",
"label": {
"da": "Overskrift",
"de": "Überschrift",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"da": "Knaptekst",
"de": "Schaltflächenbezeichnung",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"hi": "बटन लेबल",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"da": "Knaplink",
"de": "Schaltflächenlink",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"hi": "बटन लिंक",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}
]
}
],
"presets": [
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"category": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"settings": {
"slider_home_auto": false,
"slider_home_rate": 7,
"slider_home_transition": "slide"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

 

0 Likes
Highlighted
Shopify Partner
7 0 4

I found the issue.
Note how in my initial instructions on this post step 3 says "Don't forget to close the a tag that you just added with </a> immediately before the </li>."
The reason why you are experiencing that issue, is because you only inserted this code to line 90:

<a href="{{ block.settings.button_link }}" style="position: relative;">

 

By doing this you completed step 2 but you have not yet completed the third step of inserting the closing tag to - in your case - line 131:

</a>

 

Insert the code above to line 131 and you should get this:

Capture.PNG

Everything should now be working the way intended.
Let me know if this works for you or if you encounter any issues.

Senior Software Engineer
0 Likes
Highlighted
New Member
5 0 0

Oh damn, what a stupid mistake haha! Thanks a lot for helping me!

0 Likes