How to remove arrows under product pictures?

Store Design
, , , ,

Topic summary

Goal: remove the arrow controls beneath product images on the mobile product gallery.

Key proposals:

  • CSS approach: add .slider-buttons { display: none !important; } to the theme’s CSS file (base.css/style.css/theme.css) via Online Store → Themes → Edit code → Assets, then save. This hides the mobile slider arrows.
  • Alternate placement: add code before the closing tag in theme.liquid; however, the actual code snippet isn’t provided in the thread. A screenshot indicates it achieves the desired result.

Latest update: the requester confirms progress and asks to “remove a little bit more only at the top,” suggesting further reduction of top spacing/margin above the gallery on mobile. No follow-up CSS for this refinement is provided yet.

Notes:

  • Images/screenshots are central to understanding the exact elements and spacing to remove.
  • Terms: CSS (Cascading Style Sheets) is used to style the theme; theme.liquid is the main layout file in Shopify themes.

Status: partially solved (arrows can be hidden). Further assistance needed to adjust additional top spacing; discussion remains open.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi, i want to remove the arrows under the product pictures on mobile version like i describe in the picture.

I hope you can help me:

my url: https://8ni0pc-bm.myshopify.com/

Unbenannt312312.png
Unbenannt312312.png394Ă—887 148 KB

43.png
43.png363Ă—447 72 KB

Unbenannt.png
Unbenannt.png357Ă—261 46.9 KB

Thank you.

1 Like
2

Hi @Anonymous

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.slider-buttons {
    display: none !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hey @Anonymous

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 tag

RESULT:

Moeed_0-1731346466046.png
Moeed_0-1731346466046.png347Ă—748 172 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Thank you. Is it possible to remove a little bit more only at the top like here:

58.png
58.png411Ă—390 113 KB