Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Is there a way to create an overlay of text on the Supply theme slider?
No one answered !!! I need help on that too.
Follow this path:
Themes => Edit code => Sections => slideshow.liquid
Open file and replace the code by this code and open customize theme and start build your section.
Give me a like if it works 🙂
<hr>
<div class="flexslider" id="heroSlider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-slider-home-auto="{{ section.settings.slider_home_auto }}" data-slider-home-rate="{{ section.settings.slider_home_rate }}">
<ul class="slides">
{% for block in section.blocks %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.slide != blank %}
{% if block.settings.link %}
<a href="{{ block.settings.link }}" class="slide-link">
{% endif %}
{%- assign image = block.settings.slide -%}
{%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 1000 -%}
{%- assign max_height = 1500 -%}
{%- include 'image-logic' with width: max_width, height: max_height -%}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
{% if block.settings.heading_overlay != blank %}
<div class="slider-heading">
<h3 class="heading" style="font-size:{{block.settings.heading_size}}px; color: {{block.settings.heading_overlay_color}}">{{block.settings.heading_overlay}}</h3>
</div>
{% endif %}
<div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img
class="lazyload js {% if forloop.index > 1%}lazypreload{% endif %}"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% comment %}<img src="{{ image | img_url: '1024x' }}"
srcset="{{ image | img_url: '1024x' }} 1x, {{ image | img_url: '1024x', scale: 2 }} 2x" alt="{{ image.alt }}">{% endcomment %}
{% if block.settings.link %}
</a>
{% endif %}
{% else %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{% capture svg_tag_class %}placeholder-noblocks slide-link slide-link--{{ block.id }}{% endcapture %}
{%- assign placeholder = 'placeholder-lifestyle-' | append: current -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: svg_tag_class }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<style>
.slider-heading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 86;
}
</style>
{% schema %}
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"ms": "Tayangan slaid",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"zh-CN": "幻灯片",
"zh-TW": "投影片輪播"
},
"class": "slider-section",
"max_blocks": 6,
"settings": [
{
"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": "슬라이드 자동 회전",
"ms": "Slaid auto putar",
"nb": "Autoroter lysbildene",
"nl": "Dia's automatisch draaien",
"pt-BR": "Rodar os slides automaticamente",
"pt-PT": "Reprodução automática de diapositivos",
"sv": "Auto-rotera bilder",
"th": "หมุนสไลด์อัตโนมัติ",
"zh-CN": "自动旋转幻灯片",
"zh-TW": "自動旋轉投影片"
}
},
{
"type": "select",
"id": "slider_home_rate",
"label": {
"da": "Overførselstid",
"de": "Übergangszeit",
"en": "Transition time",
"es": "Tiempo de transición",
"fi": "Siirtymäaika",
"fr": "Temps de transition",
"hi": "हस्तांतरण का समय",
"it": "Tempo transizione",
"ja": "トランジション時間",
"ko": "전환 시간",
"ms": "Masa peralihan",
"nb": "Overgangstid",
"nl": "Overgangstijd",
"pt-BR": "Tempo da transição",
"pt-PT": "Tempo da transição",
"sv": "Övergångstid",
"th": "เวลาเปลี่ยน",
"zh-CN": "过渡时间",
"zh-TW": "轉場時間"
},
"options": [
{
"value": "5000",
"label": {
"da": "5 sekunder",
"de": "5 Sekunden",
"en": "5 seconds",
"es": "5 segundos",
"fi": "5 sekuntia",
"fr": "5 secondes",
"hi": "5 सेकंड",
"it": "5 secondi",
"ja": "5秒",
"ko": "5초",
"ms": "5 saat",
"nb": "5 sekunder",
"nl": "5 seconden",
"pt-BR": "5 segundos",
"pt-PT": "5 segundos",
"sv": "5 sekunder",
"th": "5 วินาที",
"zh-CN": "5 秒",
"zh-TW": "5 秒"
}
},
{
"value": "7000",
"label": {
"da": "7 sekunder",
"de": "7 Sekunden",
"en": "7 seconds",
"es": "7 segundos",
"fi": "7 sekuntia",
"fr": "7 secondes",
"hi": "7 सेकंड",
"it": "7 secondi",
"ja": "7秒",
"ko": "7초",
"ms": "7 saat",
"nb": "7 sekunder",
"nl": "7 seconden",
"pt-BR": "7 segundos",
"pt-PT": "7 segundos",
"sv": "7 sekunder",
"th": "7 วินาที",
"zh-CN": "7 秒",
"zh-TW": "7 秒"
}
},
{
"value": "10000",
"label": {
"da": "10 sekunder",
"de": "10 Sekunden",
"en": "10 seconds",
"es": "10 segundos",
"fi": "10 sekuntia",
"fr": "10 secondes",
"hi": "10 सेकंड",
"it": "10 secondi",
"ja": "10秒",
"ko": "10초",
"ms": "10 saat",
"nb": "10 sekunder",
"nl": "10 seconden",
"pt-BR": "10 segundos",
"pt-PT": "10 segundos",
"sv": "10 sekunder",
"th": "10 วินาที",
"zh-CN": "10 秒",
"zh-TW": "10 秒"
}
},
{
"value": "15000",
"label": {
"da": "15 sekunder",
"de": "15 Sekunden",
"en": "15 seconds",
"es": "15 segundos",
"fi": "15 sekuntia",
"fr": "15 secondes",
"hi": "15 सेकंड",
"it": "15 secondi",
"ja": "15秒",
"ko": "15초",
"ms": "15 saat",
"nb": "15 sekunder",
"nl": "15 seconden",
"pt-BR": "15 segundos",
"pt-PT": "15 segundos",
"sv": "15 sekunder",
"th": "15 วินาที",
"zh-CN": "15 秒",
"zh-TW": "15 秒"
}
}
]
}
],
"presets": [
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"ms": "Tayangan slaid",
"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": "이미지",
"ms": "Imej",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"blocks": [
{
"type": "image"
}
]
}
],
"blocks": [
{
"type": "image",
"name": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"ms": "Imej",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"settings": [
{
"type": "image_picker",
"id": "slide",
"label": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"ms": "Imej",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"info": {
"da": "1000 x 500 px anbefales",
"de": "1000 x 500px empfohlen",
"en": "1000 x 500px recommended",
"es": "1000 x 500px recomendado",
"fi": "Suositus 1000 x 500 px",
"fr": "1000 x 500 px recommandé",
"hi": "1000 x 500px की अनुशंसा की जाती है",
"it": "Dimensione consigliata: 1000 x 500 pixel",
"ja": "1000 x 500ピクセルを推奨",
"ko": "1280 x 800 픽셀 권장",
"ms": "1000 x 500px dicadangkan",
"nb": "1000 x 500 piksler anbefales",
"nl": "1000 x 500px aanbevolen",
"pt-BR": "1.000 x 500 px recomendado",
"pt-PT": "1000 x 500 px recomendado",
"sv": "1 280 x 800px rekommenderas",
"th": "แนะนำขนาด 1000 x 500px พิกเซล",
"zh-CN": "推荐使用 1000 x 500 px 大小",
"zh-TW": "建議使用 1000 x 500px"
}
},
{
"type": "url",
"id": "link",
"label": {
"da": "Link-webadresse",
"de": "Link URL",
"en": "Link URL",
"es": "URL del enlace",
"fi": "Linkin URL",
"fr": "Lien URL",
"hi": "URL लिंक करें",
"it": "Link URL",
"ja": "リンクURL",
"ko": "링크 URL",
"ms": "URL pautan",
"nb": "Nettadresse for kobling",
"nl": "URL van link",
"pt-BR": "URL do link",
"pt-PT": "URL da ligação",
"sv": "Länk-URL",
"th": "ลิงก์ URL",
"zh-CN": "链接 URL",
"zh-TW": "連結 URL"
}
},
{
"type": "header",
"content": "Header setting"
},
{
"type": "text",
"id": "heading_overlay",
"label": "Heading"
},
{
"type": "color",
"id": "heading_overlay_color",
"label": "Heading Color",
"default": "#333"
},
{
"type": "range",
"id": "heading_size",
"min": 18,
"max": 50,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 32
}
]
}
]
}
{% endschema %}
Hi,
I used this code but it still doesn't seem to work. I am still unable to add text to slideshow on the supply theme 😞 Can't figure out where I could be going wrong.
Hi @EssentialBoxx
What is your problem????
I can't get this to work - any ideas?
Michael you are a genius! Worked perfectly for me. Is there any way to also add a clickable button to the slider, or am I asking too much? 😅
This worked perfectly, thanks so much!
Hi Michael,
I've used your code to add text to my sliders and it works great, the only problem is they don't resize in mobile view, so you can't read them. If I make them small enough to read on mobile, they look tiny in desktop. I don't suppose there's a quick fix for that at all?
thanks & best regards
Eileen
I have the same resizing text issue as Eileen!
was there a resolution to the text issue?
User | RANK |
---|---|
238 | |
98 | |
88 | |
51 | |
42 |