NA Age Verification provides a variety of appearance options, but some merchants may require a level of customization beyond these settings.
The best way to achieve advanced appearance customization is by adding CSS rules to your Shopify theme, and this page offers some pointers and an example of how to do this. If you are not comfortable editing your Shopify theme or editing CSS files, then you may want to hire a web developer to do this for you.
NA Age Verification is added directly to your Shopify theme, which means that all of its HTML elements can be targeted with CSS code.
The best way to find the CSS class names used by the HTML elements is by using your web browser’s developer tools. Here’s an example of what that looks like:
The screenshot below shows the Google Chrome browser with the developer tools open. From here you can see all the class names that the NA Age Verification app uses.
You can see that the class used on the button is “agp__button”, for example. Now you can open your Shopify theme editor and make the CSS code changes to updates this element’s appearance.
Changing the colors of buttons (an example)
- Login to your Shopify website admin area.
- From the sidebar, click on “Themes”
- At the top of the page your live theme will be shown. Under the actions dropdown, click on “Edit code”. This will bring you to the Shopify code editor area.
- In the code editor’s sidebar, in the layout folder, click on the “theme.liquid” file. If NA Age Verification is installed you should see a line of code that reads “{% include ‘agechecker’ %}” near the bottom of the file.
- Right below this line paste the following code snippet:
<style>
.agp__button {
color: #ffffff !important;
background-color: #4BAD51 !important;
}
</style> - The code below will set the text color of the button to #ffffff (white) and background color to #4BAD51, a shade of dark green. You can edit these values to be whichever colors you prefer. You can use a website like https://htmlcolorcodes.com/ to find the hex code of the color that you have in mind.
