New Shopify Certification now available: Liquid Storefronts for Theme Developers

The tutorial makes the image slideshow clickable on the Dawn theme

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

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 a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Replies 16 (16)
StudioEnchant
Shopify Partner
242 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
5679 1047 1073

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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
5679 1047 1073

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

VeronikaF
Tourist
8 0 2

I see 🙂

Finally works...thanks a lot

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

You are very welcome

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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
5679 1047 1073

Please send me your store link to check

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

VeronikaF
Tourist
8 0 2

vesimidesign.com

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

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 a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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
5679 1047 1073

You are always welcome.

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Chris742
Tourist
4 0 1

Okay, now it works for me. Thank you!

jenok
Tourist
7 1 0

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

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

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 a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now