# Configure color of app widget

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="#configure-color-of-text-and-button">Configure color of text and button</a></td><td><a href="/files/e2bldVQtqUPnBfZWri8q">/files/e2bldVQtqUPnBfZWri8q</a></td></tr><tr><td><a href="#how-does-lock-notifications-display-on-the-front-store">How does Lock notifications display on the front store?</a></td><td><a href="/files/e2bldVQtqUPnBfZWri8q">/files/e2bldVQtqUPnBfZWri8q</a></td></tr></tbody></table>

## 🔗 Configure color of text and button

This setting allows you configure of text, button and notification message  that describe the Locks on the front store.&#x20;

**Steps to manage**&#x20;

&#x20;1\. Open the app > click **Settings**&#x20;

&#x20;2\. In the **Color Settings** dropdown, select one of app config you want. They are **Placeholder resources, Price & Add to cart, Notification with passcode, Input passcode, Notifications with message**

<figure><img src="/files/Dn1kw4RU7i331wWvoQjG" alt=""><figcaption></figcaption></figure>

3\. Click color buttons on the left to change the color of text and buttons and view the result on the preview section on the right

<figure><img src="/files/KTtnOQYzKd9B8mdzR0Tv" alt=""><figcaption></figcaption></figure>

4\. Click **Save**&#x20;

Check the result on the front store

***

## 🔗 How does Lock notifications display on the front store?

After config the Lock access in the app, you want to check the result on the front store?&#x20;

Please view this article to know more how the Lock notification show up on your site.&#x20;

There are 5 configurations. They are **Placeholder resources, Price & Add to cart, Notification with passcode, Input passcode, Notifications with message**

### **Placeholder Resources**

On the collection page, the default lock icon shows up at the position of the product, below is the **Message** that notify about the hidden product.

<figure><img src="/files/Q5JXdikBTtu0IIhkJPFZ" alt=""><figcaption></figcaption></figure>

The Lock content is usually **Hide products on all pages**.&#x20;

### &#x20;**Price & Add to cart**

If you select setting to hide add to cart and product price for non-logged in customers, there will be **Login to see price** link/button on the front store that directs non-logged in customers to the login page.

<figure><img src="/files/ovxkFHFGHAXirWEDTD3l" alt=""><figcaption></figcaption></figure>

### **Notifications with passcode**

On the front store, the page or product price is hidden and customers only can view the page if they enter the passcode.&#x20;

The widget will include one lock icon, the passcode box and the message.&#x20;

For example:

* Enter the passcode to view the page

<figure><img src="/files/VpsmnpgzZ1y2jNRyjszJ" alt=""><figcaption></figcaption></figure>

### **Input passcode**&#x20;

The widget will include the passcode box and the message.&#x20;

For example:&#x20;

Enter the passcode to view product price

<figure><img src="/files/OdpNbOjOvgHkepjhD8Qz" alt=""><figcaption></figcaption></figure>

### **Notifications with message**

The widget will include a Lock icon, placeholder, notifications message, and a **Back** button that directs customers to the previous page.

<figure><img src="/files/cpYQDm1wYAQFtSJvpwQj" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Need support?**

If you do encounter any difficulty while proceeding these steps, don’t show any hesitation to contact us promptly via the email address [support@samita.io](https://help.samita.io/support@samita.io)
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.samita.io/b2b-lock-password-protect/configure-color-of-app-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
