Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

How To Make the Slideshow Banner Clickable - Dawn Theme

Solved

How To Make the Slideshow Banner Clickable - Dawn Theme

JoleneXu
Visitor
3 0 1

Hello! I am trying to figure out how to add a clickable link to my slideshow banner image on my home page. I've tried to use the button link, however, it works perfectly for desktop version, but it's quite weird on mobile view. The position of the button isn't adjustable, so when I use button label and link, the button blocks image caption from view. I've tried to select outline to make the button transparent but it's still weird on mobile. Any suggestions on how to insert link directly to slideshow banner image or how to adjust the button for mobile layout would be extremely helpful!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
11911 2339 2514

This is an accepted solution.

Hi @JoleneXu 

Please add link to button link of slideshow and then add this CSS code in Custom CSS of your Slidehow section and check if it works 

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
11911 2339 2514

Hi @JoleneXu 

Could you share your store link to check?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JoleneXu
Visitor
3 0 1

Sure. My store link: segohair.com

Dan-From-Ryviu
Shopify Partner
11911 2339 2514

This is an accepted solution.

Hi @JoleneXu 

Please add link to button link of slideshow and then add this CSS code in Custom CSS of your Slidehow section and check if it works 

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

lttoh
Shopify Partner
1 0 1

Hi, thank you for your solution. It work for me.

Dan-From-Ryviu
Shopify Partner
11911 2339 2514

Happy I could help!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

nsnnn
Visitor
1 0 0

why is it not working in mobile