New Shopify Certification now available: Liquid Storefronts for Theme Developers

How do I remove price from collections page?

BethLawton10
Tourist
11 0 4

Hello, 

 

How do I remove the price from the collections page? 

 

URL is https://staysharp.global/


Thanks in advance

 

Replies 21 (21)
Dbuglabpvtltd
Shopify Partner
705 75 112

@BethLawton10 
You can use css property display none to remove the price from collection page.
Or you can remove the price from liquid code.

banned
VectorCommerce
Shopify Partner
4 0 1

@BethLawton10 

 

Do you want to remove the price from all collections, or are there some collections you want the price removed from while keeping prices on some?

 

You can edit your theme code to change that collection template and remove the pricing.

 

I would do this by creating a new collection template, and removing the code that shows the pricing. This way you can have two collection templates to choose from: one without price showing, and the other with price showing.

 

Hope that helps!

Anthony Booth
Owner, Vector Commerce LLC
Get in touch: info@vectorcommerce.co
ARTess
Excursionist
19 0 2

@VectorCommerce

 

I had this same question and I did what you said, I created another template to remove the pricing from just a certain collection but what code do I put in the json of that collection to remove the price tags from all products? I would also like to remove the "sold out" tags from this same collection?

 

JazzzArt
Visitor
1 0 0

Hey Artess - I was wondering if you ever found a solution? I'm in the same predicament with creating my template for collections that doesn't show the price. 

AvadaCommerce
Shopify Partner
3879 839 924

Hi @BethLawton10 ,

 

Do you mean to remove this table price from the collection page?

 

Screen Shot 2022-03-16 at 11.06.15 AM.png

 

Please confirm again. Thanks you

banned
BethLawton10
Tourist
11 0 4

Hello @AvadaCommerce 

 

I mean the prices underneath the products on the homepage. Sorry, my original message wasn't clear. 

 

BethLawton10_0-1647418060230.png

 

Any ideas?

 

Thank you 

 

mt686
Shopify Partner
52 9 17

Hello @BethLawton10 !

So I went ahead and wrote a bit off CSS that will have your desired effect:

 

 

 

{% if template.name == "index" %} 
{%style%}
.grid-product__price {
    display: none;
}
{%endstyle%}
{% endif %}

 

 

 

(Do this on a copy theme!) Go into your store admin, then go to Online Store > Themes > Actions (on your live theme) >  Edit Code. Then search and find the file named 'theme.liquid'. Add that code to either the very top or bottom of that file, then hit save. That should work, let me know if it doesn't!

 

Another way to do it would be to use the app Easy Edits: https://apps.shopify.com/easy-edits
If you use the app, you can just click on the prices on the home page and set the display to none (it gives you a click and change editor for your store). You can always make your edits, and then delete the app and keep the edits, without paying.


(Disclaimer: I'm the founder/developer behind the app)


Hopefully, that helped out, let me know if it did or if I can answer anything else!

BethLawton10
Tourist
11 0 4

@mt686 the code didn't work unfortunately. I can't use the app as our legal team have to approve any apps we use, so I'd have to go through the due diligence process. 

 

Thank you anyway 🙂

mt686
Shopify Partner
52 9 17

Give this a try: 

 

{% style %}
.grid-product__price {
    display: none;
}
{% endstyle %}

 

Follow the same instructions to add it that I wrote before, and make sure to add it to a copy of your theme and look it over before publishing. Here's a screenshot after adding that code to your site:Screenshot (588).png


AvadaCommerce
Shopify Partner
3879 839 924

Hi @BethLawton10 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.grid-product__price {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
vannivrystaat
New Member
5 0 0

Hi, how can I remove the product pricing from my collection page:

Just this collection page: 

https://vannivrystaat.co.za/collections/biltong we use DEBUT as theme.

Danajeannebell
Visitor
2 0 1

Hello, I just tried this and it didn't work for me. 

Danajeannebell
Visitor
2 0 1

I tried the below {% style %} .grid-product__price { display: none; } {% endstyle %} and it worked! Thanks!

Web_Sidd
Visitor
1 0 0

Hi!

where did you paste this content? Is it in theme.liquid or in the collection.json?

thanks

TomMc
Excursionist
29 3 5

Wouldn't the code need to be redone anytime there is an update to the theme? Thanks, Mt686. What a cool editing app, BTW. 

sarah_payne
Visitor
1 0 0

Hi I I'm looking to remove the prices in only one collection, as I'm not sure if I would be capable of inserting code, I have downloaded your app, but for some reason it's not working?  it says 

Application error

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

Spac-es
Shopify Partner
160 37 53

"Remove prices in collections tab"

 

I had the same concern, and managed to figure out how to do this in just a few steps. I want to share it here in case anyone else needs it!

 

(I'm using the default DAWN theme, although the idea should work in any Shopify theme)

 

1- Go to your store code and look for the following file called: price.liquid

 

1.PNG

 

2- Add the following code after the container: <div class="price__container">

 

 

  {% if collection.url contains '/collections' %}
    {%- assign show_price = false -%}
  {% else %}
    {%- assign show_price = true -%}
  {% endif %}
  
  {% if show_price %}

 

 

3- Remember to close the condition {% if show_price %} at the end of the code with {% endif %}. Line 93 in my case. The code will look something like this:

 

2.PNG

 

4- Save the file. In the collections tab you will no longer see the prices on the products.

 

I hope it has helped you!

ChampTableTech
Visitor
1 0 1

Thank you very much it worked! I tried all the other code but it didn't work for me, except for yours. The prices in my collections are hidden now thank you again!

hbenik
New Member
10 0 0

This looks like a great solution, but I don't seem to have <price.liquid> in my code? Using the impulse theme....

Spac-es
Shopify Partner
160 37 53

I have tried to download that template to find what the file is called in that specific topic, but since it is paid, I had to search the internet and there is no information about it. I would recommend asking an expert on the subject, or requesting support to find out what name they use for price.liquid

hbenik
New Member
10 0 0
Ok, thank you!