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

Solved

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

BraxtonEcom
Explorer
90 0 18

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
491 167 172

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 4 (4)

zack_dev
Shopify Partner
92 15 15
<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
Shopify Partner
1317 233 281

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
491 167 172

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

BSSCommerce-HDL
Shopify Partner
2305 835 910

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

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