Newsletter Pop-Up

The app offers you two layout options: a basic layout that is immediately available to you and an advanced layout in which you can design the pop-up via the shopping experiences completely freely.

Basic configuration

1. In your admin panel, go to "Extensions > My Extensions."

2. Install and activate the app.

3. Open the configuration and maintain everything in the "Settings" section and, if necessary, "Logo."

4. If necessary, customize the app's snippets to suit your needs.

5. Clear the cache under "Settings > System > Caches & Indexes > Clear Cache"

Result: You have successfully configured the basic layout and can start using the app right away.

Extended layout

If you want more flexibility in layout design, you can link your own shopping experience using the "Layout" configuration option. In this guide, we will create the following layout together:

Step 1: Creating the shopping experience

Go to "Content > Shopping Experiences" and click on the "Create new layout" button. Then select "Shop page" and "Full width" and finally assign a suitable name for the new shopping experience.

Step 2: Desktop configuration

Now click on the section to open the sidebar and then drag the "Two columns, text" block from the "Text" block category into the section. Now select the block and set the top and bottom spacing to "0" in the block settings in the "Layout" section.

Now open the settings for the left text element using the cog icon and switch to edit mode using the upper right corner of the editor. Now copy the following code into the editor:

<div style="text-align: center; padding: 3rem 1.125rem 3rem 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Subscribe to our newsletter and receive a 10% discount on your first order, as well as information about new products.
    </p>
    {{ newsletter_form() }}
</div>

In addition to inline styling for a better appearance, the variable {{ newsletter_form() }} deserves special mention here. This is replaced by the registration form via the app and is essential for the pop-up to function correctly.

We will now replace the right-hand text element of the block with an image element using the arrow icon. Here, we also click on the cog icon to open the settings. First, we store the image and then select the "Cropped" display mode so that we can now enter the value "405px" in the "Minimum height" field below.

Finally, we need to make sure that the block is hidden for mobile devices by going to the block settings in the "Visibility" section.

Step 3: Mobile configuration

Last but not least, we now drag the "Text" block from the block category of the same name directly below our previously configured block. We also remove the top and bottom spacing for this block. Then we copy the following code into the editor:

<div style="text-align: center; padding: 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Subscribe to our newsletter and receive a 10% discount on your first order, as well as information about new products.
    </p>
    {{ newsletter_form() }}
</div>

This is quite similar to the previous template, but has adjusted inner spacing for a more uniform appearance on mobile devices. Since this block now does not contain an image element and is not two-column, it is much better suited for mobile display due to its more compact view.

Last but not least, we now need to restrict the visibility of this block. The block should not be visible on tablets or desktops. Finally, save the shopping experience to secure all settings.

Step 4: App configuration

In the final step, we now return to the app configuration. There, we can now link the shopping experience we just created in the "Layout" configuration option. We also increase the maximum width in the field of the same name to "800" to give the layout enough space.

Congratulations! You have just created your very own newsletter layout.