Slideshow add text and change alignment

[isabellemaria]

Hi there,

I want to add a slideshow to my product page https://taneraskin.com/products/peeling-handschuh (Dawn theme) and currently it looks like this:

I want the following changes:

• remove grey lines (mobile & desktop)

• display images on the right instead of the left side (desktop)

• ADD TEXT to the white space next to the image slide (desktop) that is displayed above the image in mobile version

How is this possible?

Best regards,
Isabelle

[Rahul_dhiman]

Hello @isabellemaria ,
The solution you are looking for is possible .
I can actually do this for you . Plus I see that you are using dawn theme .
I have created awesome stores in dawn theme .
https://t180-professional.myshopify.com/
Check this out .
https://olivalcosmetics.com/

If you are looking something close , I can create the design for you.

[BSSCommerce-B2B]

Hi @isabellemaria

Do you want the website to look like this?

You can follow the instructions below

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file component-slideshow.css (or base.css)

Did you find the following CSS snippet?

@media screen and (min-width: 750px) {
    slideshow-component {
        flex-direction: row;
    }
}

Please modify it to

@media screen and (min-width: 750px) {
    slideshow-component {
        flex-direction: row-reverse;
    }
}
.slideshow-text {
    display: flex;
    align-items: center;
}

Step 3: Search for the file global.js add this code snippet to the end of the file

window.onload = () => {
    let div = document.createElement("div");
    div.className = 'slideshow-text';
    div.textContent = 'Welcome to BSS Commerce';
    document.querySelector("slideshow-component")?.appendChild(div);
}

If it helps you, please like and mark it as the solution

Best regards.