Step-By-Step Guide to Hiding Product Prices on Shopify
Discover a step-by-step guide to effectively hide product prices on Shopify, improving customer engagement and personalizing your store experience.
Updated October 9, 2024.
Shopify store owners might want to hide product prices for various reasons. One common scenario is for businesses offering custom or personalized products where prices can vary based on individual requirements, such as weight, shipping, distance, etc.
Another scenario is with B2B/wholesale or members-only storefronts that may not want to display product prices to customers who do not have a membership or account. Their product prices may be dependent upon the account or membership level, so it’s essential that prices are not displayed until customers are logged in.
» Use these Shopify automation tools to streamline your store and transform your business operations
Meet the Expert
Courtney Sharp is a marketing and e-commerce expert. Her marketing agency, Sharp Media Agency, specializes in digital marketing, branding, ads, and social media, with a strong focus on fashion, retail, and beauty commerce.
Step-By-Step Guide to Hiding Product Prices on Shopify
You can usually hide product prices by targeting the price code property using custom CSS in the theme editor on each page where you'd like to hide the prices. On the product page, there's often an option within the theme editor itself to hide the price, so no custom coding is needed.
Alternatively, you can go into the backend Theme Files and make these custom code modifications directly in the corresponding template section files.
Option 1: Using Theme Customizer
1. Access Your Theme Customizer
In your Shopify dashboard, navigate to Sales Channels > Online Store > Themes. Find the theme you want to edit and click on Customize.
2. Navigate to Product Page
For your product page simply navigate to your product template page and scroll to the section in the theme editor titled “Product Information."
3. Hide the Price
In the Product Information section, locate the "Price" field and click the eye icon next to it to hide the price.
4. Click Save Button
» Follow these best practices to organize your Shopify products and boost sales
Option 2: Using Custom CSS
With a bit of custom CSS, you can hide product prices on collection pages or more specific sections.
1. Navigate to the Collection Page
In the theme editor, navigate to the collection page where you want to hide prices and click on the Product Grid section. Scroll down to the Custom CSS Section.
2. Inspect the Price Element
Locate and copy the CSS class identifier that is tied with the price listed in this section. You can do this by hovering over the price and right-clicking > Inspect.
3. Add Custom CSS
Add the class identifier into the Custom CSS input field box in the following format.
.classidentifier {
Display: none;
}
4. Click Save
Take note: The choice of a Shopify theme can influence the process of hiding product prices. Some themes have options built into the theme editor where you can select to hide or not display the price. Almost all themes have this on the product page, but only specific themes have this option on the collection level.
» Need to update your inventory fast? Learn how to bulk edit your Shopify inventory in seconds and stay ahead
Do’s and Don’ts When Hiding Prices on Shopify
Do's:
- Clearly communicate: If prices are hidden, clearly communicate this to visitors. Use messaging like "Contact for Pricing" or "Price Available at Checkout" to manage customer expectations.
- Utilize conditional logic: If prices vary based on customization, employ conditional logic to display accurate pricing once customers input specific details, providing transparency in a personalized manner.
- A/B test: Experiment with different strategies for hiding prices, like revealing them at checkout versus keeping them entirely hidden, to gauge customer response and optimize for conversions.
Don't:
- Rely solely on hidden prices: While hiding prices can be useful for your business, you should make sure other product details, quality, shipping and delivery information, and unique selling points are prominently highlighted to maintain customer trust.
» Read these tips on Shopify price filtering and how it can improve conversions
Example of Successful Implementation of Hidden Prices
Last year, a members-only hardware store successfully implemented hidden prices by requiring customers to log in or create an account to view prices. This strategy not only facilitated the collection of valuable customer data but also allowed for the introduction of a personalized pricing structure based on membership levels.
As a result, the store experienced a 60% increase in customer email and SMS subscriptions, along with a rise in average order value (AOV) and repeat orders for each account. Additionally, customer satisfaction improved significantly, thanks to tailored pricing structures for VIP members.
» Did you know that you can change the order of products in Shopify?
Avoiding Confusion in Pricing
Customers can oftentimes become confused when product prices are hidden on a storefront, leading to a negative user experience. If you do decide to hide your product prices, make sure you clearly communicate your reason for hidden prices throughout your website in key stages of their user journey.
By maintaining transparency, you'll reduce friction and increase the chances of your ideal customer coming back. You can also provide alternative methods, such as reaching out for a quote or revealing prices at checkout, to maintain transparency and customer trust.
» Simplify price management with apps like Out-of-Stock Police to automate product visibility
