How To Remove Dot Background Hover on Slideshow Section

riveringroots · ‎07-25-2024

Hello,

I am looking for help removing the background hover effect on a slideshow section with the dot pagination style. No background hover on arrows, dot, and pause.

Secondly, is there a way to remove the pause button and have only the dots and arrows?

Lastly, could you help me remove the additional spacing under the slideshow on mobile view only and adjust the heading so it lines up with the image on the slideshow? (see first image above of desktop layout for reference)

Thank you so much!

https://c6374b-cf.myshopify.com/pages/interior-design

Pass: rtawqpt

Best Regards,
Rivering Roots

Sweans · ‎07-26-2024

Hi @riveringroots ,

To achieve these changes, follow the steps below:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.

3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following code:

<style>
button[aria-label="Pause slideshow"] { display: none; }
.slideshow__control-wrapper button:hover, .slideshow__control-wrapper .button:hover {
box-shadow: none !important;
background-color: none !important;
}
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
display: none;
}
}
</style>

5. Click Save to apply the changes.
By following these steps, you can customize your slideshow section according to your preferences.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

Dan-From-Ryviu · ‎07-26-2024

Hi @riveringroots

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
#shopify-section-template--17317971493022__slideshow_VQBX87 .slideshow__controls button:hover {
    background: unset !important;
    box-shadow: unset !important;
    transform: unset !important;
}
@media (max-width: 749px) {
#shopify-section-template--17317971493022__slideshow_VQBX87 .slideshow__text-wrapper { display: none !important; }
}
</style>

- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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

PageFly-Amelia · ‎07-25-2024

Hi @riveringroots

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.slideshow__controls.slideshow__controls--top {

display: none;

}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube

All features are available from Free plan. Live Chat Support is available 24/7.

Sweans · ‎07-26-2024

Hi @riveringroots ,

To achieve these changes, follow the steps below:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.

3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following code:

<style>
button[aria-label="Pause slideshow"] { display: none; }
.slideshow__control-wrapper button:hover, .slideshow__control-wrapper .button:hover {
box-shadow: none !important;
background-color: none !important;
}
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
display: none;
}
}
</style>

5. Click Save to apply the changes.
By following these steps, you can customize your slideshow section according to your preferences.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

riveringroots · ‎07-26-2024

Thank you!

Do you have any tips on how to get the heading on the slideshow mobile view to be lined up with the slider image similar to how it looks when viewing on a desktop?

Best Regards,
Rivering Roots

Sweans · ‎07-29-2024

Hi @riveringroots,

The question is a bit unclear. Could you please share a screenshot of the specific part you want to edit? This will help me understand the issue better and provide more accurate guidance.

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

riveringroots · ‎07-30-2024

Hi!

I'm so sorry. Please disregard this. I decided to center everything up on both desktop and mobile view, so I no longer need help with this.

Best Regards,
Rivering Roots

Dan-From-Ryviu · ‎07-26-2024

Hi @riveringroots

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
#shopify-section-template--17317971493022__slideshow_VQBX87 .slideshow__controls button:hover {
    background: unset !important;
    box-shadow: unset !important;
    transform: unset !important;
}
@media (max-width: 749px) {
#shopify-section-template--17317971493022__slideshow_VQBX87 .slideshow__text-wrapper { display: none !important; }
}
</style>

- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

riveringroots · ‎07-26-2024

Thank you!

Best Regards,
Rivering Roots

How To Remove Dot Background Hover on Slideshow Section

How To Remove Dot Background Hover on Slideshow Section

Community Blog Articles