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

Rach434
Tourist
4 0 3

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!

Replies 23 (23)

Nick
Shopify Staff (Retired)
4531 434 1024


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 

To learn more visit the Shopify Help Center or the Community Blog.

Rach434
Tourist
4 0 3

Thanks for the reply - the theme is turbo

Nick
Shopify Staff (Retired)
4531 434 1024

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

To learn more visit the Shopify Help Center or the Community Blog.

Abhay21
Visitor
3 0 0

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! 🙂

erin_raev
Visitor
3 0 0

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!

PageFly-Richard
Shopify Partner
4164 935 1586

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!

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.

Arundhungel
New Member
5 0 0

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-skir... BIG TURBO.JPG

BananaMoon
Excursionist
64 1 5

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,

Abhay21
Visitor
3 0 0
Hi, this will solve the problem.
Follow the instructions and the next/previous button will be gone.
Arundhungel
New Member
5 0 0

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

diego_ezfy
Shopify Partner
2934 562 883

@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

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

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

yahmean
Tourist
7 0 1

nope

PascalR
Shopify Partner
39 0 6

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

Abhay21
Visitor
3 0 0
Hey, can you send a screenshot of which arrows are you talking about?
PascalR
Shopify Partner
39 0 6
Hello,
the arrows on mobile phone on image product slide

[image: 1.GIF]

they are not on pc view

[image: 2.GIF]

Regards
Pascal

PascalR
Shopify Partner
39 0 6

1.GIF2.GIF

Kinjaldavra
Shopify Partner
2302 570 1422

@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;
}
}

  

PascalR
Shopify Partner
39 0 6

Thanks a lot. It works perfectly

Kinjaldavra
Shopify Partner
2302 570 1422

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

vivame
Explorer
74 0 8

I just had the same issue, and I know I'm very late on the subject but for anyone who wants to know...

To remove the Previous/Next links from the product page of Turbo theme

Go to product.liquid and remove lines 13 - 24: 

{% if collection.previous_product or collection.next_product %}
          <div class="nav_arrows breadcrumb_text">
            {% if collection.previous_product %}
              <a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
            {% endif %}
            {% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}

            {% if collection.next_product %}
              <a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
            {% endif %}
          </div>
        {% endif %}

 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @vivame 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

vivame
Explorer
74 0 8

Hi I have sent you my store and password, that is what I did to remove the previous/next breadcrumb links , is that what you would recommend?

neonfr
Tourist
3 0 0

@vivame Finally found the solution for this. Easy and fast! Thank you very much my friend. Works like a charm