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

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
9218 1566 1934

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

oscprofessional
Shopify Partner
9218 1566 1934

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;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 30 (30)
Ajay_kumar_dev
Shopify Partner
166 14 12

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

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
Ajay_kumar_dev
Shopify Partner
166 14 12

Let me check 

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
Ajay_kumar_dev
Shopify Partner
166 14 12

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 

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
GregoryKika
Tourist
18 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
9218 1566 1934

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

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

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

oscprofessional
Shopify Partner
9218 1566 1934

You have to add the schema in slideshow.liquid file

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 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