# Esun Promotion Popup

Configure each Website at `Stores > Configuration > Esun > Promotion Popup`.

The selected CMS Block owns the promotion image, copy and CTA. The module owns the modal shell,
display schedule, audience, frequency, accessibility behavior and responsive styling.

## Initial CMS Block

Upload these images in the Media Gallery:

- `wysiwyg/promotion/welcome-24-desktop.jpg`
- `wysiwyg/promotion/welcome-24-mobile.jpg`

Then create an active CMS Block and add the following HTML in a Page Builder HTML Code element:

```html
<section class="promotion-popup-content promotion-popup-content--welcome"
         aria-labelledby="welcome-promotion-title">
    <div class="promotion-popup-content__media">
        <picture>
            <source media="(max-width: 767px)"
                    srcset="{{media url='wysiwyg/promotion/welcome-24-mobile.jpg'}}">
            <img src="{{media url='wysiwyg/promotion/welcome-24-desktop.jpg'}}"
                 alt="eSUN new customer promotion"
                 loading="eager">
        </picture>
    </div>
    <div class="promotion-popup-content__body">
        <p class="promotion-popup-content__eyebrow">NEW CUSTOMER EXCLUSIVE</p>
        <h2 class="promotion-popup-content__title" id="welcome-promotion-title">Get $24 Off</h2>
        <p class="promotion-popup-content__condition">On Orders Over $299</p>
        <p class="promotion-popup-content__description">
            Create your eSUN account and subscribe to our newsletter to receive an exclusive $24 coupon.
        </p>
        <a class="promotion-popup-content__button" href="{{store url='customer/account/create/'}}">
            Create Account
        </a>
        <p class="promotion-popup-content__terms">
            New customers only. Coupon will be added to My Coupons after successful registration and subscription.
        </p>
    </div>
</section>
```