Popup Customization
This tutorial will walk you through how to customize Age Verification Popup, allowing you to align it with your store’s branding.
From your Shopify admin dashboard, navigate to Age Verification Popup.
Select the Popup Customization tab.
Click the button "**Customize''** to go to the Settings tab.
Customize Background
Type:
Use the ''Default'' background if it aligns with your design and branding.
Or upload a custom image that is relevant to the content of the page or your brand.
Color:
If using a solid color, specify the desired hex code in the "Background color" field.
Note: In case you select "Default" for a solid color background.
Set Popup Background color:
Enter a hex code for the popup itself in the "Popup background color" field.
Add a Logo (Optional):
Upload a logo in .pnj or .jpg format to further customize the popup.
Heading Text:
Enter the main message in the "Heading text" field.
Adjust the size of the text by specifying a value in the "Text size" box.
Set the color of the heading by inputting the hex code in the "Text color" field.
Sub-heading Text:
Enter supporting information, such as age restrictions, in the "Sub-heading text" field.
Customize the text size and color by entering values in their respective boxes for size and hex code.
Customize Submit Button
Label:
Enter the text for the main action button in the "Submit button label" field (e.g., "OK").
Color:
Set the color for the submit button by entering the desired hex code in the "Button color" box.
Customize Cancel Button
Label:
Customize the cancel button label by typing in the "Cancel button label" field.
Color:
Adjust the cancel button's color by specifying the hex code in the "Button color" field.
Redirect URL:
Enter the URL where users will be redirected if they click "Cancel."
Validation Date Error Message:
Enter the error message to display if there is an issue with date validation.
Open Age Verification Popup in Shopify
From your Shopify admin dashboard, navigate to Age Verification Popup.
Select the Popup Customization tab.
Click the button "**Customize''** to go to the Settings tab.
Background Customization Guide
Customize Background
Type:
Use the ''Default'' background if it aligns with your design and branding.
Or upload a custom image that is relevant to the content of the page or your brand.
Color:
If using a solid color, specify the desired hex code in the "Background color" field.
Note: In case you select "Default" for a solid color background.
Set Popup Background color:
Enter a hex code for the popup itself in the "Popup background color" field.
Add a Logo (Optional):
Upload a logo in .pnj or .jpg format to further customize the popup.
Text Customization Guide
Heading Text:
Enter the main message in the "Heading text" field.
Adjust the size of the text by specifying a value in the "Text size" box.
Set the color of the heading by inputting the hex code in the "Text color" field.
Sub-heading Text:
Enter supporting information, such as age restrictions, in the "Sub-heading text" field.
Customize the text size and color by entering values in their respective boxes for size and hex code.
Button Customization Guide
Customize Submit Button
Label:
Enter the text for the main action button in the "Submit button label" field (e.g., "OK").
Color:
Set the color for the submit button by entering the desired hex code in the "Button color" box.
Customize Cancel Button
Label:
Customize the cancel button label by typing in the "Cancel button label" field.
Color:
Adjust the cancel button's color by specifying the hex code in the "Button color" field.
Redirect URL:
Enter the URL where users will be redirected if they click "Cancel."
Validation Date Error Message:
Enter the error message to display if there is an issue with date validation.
Updated on: 03/12/2024
Thank you!