Re: How do i get the slider buttons inside the image instead of as a bar? Taste theme
Hi,
I'd like for the slider buttons to be inside the image without having a bar that separates the slider section from the next section. Help needed! Thank you.
my site is: https://080d97-8b.myshopify.com/
pw: utredi
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--22121568567480__slideshow_y4eJmU {
margin-bottom: -44px !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hey @lisanchem
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.slideshow__controls.slider-buttons.slideshow__controls--border-radius-mobile {
background: transparent !important;
margin-top: -45px !important;
}
}
</style>RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @lisanchem,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
#shopify-section-template--22121568567480__slideshow_y4eJmU .slideshow__controls.slider-buttons {
position: absolute !important;
top: 45%;
left: 0;
width: 100%;
border: none;
display: flex;
justify-content: space-between;
}
#shopify-section-template--22121568567480__slideshow_y4eJmU .slider-counter.slider-counter--dots {
display: none !important;
}
#shopify-section-template--22121568567480__slideshow_y4eJmU span.svg-wrapper {
color: #fff !important;
scale: 2;
}
</style>Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
I realised after moving the slider buttons into the picture, my picture has been cropped. on top, how do i avoid this from happening?
Hi @lisanchem
You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.slider-buttons {
position: absolute !important;
bottom: 0;
left: 50%;
z-index: 4;
transform: translate(0, -50%);
border: unset !important;
}
</style>
Hello @lisanchem
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slideshow.css
add this code at the end of the file.
.slideshow__controls.slider-buttons.slideshow__controls--border-radius-mobile {
top: -45px !important;
border: none !important;
}result
If this was helpful, hit the like button and accept the solution.
Thanks
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--22121568567480__slideshow_y4eJmU {
margin-bottom: -44px !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
