Offer Popup
Create a popup that offers a discount or promotion to users.
WINTER SALE!
Take 25% off this product with code: WINTER25
*Valid 2/13-2/17. Cannot be combined with other coupons. Other restrictions apply.<fulcrum-element-dialog
open
id="offer-popup"
position="top-center"
id="dialog-offer-popup"
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
cloak
>
<div class="custom-content discount-not-applied">
<h1 class="custom-content-header">WINTER SALE!</h1>
<p class="custom-content-description">
Take 25% off this product with code: WINTER25
</p>
<div class="custom-content-buttons">
<button class="custom-btn" id="apply-coupon-button" type="button">
Apply coupon
</button>
<span class="text-between-buttons"
>or stock up on beloved stylist-favorites</span
>
<button class="custom-btn" id="visit-page-button" type="button">
Shop the sale
</button>
</div>
<small class="custom-content-disclaimer">
<em>
*Valid 2/13-2/17. Cannot be combined with other coupons. Other
restrictions apply.
</em>
</small>
</div>
</fulcrum-element-dialog> #offer-popup {
--dialog-border-radius: 0;
--dialog-max-height: 480px;
--dialog-max-width: 600px;
}
@media screen and (max-width: 550px) {
#offer-popup {
--dialog-border-radius: 0;
--dialog-max-height: 100%;
--dialog-max-width: 100%;
}
}
.custom-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 100%;
}
.custom-content-header {
align-self: stretch;
color: #faba13;
font-family: Neue Haas Unica, sans-serif;
font-size: 40px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
line-height: 100%;
margin: 0;
}
.custom-content-description {
align-self: stretch;
color: #333f48;
font-size: 25px;
font-weight: normal;
padding: 0 25px;
text-align: center;
margin: 0;
margin-bottom: 3px;
}
.custom-content-disclaimer {
align-self: stretch;
color: #333f48;
font-size: 12px;
font-weight: normal;
padding: 0 25px;
text-align: center;
margin: 0;
margin-bottom: 3px;
}
.custom-content-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.text-between-buttons {
color: #333f48;
font-size: 20px;
font-weight: normal;
margin: 0;
text-align: center;
}
.custom-btn {
background-color: #333f48;
border: 0;
color: #fff;
cursor: pointer;
font-size: 20px;
font-weight: 600;
font-family: "Arial", sans-serif;
padding: 10px 48px;
width: 100%;
max-width: 320px;
text-transform: uppercase;
}
.custom-content.discount-applied {
display: none;
} initScript();
function initScript() {
const dialog = document.querySelector("fulcrum-element-dialog");
if (!dialog) return;
// Example: Open dialog with menu button (hamburger menu)
const dialogTrigger = document.getElementById("dialog-trigger");
if (dialogTrigger) {
dialogTrigger.addEventListener("click", () => {
dialog.open();
});
}
// Example: Handle drawer events
dialog.addEventListener("dialog-open", () => {
console.log("dialog opened");
});
dialog.addEventListener("dialog-close", () => {
console.log("dialog closed");
});
}