> For the complete documentation index, see [llms.txt](https://www.locksmith.guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.locksmith.guide/tutorials/hiding-prices.md).

# Hiding product prices and/or the add to cart button

Locksmith can hide prices and buy buttons for locked products, so that customers can still browse your shop, but can only see prices and purchase products if certain conditions are met.

This is built into every lock's settings — no theme code required. Locksmith integrates directly with your theme's own price and buy-button code, so hiding follows the locked products wherever your theme displays them.

Here is an example of a product page that has been set up with Locksmith to hide prices:

![](/files/x9nflazetSKmyXDLTvqo)

Then, when the customer meets the conditions, the product pages will appear normally:

![](/files/084jC3YjqqNMUtTGxICx)

{% hint style="info" %}
**Note:** The results may look different depending on your Locksmith conditions, theme, or other settings.
{% endhint %}

Use the following two steps to set it all up:

## 1. Create a lock

The first step is to create a lock that covers the products that you would like to hide prices on. To do this, open up Locksmith and use the search bar on the main page of the app. If this is all of your products (most common), you can simply search for "all" and choose the "All Products" collection:

{% hint style="warning" %}
**Warning**: make sure to choose "Collection: All" and **not** "Collections Listing"
{% endhint %}

If you are only wanting to apply price hiding to some of your products, you can instead create a lock on different collection(s) or products that you want prices hidden for.

Once you've created the lock, you'll choose the conditions for access. Many merchants use the "Permit if customer is tagged with..." key condition, which lets you manually approve accounts for price access by adding a customer tag:

That's the most common way to set it up, but you have the freedom to choose whatever key conditions work for your setup.

## 2. Turn on hiding

In the lock editor, find the **Price & add-to-cart hiding** card, just below your keys. It has two settings:

* **Hide buy buttons** — hides the add-to-cart button, dynamic checkout buttons (like "Buy it now"), and quantity selectors for the locked products. This is what keeps locked products out of the cart.
* **Hide price** — hides the locked products' prices.

When you turn either setting on, Locksmith scans your published theme to find the places where it can integrate, and shows you a compatibility result for each setting. Save your lock, and Locksmith updates your theme automatically — and re-checks your theme every time it installs from then on, so theme updates are picked up on their own.

Where the buy buttons were, your visitors will see your lock's message content instead (a "Log in to purchase" button, a passcode prompt, or whatever fits your key conditions) — styled to match your theme.

## What gets hidden

Wherever your theme renders the locked products through its own templates: the product page, collection and search grids, featured-product sections, and quick-view popups. Unlocked products are never affected — hiding follows the locked products individually.

## Good to know

{% hint style="warning" %}
**Hiding prices without hiding buy buttons?** Prices always appear in the cart and at checkout — Shopify doesn't provide a way to hide them there. If you're hiding prices, we recommend hiding buy buttons too, so locked products can't reach the cart in the first place. The app will remind you about this combination.
{% endhint %}

{% hint style="warning" %}
While Locksmith hides the price visually, it may still be possible for someone viewing the page source (or using the browser console) to find it. This is because of things like SEO markup and analytics tools, which reproduce the price in the source — but not visually on the page — for their own usage.
{% endhint %}

{% hint style="info" %}
Prices displayed by **third-party apps** (page builders, currency converters, wishlist apps, and so on) render outside your theme's own code, so they aren't hidden automatically — but Locksmith support may still be able to help with these. Feel free to reach out.
{% endhint %}

{% hint style="info" %}
If your theme already contains **hand-written Locksmith code** (from the manual methods below), the automatic settings may not work well alongside it — the app will show a warning if it detects this. Write to us if you'd like help transitioning.
{% endhint %}

## If your theme shows "Incompatible"

Every theme is different, and occasionally Locksmith won't find a spot it can safely integrate with. If that happens, the app will say so rather than guessing — and this is exactly the kind of thing our support team is here for. [Write to us](/policies/contact.md) and we'll work with you to get your theme set up.

## Advanced: adjusting what Locksmith found

The scan's results are visible — and editable — on your theme's hiding profile page (**Themes → your theme → hiding profile**). Each automatic definition can be adjusted (its Liquid variable, whether it shows your replacement message), removed, or restored, and there's a reset if you'd like to return to the theme defaults. Your edits survive re-scans.

## Manual setup

The rest of this guide shows how to set up price hiding manually in your theme, using Locksmith's [manual mode](/tutorials/more/manual-mode.md) feature — an approach that can still be useful for special cases.

### Enable manual mode

Before saving your lock, turn on "Enable manual mode" right there in the lock (Clicking "Advanced" will show the option):

![](/files/L33CMyVWdNraB7AKCITV)

### Updating your theme for manual locking

You'll now need to let Locksmith know which parts of the page should be hidden. There are two methods to handling this:<br>

### Theme hiding profiles:

This method allows you define sections, blocks, or snippets which Locksmith will hide based on locks that have the Manual Locking option enabled.

This method shouldn't require any coding in your theme, *if* your theme is fully compatible. (Most modern themes are.) This is a newer feature, and we recommend trying this method first.

Here's a complete guide to setting this up:

{% embed url="<https://www.locksmith.guide/tutorials/more/how-to-hide-theme-sections-blocks-and-snippets>" %}
Theme hiding profiles: Hide prices without coding.
{% endembed %}

### Using manual locking code in your theme:

**Because each theme is a bit different, adding manual locking code will require manually editing your theme to hide your pricing or add to cart buttons.**

**If you install a new theme down the road, these changes will need to be re-applied.** Try the the Theme Hiding Profiles method first (outlined above), to avoid these limitations.

The rest of this guide gets a bit technical, we'll happily to the coding portion for you! If you've already created the lock described in step 1, simply write us a message at **<team@uselocksmith.com>** to request help.

{% hint style="danger" %}
**Note:** Locksmith's manual locking feature generally can ***not*** hide elements or sections that are being managed or displayed by other third-party apps, including page builder apps.\
\
Manual locking is only compatible with full-page locks, and is ***not*** compatible with variant locks.
{% endhint %}

If you are a developer type, and prefer to do the coding portion yourself, read on...\
\
You'll need to start by locating the places in your theme that show the price. Here are some examples of files that you might find the price in:

* snippets/product-card-grid.liquid
* templates/product.liquid
* snippets/product-card-list.liquid
* snippets/product-price.liquid

Each theme is very different, so those are simply examples. You'll need to go to each of the files that display price, and do the following steps:

1. Open up the Liquid file, and add this to the very top of the file:

   <pre class="language-liquid" data-overflow="wrap"><code class="lang-liquid">

   </code></pre>
2. Find the code you want to hide from unauthorized viewers, and wrap it with:

   <pre class="language-liquid" data-overflow="wrap"><code class="lang-liquid">

     &#x3C;!-- your price code here -->



   </code></pre>
3. To hide prices, you'll be looking for elements like:

   ```liquid
   {{ product.price }}
   ```

   ... or:

   ```
   {{ item.price }}
   ```

   **Example:**

   <img src="https://d33v4339jhl8k0.cloudfront.net/docs/assets/5ddd799f2c7d3a7e9ae472fc/images/5e27859c04286364bc9436f7/5e27859cb1aeb.png" alt="" data-size="original">

   This shows Locksmith manual locking code wrapping an entire price section, which I've highlighted.
4. Save!

Remember, those 4 steps need to be done for each file that display the price.

{% hint style="info" %}
In many cases, the above code only needs to be added to two or three files. Whichever file is in charge of displaying the price on **product** pages, **collection** pages, and **searches**. The latter two are oftentimes the same.
{% endhint %}

### Configuring Locksmith to hide the add-to-cart button only <a href="#hide-add-to-cart" id="hide-add-to-cart"></a>

You can still restrict purchasing products, while leaving the product details visible to the customer. This also a good option for those wanting to make sure that products are **available for search engines to index**.

**As a reminder**, we can help guide you through this process, including adding the code, so don't hesitate to get in touch.

Step 1 is exactly the same, but the code you add in step 2 will be slightly different.

Find the product-template or product-form file in your theme, and locate the code that generates the "add-to-cart" button. This is different for all themes, so it won't be possible to give you an exact location for this. Then, add the code that you want to render, inside of a Liquid "else" statement. For example:

{% code overflow="wrap" %}

```liquid
{% capture var %}{% render 'locksmith-variables', variable: 'access_granted', scope: 'subject', subject: product %}{% endcapture %}{% if var == 'true' %}{% assign locksmith_access_granted = true %}{% else %}{% assign locksmith_access_granted = false %}{% endif %}

{% if locksmith_access_granted %}
  <button type="submit">
    Add to cart button example
  </button>
{% else %}
  <p><strong>Product not available</strong></p>
{% endif %}
```

{% endcode %}

This results in the add-to-cart button being replaced, in cases where the customer doesn't have access. What is shown depends on what is added above. Just make sure your key conditions on the lock match the conditions that you want your customers to meet before being able to purchase.

#### For stores using Shopify's [legacy customer account system](https://help.shopify.com/en/manual/customers/customer-accounts/legacy-customer-accounts) (formerly "Classic customer accounts"):

If you need to render a "Login to purchase" button, use the following code (the button classes may need to be edited). This button includes a redirect to return customers after login:

{% code overflow="wrap" %}

```html
<a href="/account/login?return_url={{ request.path }}" class="btn button button button--full-width button--secondary">Log in to purchase</a>
```

{% endcode %}

#### For stores using Shopify's [customer account](https://help.shopify.com/en/manual/customers/customer-accounts/new-customer-accounts) system (formerly "New customer accounts":

If you need to render a "Login to purchase" button, use the following code (the button classes may need to be edited). This button will return customers after login:

{% code overflow="wrap" %}

```html
<a href="/customer_authentication/login?locale={{ request.locale.iso_code }}&return_to={{ request.path | url_encode }}" class="btn button button--full-width button--secondary">Log in to purchase</a>
```

{% endcode %}

#### For locks using passcode keys:

If you need to render a passcode prompt button, use the following code (the button classes may need to be edited):

{% code overflow="wrap" %}

```html
<button class="locksmith-manual-trigger btn button">Enter passcode to purchase</button>
```

{% endcode %}

#### For locks using location keys:

You can add an access denied message of location keys by adding paragraph tags and some text within the Liquid "else" statement, for example:

```html
<p><strong>Product not available in your country.</strong></p>
```

#### When using the "is tagged with..." key condition you can display a "Login to purchase" button *or* an access denied message depending on a visitors access:

<details>

<summary>Click here for an example</summary>

The following example includes an "else" statement that will:

* display an access denied message to customers who *are* signed in and *don't* have access to the lock.
* or a "Login to purchase" button for customers who aren't signed in.

```


  <button type="submit">
    Add to cart button example
  </button>


  
  

    <p style="font-weight: bold; padding-top:20px; padding-bottom:20px;">You do not have access to this resource.</p>

      <a style="width: 100%;" href="/customer_identity/sso_hint" class="btn button" data-locksmith>Log in to purchase</a>

  

```

**Note:** The above example uses a "Login to purchase" button for Shopify's [standard customer accounts](#for-stores-using-shopifys-customer-account-system-formerly-new-customer-accounts) system.

</details>

### Here are some visual examples of the result

#### Requiring, a sign-in:

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/5ddd799f2c7d3a7e9ae472fc/images/600d05382e764327f87c1b63/file-5T8frc6HsP.png)

#### **A passcode:**

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/5ddd799f2c7d3a7e9ae472fc/images/600d056e1c64ad47e4b724f8/Screen-Shot-2021-01-23-at-10.17.02-PM.png)

#### **A country-specific visitor:**

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/5ddd799f2c7d3a7e9ae472fc/images/600d05bf1c64ad47e4b724f9/file-tT77eLbVWn.png)

{% hint style="warning" %}
Please note: since the custom liquid code is added manually to the store theme, anytime you switch to a ***new*** or ***updated*** theme the custom code has to be manually added again to the new theme. We're always happy to add code to new or updated themes if you write into [team@uselocksmith.com](/policies/contact.md)\
\
We recommend leaving the new theme *unpublished* while you wait for the code to be added, so that nothing is exposed in the meantime. :)
{% endhint %}

{% hint style="info" %}
If Locksmith's custom manual locking code is added to an ***unpublished*** theme, please be sure to visit our guide below for instructions on testing:\
\
[Testing Locksmith on unpublished themes](/tutorials/more/testing-locksmith-on-unpublished-themes.md)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://www.locksmith.guide/tutorials/hiding-prices.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.