The tutorial makes the image slideshow clickable on the Dawn theme

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

You guys asked many questions about making an image slideshow clickable, you can refer to this article to know how to do it.

Required: you must add link to button of image slide.

After that, you just copy this code below, go to Online store >  Themes > Edit codes > Assets > open base.css and add it at the bottom of your file

 

 

.slideshow__text.banner__box,
.slideshow__text-wrapper { max-width: 100% !important; padding: 0 !important; }
.slideshow__text.banner__box { height: 100% !important; width: 100% !important; opacity: 0; }
.banner__buttons .button { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }

 

 

 

Or you can copy this code and add it to Custom CSS of Slideshow section in your Online store > Themes > Customize 

Screenshot 2023-08-23 at 15.42.08.png

P/S: You can use this code to do the same thing for other Shopify free themes, example for Refresh, Craft, Sense,... 

 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Replies 17 (17)

StudioEnchant
Shopify Partner
245 40 38

Great and simple tutorial, perfect!

Will help a lot of merchants

Thank you!

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.

Chris742
Tourist
4 0 1

Unfortunately, this didn't work for me.

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

Hi @Chris742 Can you share your store URL so I can check and help you? 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

VeronikaF
Tourist
8 0 2

Hello,

 

placed it to custom CSS. But also does not work.

Do you think I can ask you for help?

vesimidesign.com

 

Veronika

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

Please add link to button link of slide to make it works

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

VeronikaF
Tourist
8 0 2

I see 🙂

Finally works...thanks a lot

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

You are very welcome

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

VeronikaF
Tourist
8 0 2

Hello,

 

can I ask you one more thing? It does not work on mobile.

Dont have have any idea how to make it work?

 

Thank you.

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

Please send me your store link to check

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

VeronikaF
Tourist
8 0 2

vesimidesign.com

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

Please try to update code to this and check again 

.slideshow__text.banner__box,
.slideshow__text-wrapper { max-width: 100% !important; padding: 0 !important; position: absolute !important; height: 100% !important; }
.slideshow__text.banner__box { height: 100% !important; width: 100% !important; opacity: 0; }
.banner__buttons .button { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }

 

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

VeronikaF
Tourist
8 0 2

wow. It works, thank you so much for your help and amazing work!

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

You are always welcome.

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Chris742
Tourist
4 0 1

Okay, now it works for me. Thank you!

jenok
Excursionist
22 1 3

Hi - Will this work on an Image Banner? If so, is it the same code? 

Dan-From-Ryviu
Shopify Partner
7892 1533 1563

You can check this instruction for Image banner

https://www.buymeacoffee.com/dandong910/how-make-image-banner-clickable-shopify-dawn-theme

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jasoncristiano
Visitor
1 0 0

Hi Dan, I tried implementing your code but it is not working and I placed the link where the button link should go. Could you help please? Our site is not live yet - not sure what you need to have a look at that?