How to Hide Prices for Tagged Products in Shopify: Step-by-Step Guide

Are you looking to hide product prices on your Shopify store based on specific tags? Here's a comprehensive guide on how to achieve this using different methods. You can also download the source code from the description below.

Method 1: Using CSS for Price Concealment

Step 1. Tag the Product:

• Navigate to your Shopify admin panel and select a product.
• Add a tag like `hide_price` to the product.
• Save the product settings.

Step 2. Edit Theme Code:

• Duplicate your current theme to avoid making changes to the live theme.
• Go to "Actions" -> "Edit Code".
• Search for "price" in the code files.
• Locate the `price-container` in `price.liquid`.
• Implement a condition to check for the `hide_price` tag and apply a hidden CSS class accordingly.
• Save your modifications.

Step 3. Outcome:

• Refresh the product page to see the price hidden if the `hide_price` tag is applied.
• Removing the tag will display the price again.

Method 2: Utilizing Liquid Code

Step 1. Remove Previous CSS Edits:

• - Delete any previously added CSS for hiding prices.

Step 2. Modify Main Product Liquid File:

• Look for `main-product.liquid`.
• Find the section responsible for displaying prices.
• Insert logic to suppress the entire price container if the product has the `hide_price` tag.
• Save the changes.

3. Result:

• When the product page reloads, the price container won’t render if the `hide_price` tag is present.
• Inspecting the page won’t reveal the hidden price, unlike the CSS approach.

Additional Technique Without Code using customizer: Custom Liquid Block

1. Customize Your Theme:

• Access the theme customization section.
• Navigate to the product page template (default or other).
• Add a custom liquid block in the product information area.

2. Implement Liquid Code:

• Copy and paste the provided Liquid code into the custom block.
• This code will hide the price for any product tagged with `hide_price`.
• Save your changes.

3. Outcome:

• The price will remain hidden for products with the `hide_price` tag.
• Toggle price visibility by adding or removing the tag from the product.

Conclusion

These methods offer flexible solutions to hide product prices in Shopify based on specific tags. Whether you prefer using CSS, Liquid code, or a custom liquid block, you now have the tools to customize price visibility on your Shopify store. Download the source code for these methods below and begin enhancing your store’s user experience today.

Related Keywords

Related article :

shopify different image for mobile slideshow , Header Menus for Different Pages in Shopify in custom , Instagram Icon Category Section in Shopify, how to change buy it now button shopify ,Create a stunning brand logo Slider for Shopify Stylish Slider Section in Your Shopify