[Updated] How to hide prices when customer is not logged?

Introduction

Shopify is a powerful e-commerce platform that caters to a wide range of businesses. However, not all merchants want to display prices to every visitor who lands on their store. Some store owners may prefer to reveal product prices only to logged-in customers, as it encourages user engagement and potentially leads to more conversions. In this article, we will demonstrate how to achieve this functionality using Shopify Liquid code, HTML, CSS, and JavaScript.

Why hide prices when customer is not logged?

Encourage User Engagement:

By concealing prices, you encourage visitors to create accounts or log in to access product details. This fosters greater interaction and involvement with your store, potentially leading to increased engagement and repeat visits.

Personalization:

Logged-in customers can have a more personalized shopping experience. You can display customized pricing, promotions, or product recommendations based on their previous browsing history or purchase behavior, making them feel valued as loyal customers.

Exclusivity:

Hiding prices creates a sense of exclusivity. It can make customers feel like they are part of a special group or community, which may motivate them to stay connected with your brand and be more likely to make purchases.

Competitive Advantage:

In some cases, hiding prices can give your store a competitive edge. It can prevent competitors from easily comparing your pricing structure and can create a unique shopping environment that sets you apart in the market.

Control Over Pricing Visibility:

Sometimes, merchants may have specific reasons for not wanting to publicly display prices to all visitors. This could be due to the nature of their products or target audience, or they might have a specific pricing strategy in mind.

Follow Below Steps:

Step 1: Understanding Shopify Liquid Code

Shopify uses its own templating language called Liquid, which allows merchants to customize their online stores. To hide prices for non-logged-in customers, we will utilize Liquid’s conditional statements to control the visibility of price elements.

Step 2: Check if the Customer is Logged In

We will first need to determine whether the customer is logged in or not. To achieve this, we can use Liquid code to access the customer object and check if it exists. If the customer is logged in, we will display the prices; otherwise, we will hide them.

{% if customer %}
  <!-- Display prices here -->
{% else %}
  <!-- Hide prices here -->
{% endif %}

Step 3: Adjusting Product Price HTML

To apply the hiding functionality, we need to modify the HTML where the product prices are displayed. Wrap the price elements in a div tag and assign the CSS class we created earlier.

{% if customer %}
  <!-- Display product prices for logged-in customers -->
  <div class="product-price">
    {{ product.price | money }}
  </div>
{% else %}
  <!-- Prices hidden for non-logged-in customers -->
  <div class="product-price hide-prices">
    {{ product.price | money }}
  </div>
{% endif %}

Step 4: Hiding Prices with CSS

We need to create a CSS class to hide the price.

<style>
  .hide-prices {
    display: none;
  }
</style>

Step 5: JavaScript to Handle Login and Logout

To ensure that prices dynamically change when a customer logs in or out, we can use JavaScript to listen for login/logout events and show/hide the prices accordingly.

<script>
  Shopify.CustomerAccount.switchToLogin(function() {
    // Callback when the customer logs in
    document.querySelector('.hide-prices').style.display = 'block';
  });

  Shopify.CustomerAccount.switchToLogout(function() {
    // Callback when the customer logs out
    document.querySelector('.hide-prices').style.display = 'none';
  });
</script>

Conclusion

By following the steps outlined above, you can easily implement a feature on your Shopify store that hides prices from non-logged-in customers. Utilizing Liquid code, HTML, CSS, and JavaScript, you can create a seamless user experience that encourages visitors to create accounts and engage more with your store, potentially leading to increased conversions. Remember to test the functionality thoroughly before making it live, and you’ll be on your way to a more personalized shopping experience for your customers. Happy selling!

Related Article: How to know in Liquid when a user is Logged-in on Thank you page

Read About: Shopify Customers