Change the Look and Feel of the Age Gate

Go to WooCommerce->Agy->Design to modify the Look and Feel of your Age Gate. From changing colors, spacing, and setting background images or uploading your logo – you can customize it to fit your needs here.

Design Settings

Change the Look and Feel of the Age Gate 1


Here you can define a background color for the overlay (also in RGBA for transparency) or set a background image for the full-screen overlay. The zindex property specifies the stack order of an element. It’s simple: if you don’t see the overlay, increase the value until you see it.

Content Box

Agy comes with a column setting. Choose one column for the default and two columns if you want to add an additional image and display the text from the slogan setting in “Texts”. You can also set a maximum width for your Age Gate and modify the z-index. Make sure the z-index from the content box is always higher than the z-index from the overlay.

Design Settings 2


That’s pretty self-explanatory: Modify the background and font colors for any text which appears in the age gate.

Blur effect

You can blur the entire background of your website before the user verifies his age. This is a bit more modern and elegant way to hide the content but not put an entire picture in the background.

The blur effect container needs to be your parent container from the website which is above the overlay container. Here is a small screenshot to show you how to find it:

Agy - adding blur effect

The last setting is about the intensity of the blur effect. Choose a value from 0 to 2 and adjust it according to your needs.