Hiding the price on a collection. Debut theme - HELP greatly appreciated!!

Amanda_Nilsson
New Member
1 0 1

Hi all.

I'm new to Shopify but am learning a lot and loving the set-up.

I'm struggling with the HTML trying to hide the price on my collections.

I just want to show 5 products from the collection on my homepage without showing any prices.

I've youtubed it but I'm struggling still and the only way I've found is to delete certain HTML which seems to hide all the prices of the products, which isnt what I wanted.

Any help would be greatly appreciated! Been trying for a number of days now but can't seem to solve it.

Thankyou in advance!

Amanda

Replies 22 (22)
Agile_Media_Ven
Shopify Partner
20 0 13

Amanda -

You don't mention which theme you're using. (EDIT: Sorry, you did mention in the title that you were using the Debut theme!) In my example below, I'm using the Supply theme. The specific steps for your theme might be different. Please back up your theme before making changes.

If you want to hide prices on all Collection pages -- both grid and list views -- you can comment out the appropriate code in product-list-item.liquid and product-grid-item.liquid. Below is an example using the product-grid-item.liquid.

    <p>{{ product.title }}</p>
	{% comment %}
    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        <small>product-grid-item.liquid</small>
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>
	{% endcomment %}

Don't get frustrated. It will definitely get easier :-)

Feel free to contact me directly if you have further questions.

Good luck!
James

tim
Shopify Expert
2925 143 1041

Hi Amanda, 

another approach would be to hide the price with CSS. If you want to hide all prices on the front-page, then you can add this code at the very bottom of your theme.scss.liquid  Asset:

/* hide product prices on the home page */
.template-index .product-price__price {
    display: none;
}

If you wish to hide price only in particular sections, this can be done as well, just the selector needs to be modified.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Michael_Augusti
New Member
2 0 0

Hi James,

This sounds like a great solution. I too am using the Debut theme but I cannot find product-list-item.liquid or product-grid-item.liquid in my templates/sections/snippets. The closest thing I can find is the product-card-list.liquid and product-card-grid.liquid snippets, but the code is different than what you show.

My goal is to hide the price for a certain collection. I can use a number of identifiers ex colelction name or price, I just need to know how to implement the code and where.

Please help! I have been trying to figure this out for a while now.

Thanks,

Michael

BERTON_CAREY
New Member
2 0 0

I have the same question - need to hide the pricing on the collection view for ONE collection. Debut theme

Diego_Garcia1
New Member
4 0 0

Same! in DEBUT THeme jus hide prices in a speciffic collection. PLEASE! 

sarhov
Shopify Expert
482 85 156

it is very easy to do, just need some small edits in theme.liquid for adding an identification of the collection (using collection handle) and then set css rules for hidding price.

1. go into edit code

 

2. open theme.liquid

 

3. in body class add the following

 

collection_{{collection.handle}}

make sure it is in body's class, after it should looks like this

<body class="template-{{ template | split: '.' | first }} collection_{{collection.handle}}">

So, now we can understand in which collection we are and specify css rules for those collection only, you collection handle is the string which is coming right after /collection/ in address bar, for example if you collection name is 'For Men' and your collection address is /collections/for-men our collection handle is for-men, and our specific class is collection_for-men

Also you can find the collection handle in dashboard, clicking on edit seo...

waNcX55

Now step 2

open theme.scss.liquid, scroll at the very bottom and add collection specific css rule, regarding the example above, it will be

.collection_for-men .price{
    display: none;
}

change part for-men, to whatever is your collection handle is

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

Diego_Garcia1
New Member
4 0 0

Hi, Thank You so much.

I have some issues can you please let me know if I'm doing it fine?

Captura de pantalla 2019-04-24 a la(s) 09.53.17.pngCaptura de pantalla 2019-04-24 a la(s) 09.56.05.png

 

Thank You !!! 

sarhov
Shopify Expert
482 85 156
In theme.liquid, instead of writting the real handle write the keyword handle, so it should be {{collection.handle}}, it will output the real handle, and in scss everything is correct.

Let me know please if you could make it work.

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

Diego_Garcia1
New Member
4 0 0

It Works! 

Thank You so much!  You've been so helpful

Thank You @sarhov