FROM CACHE - en_header

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

Solved
GregoryKika
Tourist
24 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

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
12515 1931 2478

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.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
12515 1931 2478

This is an accepted solution.

Hi

Please add the code in theme.scss.css file

.flex-viewport .slides li h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: red;/*just to highlight the text. change it as per requirement*/
}
.flex-viewport .slides li {
    position: relative;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 28 (28)
Ajay_kumar_dev
Shopify Partner
176 16 14

@GregoryKika , kindly share the store url, share password as well if password protected. 

-If the problem is solved remember to click to Accept Solution
-if you want to modify or Customize your theme
Hire me
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888

Figma to Shopify |PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO | Speed optimization
GregoryKika
Tourist
24 0 0
Ajay_kumar_dev
Shopify Partner
176 16 14

Let me check 

-If the problem is solved remember to click to Accept Solution
-if you want to modify or Customize your theme
Hire me
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888

Figma to Shopify |PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO | Speed optimization
Ajay_kumar_dev
Shopify Partner
176 16 14

Hi @GregoryKika , well  you can use default slider of supply theme or shopify provide slideshow. 

Also, in default shopify slider, you can add multiple slides with text and images.

And regarding your custom requirements like ,you wants to add the text over image and have multiple slides as per your requirement. I can help you out.

At this point,  kindly add default shopify slider , and get back to me. Will do text over image. 

Thanks 

-If the problem is solved remember to click to Accept Solution
-if you want to modify or Customize your theme
Hire me
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888

Figma to Shopify |PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO | Speed optimization
GregoryKika
Tourist
24 0 0

Good morning, 

I changed the slider to have pictures without text, the text that need to be added on each image is in the Image Description

 

Could you also provide me a code to have an image with text on the side, plus a text on top of the image like this one (I would like to be able to edit them by myself in case I need to add/remove sections)

GregoryKika_0-1634803278200.png

 

Hope that helps.

 

Thank you for your help

oscprofessional
Shopify Partner
12515 1931 2478

Hello @GregoryKika 

You have to do some custom code in slideshow file to dyanamically add the text and subtext

You just have to create a schema for richtext .
Please refer the following code to create schema  shown below

<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>

{% schema %}
  {
    "name": "Rich text",
    "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>"
      }
    ],
    "presets": [{
        "name": "Rich text",
        "category": "Text"
    }]
  }
{% endschema %}

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Hey @oscprofessional , where exactly should I copy that code?

oscprofessional
Shopify Partner
12515 1931 2478

You have to add the schema in slideshow.liquid file

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

I get this error message when I try to add it

  • Line 433 — Liquid syntax error: Duplicate entries for tag: schema

GregoryKika_0-1634893437877.png

 

oscprofessional
Shopify Partner
12515 1931 2478

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.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0
oscprofessional
Shopify Partner
12515 1931 2478

You have to add it like this

2021-10-22_15-33.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Oh, perfect. Now it's working.

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

oscprofessional
Shopify Partner
12515 1931 2478

Yes, absolutely correct.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 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
12515 1931 2478

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 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 %}
GregoryKika
Tourist
24 0 0

With the code you sent me, the text is now showing on the bottom of the picture.

I would like it to be above the picture and in the center, where the white line is

GregoryKika_0-1634898411562.png

 

oscprofessional
Shopify Partner
12515 1931 2478

@GregoryKika,

You have to set this via CSS code. Now only need to apply basic CSS just like to set position and width height that's it.

Also please You can mark it as an accepted solution. So other should know there are no action required for this thread.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing