Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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 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
Hi @JoleneXu
Could you share 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
Sure. My store link: segohair.com
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 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
User | RANK |
---|---|
228 | |
174 | |
65 | |
52 | |
48 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023