Re: How do i get the slider buttons inside the image instead of as a bar? Taste theme

lisanchem · ‎10-03-2024

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

Tech_Coding · ‎10-03-2024

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee☕ Tips adds a little sweetness to my day.

View solution in original post

Moeed · ‎10-03-2024

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

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

BSSCommerce-HDL · ‎10-03-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

lisanchem · ‎10-14-2024

I realised after moving the slider buttons into the picture, my picture has been cropped. on top, how do i avoid this from happening?

Dan-From-Ryviu · ‎10-03-2024

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>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- 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.

GTLOfficial · ‎10-03-2024

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

lisanchem · ‎10-03-2024

Thank you, the button went in, but the white bar is still there, how can i get rid of that bar?

Tech_Coding · ‎10-03-2024