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
9417 1579 1967

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
| 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
9417 1579 1967

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
| 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 28 (28)
Ajay_kumar_dev
Shopify Partner
172 16 13

@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
18 0 0
Ajay_kumar_dev
Shopify Partner
172 16 13

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
172 16 13

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
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
9417 1579 1967

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
| 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
9417 1579 1967

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