> 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

The **Widget Customization** section allows you to personalize the appearance of your passcode form, newsletter popup, and email template to match your store's branding.

### <mark style="color:$primary;">Passcode Form Customization</mark>

The **Passcode Form Customization** section allows you to personalize the passcode form displayed to customers when they try to access protected content. You can customize the title, passcode field, colors, fonts, button, card layout, and preview the changes in real time.

#### <mark style="color:blue;">Step #1: Open Passcode Form Customization</mark>

* Navigate to **Widget Customization** from the left menu.
* Select the **Passcode Form** tab to customize the appearance of the passcode form.

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

#### <mark style="color:blue;">Step #2: Customize Title & Typography</mark>

Modify the title and passcode input label to match your branding.

You can customize:

* Title Text
* Passcode Input Label
* Title Font Size
* Title Font Color
* Title Font Weight

The live preview updates instantly as you make changes.

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

#### <mark style="color:blue;">Step #3: Customize Card & Container</mark>

Adjust the overall appearance of the passcode form.

Available settings include:

* Card Width
* Card Height
* Card Background Color
* Page Background Color

These settings help the passcode form blend seamlessly with your store's design.

<figure><img src="/files/1KsmBRBpTs8dRo9WSk8D" alt=""><figcaption></figcaption></figure>

#### <mark style="color:blue;">Step #4: Customize Submit Button</mark>

Personalize the appearance of the submit button.

You can configure:

* Button Text
* Button Width
* Button Height
* Button Background Color
* Button Border Color
* Button Border Radius
* Button Border Width

Changes are reflected immediately in the live preview.

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

#### <mark style="color:blue;">Step #5: Customize Footer Note</mark>

Add helpful instructions or additional information below the passcode form.

You can customize:

* Footer Note Text
* Note Alignment

**Example:** *"If you don't have a passcode, please contact our support team."*

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

#### <mark style="color:blue;">Step #6: Preview & Save Changes</mark>

Review all your customizations using the live preview displayed on the right side.

Once you're satisfied with the appearance, click **Save** to apply the changes.

Your customized passcode form will now appear whenever customers try to access protected content.

{% hint style="info" %}
**Note:** Any changes you save are reflected immediately on the storefront for all Passcode locks using this widget.
{% endhint %}

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

### <mark style="color:$primary;">**Newsletter Popup**</mark>

The **Newsletter Popup** customization allows you to personalize the newsletter subscription popup shown to customers before they can access protected content. You can customize the title, description, colors, fonts, button, input field, card layout, and preview the changes in real time.

<mark style="color:blue;">Step #1: Open Newsletter Popup Customization</mark>

Navigate to **Widget Customization** from the left menu.

Select the **Newsletter Popup** tab to customize the appearance of the newsletter subscription popup.

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

<mark style="color:blue;">Step #2: Customize Title & Typography</mark>

Modify the popup heading and description to match your brand.

You can customize:

* Newsletter Form Title
* Title Font Size
* Title Font Color
* Title Font Weight
* Newsletter Description
* Description Font Size
* Description Font Color
* Description Font Weight

The live preview on the right updates instantly as you make changes.

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

<mark style="color:blue;">Step #3: Customize Card & Container</mark>

Adjust the overall appearance of the popup card.

Available settings include:

* Card Width
* Card Height
* Card Border Radius
* Card Background Color

These settings help match the popup with your store's branding.

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

<mark style="color:blue;">Step #4: Customize Email Input Field</mark>

Customize the email input field that customers use to subscribe.

Available options include:

* Input Text Size
* Input Text Color
* Input Font Weight
* Input Background Color
* Input Border Color
* Input Border Radius

Changes are reflected instantly in the live preview.

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

<mark style="color:blue;">Step #5:  Customize Subscribe Button & Footer</mark>

Personalize the subscription button and footer text.

You can configure:

* Button Text
* Button Font Size
* Button Text Color
* Button Background Color
* Button Border Radius
* Footer Text
* Footer Font Size
* Footer Text Color

This allows the newsletter popup to better match your store's design.

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

<mark style="color:blue;">Step #6: Preview & Save Changes</mark>

Review all your customizations using the live preview displayed on the right side.

Once you're satisfied with the appearance, click **Save** to apply the changes.

The customized newsletter popup will now appear to customers when they access protected content.

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

Once the customization is complete, click **Save** to apply your changes.

Your Newsletter Subscription popup will now appear with the customized design whenever customers try to access protected content. Visitors will be required to subscribe to your Shopify newsletter before they can unlock the selected products, collections, pages, or other restricted resources.

You can return to **Widget Customization** at any time to update the popup's appearance, text, colors, fonts, layout, and email template to match your store's branding and improve the customer experience.

{% hint style="info" %}
**Note:** Any changes you save are reflected immediately on the storefront for all Newsletter Subscription locks using this widget.
{% endhint %}

## <mark style="color:$primary;">Email Template Customization</mark>

The **Email Template Customization** section allows you to personalize the email sent to customers containing their unique passcode. You can customize the email layout, colors, banner image, greeting, content, passcode box, and footer to match your store's branding.

#### <mark style="color:blue;">Step #1: Open Email Template Customization</mark>

* Navigate to **Widget Customization** from the left menu.
* Select the **Email Template** tab.

<figure><img src="/files/0l8MI5nKvBOpOg5pnTBF" alt=""><figcaption></figcaption></figure>

#### <mark style="color:blue;">Step #2: Customize the Email Container</mark>

Adjust the overall appearance of the email card.

Available settings include:

* Card Width
* Card Height
* Border Radius
* Border Color

These settings control the overall layout of the email.

<figure><img src="/files/8KbKxgPNVmmboq6o3HAw" alt=""><figcaption></figcaption></figure>

#### <mark style="color:blue;">Step #3: Customize Header & Banner</mark>

Personalize the email header.

You can customize:

* Header Background Color
* Header Font Color
* Header Font Size
* Header Icon
* Banner Image
* Image Fit
* Image Height
* Image Width

Upload your own banner image or use the default one.

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

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

#### <mark style="color:blue;">Step #4: Customize Greeting & Email Content</mark>

Edit the greeting and body text shown in the email.

You can customize:

* Greeting Text
* Greeting Font Size
* Greeting Font Color
* Paragraph 1
* Paragraph 2
* Content Font Size
* Content Font Color
* Text Alignment

This allows you to personalize the email message sent to customers.

<figure><img src="/files/5fE9rQqJt9Aq4UN4Pgqt" alt=""><figcaption></figcaption></figure>

#### <mark style="color:blue;">Step #5: Customize the Passcode Box</mark>

Configure the section that highlights the customer's passcode.

Available settings include:

* Background Color
* Border Color
* Title Font Size
* Title Font Color
* Passcode Font Size
* Passcode Font Color

This ensures the passcode remains clear and easy to read.

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

#### <mark style="color:blue;">Step #6: Customize Support Text & Footer</mark>

Personalize the bottom section of the email.

You can configure:

* Support Text
* Support Font Size
* Support Font Color
* Footer Greeting
* Footer Text
* Footer Font Size
* Footer Font Color

Use {shopname} in the footer text to automatically display your Shopify store name.

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

#### <mark style="color:blue;">Step #7 Preview & Save Changes</mark>

Review the email using the live preview.

Once you're satisfied, click **Save** to apply the changes.

The customized email template will be used whenever the app sends passcodes to customers.

{% hint style="info" %}
**Note:** Any changes you save are applied immediately to all future passcode emails sent through the app.
{% endhint %}

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