> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/shoplock-login-required/widget-customization.md).

# Widget Customization

Customizing your password pop-up can be done from the **Settings** page on your Shopify app's backend.

1. <mark style="color:blue;">**Title:**</mark>

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

* **Title -** Set the title you want to display for your customers.
* **Password Label -** Set the name of the field where the password is to be entered.
* **Font Size -** Set the font size of your title.
* **Title Color -** Set the color of your title.
* **Bold Style -** Choose the font style: **Bold** or set the boldness number.

2. <mark style="color:blue;">**Customize Passcode Card:**</mark>

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

* **BG Color -** Set the background color of the passcode card.
* **Page BG Color -** Set the background color of the entire website page.
* **Width -** Set the width of the passcode card for the page.
* **Height -** Set the height of the passcode card.

3. <mark style="color:blue;">**Customize Button**</mark>

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

* **Width -** Set the width of the **Continue** button.
* **Height -** Set the height of the **Continue** button.
* **Color -** Set the color of the **Continue** button.
* **Border Color -** Set the border color of the **Continue** button.

4. <mark style="color:blue;">**Write Short Note:**</mark>

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

You can add a customized message for your customers.