How can i remove arrows in dawn theme?

Store Design
, , , , ,

Topic summary

A user seeks to remove navigation arrows and a red-boxed section from their Dawn theme store—arrows on both desktop and mobile, and the red box section only on mobile.

Solution provided:

  • Remove arrows: Add CSS code hiding .details-disclosure elements above the </body> tag in theme.liquid
  • Remove slider buttons: Add code hiding .slider-buttons above </style> in theme.liquid
  • Reduce spacing: Apply custom CSS targeting specific collection list wrapper and slider elements with padding-bottom: 0 and margin-bottom: 0

Implementation issue:
The user initially struggled with code placement. The helper clarified that CSS snippets should be added above </style> at the end of theme.liquid (not above <head>), and suggested moving all style code below <head> for proper functionality.

The discussion involves iterative troubleshooting with screenshots showing before/after results, with the user requesting progressively more spacing adjustments.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi, i want to remove the arrows like i describe in the picture and remove the part in red. I want to remove the arrows in desktop and mobile version and remove the part in the red box only on mobile. I hope you can help me. Thank you :slightly_smiling_face:

I’m using the newest dawn theme and my url is: https://8ni0pc-bm.myshopify.com/de

123.png
123.png381×642 176 KB

2

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-1731342257350.png
Moeed_0-1731342257350.png1901×913 381 KB

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

Best Regards,
Moeed

1 Like
3

Amazing. Thank you.

I add a picture to my question. Is it impossible to remove the part in the red box under the category bubbles?

Kind regards

4

Hey @Anonymous

Keep the previous code and add this new code above in the end of theme.liquid file

.slider-buttons {
    display: none !important;
}

RESULT:

Moeed_0-1731342595222.png
Moeed_0-1731342595222.png375×663 249 KB

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

Best Regards,
Moeed

1 Like
5

Thank you. Is it possible to remove a little bit more like here:

Moeed_0-1731342595222.png
Moeed_0-1731342595222.png373×422 163 KB

6

You can add this code.

.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--23452401336584__collection_list_PUpHEH-padding {
    padding-bottom: 0 !important;
}
ul#Slider-template--23452401336584__collection_list_PUpHEH {
    margin-bottom: 0 !important;
}

RESULT:

Moeed_0-1731342953233.png
Moeed_0-1731342953233.png374×662 248 KB

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

Best Regards,
Moeed

1 Like
7

Thank you. Where should i put the code? I put it above head but it looks like this now:

head.png
head.png379×663 163 KB

1 Like
8

Add it above in the end of theme.liquid file as last time.

Best Regards,

Moeed

1 Like
9

I add it here at abouve the last and its not working.

212.png
212.png1841×710 63.8 KB

10

Drag all of this code from to below and it should be good then.

1 Like