How do you remove the preview/next buttons on a product description page?

Technical Q&A
1

I know it’s something with removing html/liquid from the code, but cannot seem to find it. Any assistance on where to find the code and remove it would be appreciated. Thank you!

2

Hi @Rach434 ,

Nick here from Shopify.

I spoke to our theme support team and this is something which is definitely possible. Would you be able to tell me what the name of the theme you are using is, please? The reason I ask is that each theme is different and the placement of the line of code could be different for each theme. To be able to give the best next steps, knowing which theme you are using will be a huge help.

Looking forward to hearing from you.

All the best, Nick

3

It’s hard to give you an exact answer without knowing your theme. If you are using the Chrome browser, however, you can right click on the buttons, choose “Inspect,” and find the div that contains them. You’ll want to copy the class name associated with the div. Then go to edit your theme’s code and find your main .scss file. It’s usually called theme.scss. At the bottom of this file insert .className (using the name you copied) and { display: none; }. Hope this helps!

4

Thanks for the reply - the theme is turbo

5

Hi @Rach434 ,

Thanks would it also be possible to reply with a link to the theme or highlight exactly what you mean when you say the Next/Previous buttons, please?

The Turbo theme is not in the Shopify theme store but is developed by a well-known developer for Shopify themes called Out of the Sandbox who could be worth reaching out to directly about this also.

Looking forward to hearing from you.

Nick

6

hey, @Rach434 , I see that you had a similar problem that I’m facing i.e how to remove the next/previous button. by any chance, you got the solution? will be happy to hear out from you! :slight_smile:

7

Hi

Could you provide the url of your page and a screenshot of what you want to remove? I could take a look to help you to remove it!

8

Hi I am facing the same problem in my product page. How to remove the next icon if anybody can assist. My product page URL is https://www.wezappa.com/collections/toys-kids-baby/products/little-laughs-children-comfy-diaper-skirt-pants

BIG TURBO.JPG
BIG TURBO.JPG422×271 4.47 KB

9

Hello,

You can still use “display:none;” on a CSS class (all elements of a page). It will hide it, but it’s not super recommended.

Have fun,

10

Hi, this will solve the problem.
Follow the instructions and the next/previous button will be gone.

11

Sorry I did not get what this means? I will be grateful if you can elaborate. Sorry for my ignorance.

12

@Arundhungel Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code

    admin-page.png
    admin-page.png1726×538 104 KB

  2. Find Asset > styles.scss.liquid and paste this at the bottom of the file:
.product .nav_arrows{
    display: none !important;
}

Please let me know whether it works.

Kind regards,
Diego

13

nope

14

Hello, we have turbo-portland theme. We did it because we want to delete arrow in products on mobile phone, but it does not work. Can you help us.

https://www.miami-hair-shop.com/

Regards

Pascal

15

Hey, can you send a screenshot of which arrows are you talking about?

16

@PascalR can you please sahre screenshort which arrow you want to delete arrow

17

Hello,
the arrows on mobile phone on image product slide

[image: 1.GIF]

they are not on pc view

[image: 2.GIF]

Regards
Pascal

18

1.GIF
1.GIF1167×671 206 KB

2.GIF
2.GIF1123×654 104 KB

19

@PascalR please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 769px){
 #shopify-section-product-template .flickity-prev-next-button svg {
    display: none !important;
}
}
1 Like
20

Thanks a lot. It works perfectly