Remove arrows on slide featured collection

Store Design
,

Topic summary

A user sought help removing navigation arrows from featured collections on their Shopify store’s homepage (using the Ride theme) and reducing bottom padding between sections.

Initial attempts:

  • First solution targeted .slider-buttons.no-js-hidden with CSS display:none
  • When this failed, !important was added to override existing styles
  • Still unsuccessful, so code was modified to target specific button classes (.slider-button--prev and .slider-button--next)

Working solution:
A different contributor provided custom CSS targeting the specific Shopify section IDs, which successfully:

  • Hid both previous and next slider buttons using display: none
  • Removed extra spacing by setting margin-top: 0px !important on the collection list and rich text sections

Implementation: The code was added to the theme.liquid file before the </body> tag.

Status: Resolved - the user confirmed the final solution worked.

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

Hello, can someone help me please to remove the arrows under those both featured collections on the homepage? And that the bottom padding is much smaller? it is RIDE THEME.

www.taneau.com

Thanks!

IMG_8463.jpeg
IMG_8463.jpeg1170×2532 153 KB

IMG_8464.jpeg
IMG_8464.jpeg1170×2532 127 KB

2

Hi @atm19 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.slider-buttons.no-js-hidden {
    display: none;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1709809253294.png
sahilsharma9515_0-1709809253294.png669×505 62.1 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi, thanks but it doesnt work. Do you have any other options?

4

Hi @atm19 Please use this code.

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

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

5

Still doesnt work:(

6

Hi @atm19 Please try to add this code.

button.slider-button.slider-button--prev {
    display: none !important;
}

button.slider-button.slider-button--next {
    display: none !important;
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

7

Doesnt work… Any other options please

8

Hello @atm19 ,

Please add the below mentioned code to remove the extra space between sections and arrows.

Copy & Paste the code at the bottom of theme.liquid file before tag and save.

section#shopify-section-template--21376786661720__collection_list_G8qAxg { margin-top: 0px !important; } section#shopify-section-template--21376786661720__rich_text_LV93xw { margin-top: 0px !important; } button.slider-button.slider-button--prev { display: none; } button.slider-button.slider-button--next { display: none; }

Output -:

Anshul_arora_0-1709810532570.png
Anshul_arora_0-1709810532570.png1539×815 114 KB

I hope the solution helps you.

Please let me know if you have any query.

Thank you.

2 Likes
9

It worked, Thanks!!!