Customize zoom on image: remove arrows

Store Design
, ,

Topic summary

A user working with the Broadcast theme wants to remove navigation arrows that appear when zooming into product images.

Solution Provided:
Multiple community members offered nearly identical CSS-based solutions:

  • Navigate to: Online Store → Themes → Actions → Edit Code → theme.css (or base.css/style.css)
  • Add CSS code at the end of the file to hide the zoom gallery arrow buttons using display: none;
  • The code targets .pswp__button--arrow--left and .pswp__button--arrow--right classes

Key Details:

  • All solutions use CSS to hide the left and right arrow navigation buttons
  • Code should be placed at the bottom of the main stylesheet
  • Contributors included screenshots showing the expected result
  • The issue appears resolved, with the original poster thanking respondents
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

My theme is “broadcast” and I want to remove arrows on zoom image:

SPStore_0-1721296580640.png
SPStore_0-1721296580640.png413×846 120 KB

How can I remove them?

this is the link https://joybebeboutique.com/ , password is: stowdo

2 Likes
2

Hello @SPStore
Go to online store ---------> themes --------------> actions ------> edit code------->Theme.css
add this code at the end of the file.

.pswp[data-pswp-option-classes*="pswp-zoom-gallery"] .pswp__button--arrow--right, .pswp-zoom-gallery .pswp__button--arrow--right {
    display: none;
}
.pswp[data-pswp-option-classes*="pswp-zoom-gallery"] .pswp__button--arrow--left,  .pswp-zoom-gallery .pswp__button--arrow--left {
{
    display: none;
}

and the result will be

12.png
12.png1269×919 87.4 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.pswp__scroll-wrap .pswp__button.pswp__button--arrow--left {
display: none;
}
.pswp__scroll-wrap .pswp__button.pswp__button--arrow--right {
display: none;
}
4

Hi @SPStore

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
zoom-images.product__slides .slider__arrows {
    display: none;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Thanks a lot…
please hit the like button also.