Custom Html Slideshow with Images and text on top of them (Supply)

Solved
GregoryKika
Tourist
18 0 0

Good morning everyone,

I'm trying to replace the standard Slideshow in the Supply theme with the same one, except I would need the pictures and the text to be separate (in order to save money with translation apps).

Does anyone know of a simple code that would help me achieve what I need to do.

Basically I would like to know:

1) How to add a text OVER an image

2) How to have multiple texts and image in a slideshow

It would also work if I could do something similar using the slideshow option.

 

Thanks to anyone who can help me

Replies 30 (30)
belly2021
Tourist
21 0 1

I also want to know if this can be done?

oscprofessional
Shopify Partner
9167 1561 1925

This is an accepted solution.

okay,
I can see the {%schema%} and {%endschema%} this two word repeating.

{
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }

 

directly add this code in your existing schema in block section.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

GregoryKika
Tourist
18 0 0
oscprofessional
Shopify Partner
9167 1561 1925

Yeah sure,
You can send me private message. I will share contact details there
 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9167 1561 1925

You have to add it like this

2021-10-22_15-33.jpg

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

Oh, perfect. Now it's working.

And what I'll add will appear in the slideshow editing options, right?

oscprofessional
Shopify Partner
9167 1561 1925

Yes, absolutely correct.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

So, the options panel changed in the Shopify editing part, but I cannot see what's in the text box over the image.

GregoryKika_0-1634897465181.png

 

oscprofessional
Shopify Partner
9167 1561 1925

Can you show me the HTML code for Heading and text?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

This is the whole code for the Slideshow part. I added the <section> part before closing the <div> tag

In the editor I just wrote the Word "Cuidado de la piel" for checking if it worked.

<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">
              <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>
  <section>
  {%- if section.settings.title != blank -%}
    <h2>{{ section.settings.title | escape }}</h2>
  {%- endif -%}
  {%- if section.settings.text != blank -%}
    <div class="rte">
      {{ section.settings.text }}
    </div>
  {%- endif -%}
</section>
</div>



{% schema %}
{
  "name": {
    "cs": "Prezentace",
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "hi": "स्लाइडशो",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pl": "Pokaz slajdów",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "tr": "Slayt gösterisi",
    "vi": "Bản trình chiếu",
    "zh-CN": "幻灯片",
    "zh-TW": "素材輪播"
  },
  "class": "slider-section",
  "max_blocks": 6,
  "settings": [
    {
      "type": "checkbox",
      "id": "slider_home_auto",
      "label": {
        "cs": "Automaticky otočit snímky",
        "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",
        "pl": "Automatycznie obracaj slajdy",
        "pt-BR": "Rodar os slides automaticamente",
        "pt-PT": "Reprodução automática de diapositivos",
        "sv": "Auto-rotera bilder",
        "th": "หมุนสไลด์อัตโนมัติ",
        "tr": "Slaytları otomatik olarak döndür",
        "vi": "Tự động xoay vòng trang chiếu",
        "zh-CN": "自动旋转幻灯片",
        "zh-TW": "自動旋轉投影片"
      }
    },
    {
      "type": "select",
      "id": "slider_home_rate",
      "label": {
        "cs": "Doba trvání přechodu",
        "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": "전환 시간",
        "nb": "Overgangstid",
        "nl": "Overgangstijd",
        "pl": "Czas przejścia",
        "pt-BR": "Tempo da transição",
        "pt-PT": "Tempo da transição",
        "sv": "Övergångstid",
        "th": "เวลาเปลี่ยน",
        "tr": "Geçiş süresi",
        "vi": "Thời gian chuyển",
        "zh-CN": "过渡时间",
        "zh-TW": "轉場時間"
      },
      "options": [
        {
          "value": "5000",
          "label": {
            "cs": "5 s",
            "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초",
            "nb": "5 sekunder",
            "nl": "5 seconden",
            "pl": "5 sekund",
            "pt-BR": "5 segundos",
            "pt-PT": "5 segundos",
            "sv": "5 sekunder",
            "th": "5 วินาที",
            "tr": "5 saniye",
            "vi": "5 giây",
            "zh-CN": "5 秒",
            "zh-TW": "5 秒"
          }
        },
        {
          "value": "7000",
          "label": {
            "cs": "7 s",
            "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초",
            "nb": "7 sekunder",
            "nl": "7 seconden",
            "pl": "7 sekund",
            "pt-BR": "7 segundos",
            "pt-PT": "7 segundos",
            "sv": "7 sekunder",
            "th": "7 วินาที",
            "tr": "7 saniye",
            "vi": "7 giây",
            "zh-CN": "7 秒",
            "zh-TW": "7 秒"
          }
        },
        {
          "value": "10000",
          "label": {
            "cs": "10 s",
            "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초",
            "nb": "10 sekunder",
            "nl": "10 seconden",
            "pl": "10 sekund",
            "pt-BR": "10 segundos",
            "pt-PT": "10 segundos",
            "sv": "10 sekunder",
            "th": "10 วินาที",
            "tr": "10 saniye",
            "vi": "10 giây",
            "zh-CN": "10 秒",
            "zh-TW": "10 秒"
          }
        },
        {
          "value": "15000",
          "label": {
            "cs": "15 s",
            "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초",
            "nb": "15 sekunder",
            "nl": "15 seconden",
            "pl": "15 sekund",
            "pt-BR": "15 segundos",
            "pt-PT": "15 segundos",
            "sv": "15 sekunder",
            "th": "15 วินาที",
            "tr": "15 saniye",
            "vi": "15 giây",
            "zh-CN": "15 秒",
            "zh-TW": "15 秒"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Prezentace",
        "da": "Diasshow",
        "de": "Slideshow",
        "en": "Slideshow",
        "es": "Diapositivas",
        "fi": "Diaesitys",
        "fr": "Diaporama",
        "hi": "स्लाइडशो",
        "it": "Presentazione",
        "ja": "スライドショー",
        "ko": "슬라이드 쇼",
        "nb": "Lysbildefremvisning",
        "nl": "Diavoorstelling",
        "pl": "Pokaz slajdów",
        "pt-BR": "Apresentação de slides",
        "pt-PT": "Apresentação de diapositivos",
        "sv": "Bildspel",
        "th": "สไลด์โชว์",
        "tr": "Slayt gösterisi",
        "vi": "Bản trình chiếu",
        "zh-CN": "幻灯片",
        "zh-TW": "素材輪播"
      },
      "category": {
        "cs": "Obrázek",
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pl": "Obraz",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "tr": "Görsel",
        "vi": "Hình ảnh",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "blocks": [
        {
          "type": "image"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "cs": "Obrázek",
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pl": "Obraz",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "tr": "Görsel",
        "vi": "Hình ảnh",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": [
{
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      },
        {
          "type": "image_picker",
          "id": "slide",
          "label": {
            "cs": "Obrázek",
            "da": "Billede",
            "de": "Foto",
            "en": "Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "hi": "इमेज",
            "it": "Immagine",
            "ja": "画像",
            "ko": "이미지",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pl": "Obraz",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "tr": "Görsel",
            "vi": "Hình ảnh",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          },
          "info": {
            "cs": "Doporučujeme 1 000 × 800 pixelů",
            "da": "1.000 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 픽셀 권장",
            "nb": "1000 x 500 piksler anbefales",
            "nl": "1000 x 500px aanbevolen",
            "pl": "Zalecane 1000 x 500 px",
            "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 พิกเซล",
            "tr": "1000 x 500 piksel önerilir",
            "vi": "Đề xuất 1000 x 500px",
            "zh-CN": "推荐使用 1000 x 500 px 大小",
            "zh-TW": "建議使用 1000 x 500px"
          }
        },
        {
          "type": "url",
          "id": "link",
          "label": {
            "cs": "URL odkazu",
            "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",
            "nb": "Nettadresse for kobling",
            "nl": "URL van link",
            "pl": "Adres URL linku",
            "pt-BR": "URL do link",
            "pt-PT": "URL da ligação",
            "sv": "Länk-URL",
            "th": "ลิงก์ URL",
            "tr": "Bağlantı URL'si",
            "vi": "URL liên kết",
            "zh-CN": "链接 URL",
            "zh-TW": "連結 URL"
          }
        }

      ]
    }
  ]
}
{% endschema %}