Liquid, JavaScript, themes, sales channels
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!
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.
Thanks for the reply - the theme is turbo
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.
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! 🙂
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!
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.
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...
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,
Sorry I did not get what this means? I will be grateful if you can elaborate. Sorry for my ignorance.
@Arundhungel Do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
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
nope
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
@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;
}
}
Thanks a lot. It works perfectly
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 %}
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.
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?
@vivame Finally found the solution for this. Easy and fast! Thank you very much my friend. Works like a charm
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024