Solved

Remove The Swipe Arrows & Image Number Below Product Images On The Product Page (Dawn Theme)

BraxtonEcom
Explorer
90 0 17

I would like to remove the slide arrows and image number below the product image, so that they are no longer visible on mobile view.

 

e.g. it removes '<   1/2   >' completely

 

Any advice is appreciated.

 

URL: https://www.soundshield.co.uk/

 

BraxtonEcom_0-1714925345794.png

 

Braxton
Accepted Solution (1)

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@BraxtonEcom Please follow below steps to remove the swipe arrows & image number below product images on the product page. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Go to product page and click "Product information" section.
Vinsinfo_0-1714989147325.png

 

4. Locate "Custom CSS" field and paste the below code as like in the screenshot.

 

@media screen and (max-width: 749px) {
  .product__media-wrapper .slider-mobile-gutter .slider-buttons {
    display: none;
  }
}

 

Vinsinfo_1-1714989156215.png

 

5. Save the changes.
 
Result will be like,
Vinsinfo_2-1714989369675.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 4 (4)

zack_dev
Shopify Partner
75 14 10
<style>
@media(max-width:768px){
.grid__item.product__media-wrapper .slider-buttons {
    display: none;
}
}
</style>

you can place this code on theme.liquid at bottom see if it removes the arrows.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media screen and (max-width: 767px){
  .product .slider-buttons{
      display: none !important;
  }
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

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


PageFly - #1 Page Builder for Shopify merchants.


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

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@BraxtonEcom Please follow below steps to remove the swipe arrows & image number below product images on the product page. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Go to product page and click "Product information" section.
Vinsinfo_0-1714989147325.png

 

4. Locate "Custom CSS" field and paste the below code as like in the screenshot.

 

@media screen and (max-width: 749px) {
  .product__media-wrapper .slider-mobile-gutter .slider-buttons {
    display: none;
  }
}

 

Vinsinfo_1-1714989156215.png

 

5. Save the changes.
 
Result will be like,
Vinsinfo_2-1714989369675.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

BSSTech-Venture
Shopify Expert
427 103 117

Hi @BraxtonEcom 

 

Please follow the instructions below:

 

1. from Admin, Online Store =>  Edit code

2. Choose file base.css in Asset folder, insert this code at the end of file:

.product--thumbnail_slider slider-component.slider-mobile-gutter .slider-buttons {
  display: none !important;
}

 

Here is result: 

image.png

 

 

Hope this can help you. 

Kind regards

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development