Slideshow add text and change alignment

isabellemaria
Trailblazer
181 1 24

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:

 

Bildschirmfoto 2024-06-08 um 14.09.42.png               Bildschirmfoto 2024-06-08 um 14.10.00.png

 

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

Replies 2 (2)

Rahul_dhiman
Shopify Expert
83 14 32

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.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

BSSCommerce-B2B
Shopify Expert
263 40 37

Hi @isabellemaria 

Do you want the website to look like this?

BSSCommerceB2B_1-1717903653254.png

 

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development