From your store's Dashboard click the Site Designer icon in the left Navigation Menu.

The Modal Block can be added to any Page on your site. In this example, we will keep it to the Home Page. Using the Page: Home dropdown at the top of the Site Designer Page, make sure the page is set to Home, which it should be by default.

On the Home Page, mouse over the page until you see the Plus Sign icon to add a new block. Click the Plus Sign icon and locate the Promotionals section of the Add A Block menu. Open the section and choose Modal, using the Add Block button.

Once your block has been added, hover over the new header section and locate the gray Edit button. Use the Edit button to open the Edit Block menu and customize it.

The Edit Block menu for the Modal Block offers these options:

Header Block Controls

Trash Can Icon to Delete Block
Arrows to move block up or down the page

Make This Block Reusable Toggle

Configure:

Modal Type Dropdown (Informational or Age Verification)

Body Text Edit Button (Opens Text Editor)

How Many Days Before Modal Appears Again Input Field

Informational Settings:

Enable Button Toggle

Button Text Input Field

Button Style Dropdown (Primary or Secondary)

Button Links To Input Field

Age Verification Settings:

Enter Button Text Input Field

Enter Button Style Dropdown (Primary or Secondary)

Leave Button Text Input Field

Leave Button Redirects To Input Field

Leave Button Style Dropdown (Primary or Secondary)

Colors:

Modal Background Color Chooser

Modal Text Color Chooser

Modal Border Color Chooser

Modal Border Width Slider

Overall Transparency Slider

Make sure to click the Done button at the bottom of the block edit section to save your changes.

Additionally, you will need to click the green Publish button at the top of the page to make your changes live on your store.

Informational Versus Age Verification

The Modal is designed to have two potential functions. One is an informational section with an optional button directing your customers to more information. The second is as a simple Age Verification option with a redirect button. To change the version of Modal you are using, choose either Informational or Age Verification on the Modal Type Dropdown menu.

The informational Modal can be configured with or without a linked button. Using the Body Content Edit Text Button you can modify the fields message and the button text can be edited using the Button Text Input Field in the Information Settings section.

The Age Verification Modal can also be edited using the Body Content Edit Text button and it features 2 buttons that cannot be disabled. Both buttons feature editable text. The Leave button allows you to choose a link to send your under 18 visitors to.

It is important to note that this is a simple Age Verification button. Clicking the Enter button has no actual effect. Your customers are kept on the Homepage and not redirected anywhere else. Additionally, this Age Verification does not offer any tracking or logging ability. For a Modal with that functionality, contact our Studio Team for a custom-built Age Verification modal.

Did this answer your question?