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:
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:
(2) End 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.