Hello,
I want the Slideshow clickable and the Button, can anyone help me <?
domain: www.45keys.com
theme: Prestige
Topic summary
A user needed help making both the slideshow images and buttons clickable on their Shopify store (45keys.com) using the Prestige theme.
Solution provided:
- Custom CSS code that makes the entire slide clickable while preserving button functionality
- The code uses pseudo-elements (
:after) to create an overlay that captures clicks across the entire slide
Implementation steps:
- Navigate to Online Store → Theme Customize
- Add a “Custom liquid” or “Custom code” section
- Paste the CSS wrapped in
<style>tags
Key technical note: Shopify’s “Custom CSS” field doesn’t accept this particular code, requiring it to be placed in either the stylesheet asset or a custom liquid section.
The solution was successfully implemented after the user received visual guidance via screenshot showing the correct placement of the code block.
The CSS code to make entire slide clickable and still show the button is this.
Unfortunately, Shopify would not accept it to “Custom CSS”, so it either has to go to your stylesheet asset, or,
add a “Custom liquid” / “Custom code” section and paste the code wrapped with <style> before and </style> after.
.slideshow__slide a:after {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.slideshow__slide .slideshow__slide-content,
.slideshow__slide a {
position:initial;
}
Hey, where I have to place the code
In Online Store=> Theme Customize:
add a “Custom liquid” / “Custom code” section and paste the code wrapped with
<style>before and</style>after.
<style>
.slideshow__slide a:after {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.slideshow__slide .slideshow__slide-content,
.slideshow__slide a {
position:initial;
}
</style>
Done but nothing changed
Not seeing it at your site? How did you do it? Screenshot?
Share a preview link if modifying draft theme.
Perfect worked, thank you
1 Like