Solved

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

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)
oscprofessional
Shopify Partner
15830 2369 3072

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
15830 2369 3072

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 28 (28)

Ajay-app-dev
Shopify Partner
178 16 14

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

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
GregoryKika
Tourist
24 0 0
Ajay-app-dev
Shopify Partner
178 16 14

Let me check 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
Ajay-app-dev
Shopify Partner
178 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 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
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
15830 2369 3072

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

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

oscprofessional
Shopify Partner
15830 2369 3072

You have to add the schema in slideshow.liquid file

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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
15830 2369 3072

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

I get another error

GregoryKika_0-1634896595468.png

 

oscprofessional
Shopify Partner
15830 2369 3072

You have to add it like this

2021-10-22_15-33.jpg

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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
15830 2369 3072

Yes, absolutely correct.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | 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
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Perfect, thank you so much!

GregoryKika
Tourist
24 0 0

Should I set the CSS in the slideshow.liquid file?

oscprofessional
Shopify Partner
15830 2369 3072

There is a theme.scss.liquid file inside Asset folder.
Add a css inside this file.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Should I add a css style in that part of the theme.scss.liquid file?

I can't figure out how to make it move to the top part of the image.

GregoryKika_0-1634910228265.png

 

oscprofessional
Shopify Partner
15830 2369 3072

You can add it at the end of file

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Sorry to bother you again, I can't seem to find the proper way to have it go where I want it.

I tried different position properties but I see no changes in the website.

oscprofessional
Shopify Partner
15830 2369 3072

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Thank you very much. Should I accept that as a solution too since it's a part of what I needed to do?

oscprofessional
Shopify Partner
15830 2369 3072

Please Accept it again

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing