Hide the price for certain products only in collection grid view

This tutorial explains how to add some Liquid code to product-grid-item.liquid in order to hide the price for certain products only. 

Example:

We will use a product tag to achieve this with our Liquid code. 

1

Use the bulk product editor to add a tag to these products

Open the main Shopify Product editor:

Select your products and add use Actions to add bulk tags:

For this example, we'll use the tag "no-price":

Tag as many products as needed for your store. 

2

Make a duplicate of your theme

Do not skip this step. 

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

3

Modify product-grid-item.liquid

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

From the Snippets folder, open product-grid-item.liquid:

PART 1:

At the very top of the file, add the following code:

Click to view code

Example:

Notice in the Liquid code we used ' no-price' as the tag. If you created or already have a different tag for these products, make the adjustment here:

PART 2:

Towards the bottom of the file, look for where the price wrapper begins:

(1) is the start of the price_wrapper and (2) is the end. Make note of the start and ending. The ending is the line before the closing </a> html tag.

We are going to add one line of code before the price wrapper start code and one line of code at the end of the code section, again before the closing </a> html tag.

Example with new start code (1) and end code (2):

Here's the code to add:

(1) Start code:

Click to view code

(2) End code:

Click to view code

Verify your start and end are correct. If you've modified this section of code from another tutorial, pay extra attention to the start of the price wrapper and end.

Save the file:

Be sure you've completed both parts of Step 3. There should be a total of three Liquid code changes

First one is added to the very top of the page and then two more lines of code, one at the bottom and the other at the end of the price wrapper. 

Still need help? Contact Us Contact Us