Please note:
This guide refers to the CSS stylesheet used by Happy Birthday for stores installing on or after 11 May 2023. If your store installed before that and you'd like to update to the new version, please get in touch, it's a quick remote update.
You'll only see this page within the Advanced Settings of the app when one of our email-sending integrations has been enabled (Klaviyo, Mailchimp, Brevo, Shopify Email or Omnisend) and you've selected the option for Happy Birthday to auto-generate a discount code. If you don't see it, that's why.
The Generate Discount Page is the page customers land on when they click the discount link in their birthday email. We render it on the fly with their unique discount code. It uses a CSS framework that works out of the box for most Shopify themes, but you can fully customise the styling and layout to match your brand.
Where to find the styling options
For a full overview of the Generate Discount Page and how to navigate to its settings, please see our guide The generate discount page.
The styling options can be found within the Layout section of the Generate Discount Page settings.
To access them, select Advanced from the Happy Birthday app main menu, then click the Configure button within the Generate Discount Page section
The styling options live at the bottom of that page within the Layout section:
Default vs custom styling
Default styling:
Custom branded styling example
CSS hooks for each element
Each element on the page has a CSS ID you can target. Numbered to match the screenshot below:
1 - Wrapper background
#hb_discount_page-wrapper {
background-color: #000066 !important;
}
2 - Main heading colour
h1#hb_discount-code-pre-text {
color: #f4fbb5 !important;
}
3 - Paragraph text colour
#hb_discount_page-wrapper p {
color: #0cd9d4 !important;
}
4 - Discount code wrapper background
#hb_discount-code-wrapper {
background: #f4fbb5 !important;
}
5 - Discount code wrapper text
#hb_discount-code-wrapper p {
color: #000066 !important;
}
6 - Button background
#hb_discount-code-link a.btn {
background-color: #eb5ab0 !important;
}
7 - Button text colour
#hb_discount-code-link a.btn {
color: #f4fbb5 !important;
}
The button can have separate styles on hover or focus:
6b - Button background on hover/focus
#hb_discount-code-link a.btn:hover,
#hb_discount-code-link a.btn:focus {
background-color: #0cd9d4 !important;
}
7b - Button text on hover/focus
#hb_discount-code-link a.btn:hover,
#hb_discount-code-link a.btn:focus {
color: #eb5ab0 !important;
font-weight: bold;
}
8 - Terms text colour
p#hb_discount-code-terms-text {
color: #0cd9d4 !important;
}
Default stylesheet
For reference, here's what we inject into the page by default:
#hb_discount_page-wrapper {
width: 100%;
max-width: 500px;
margin-right: auto;
margin-left: auto;
padding: 20px 15px 50px;
text-align: center;
}
#hb_discount_page-wrapper h1 {
text-align: center;
font-size: 28px;
}
#hb_discount-code-wrapper {
border: 1px solid #ccc;
background: #f4f6f8;
color: #333;
border-radius: 5px;
padding: 20px;
text-align: center;
font-weight: bold;
font-size: 1em;
}
#hb_discount-code-pre-text {
text-align: center;
margin-bottom: 20px;
}
#hb_discount-code-terms-text {
text-align: center;
font-size: 0.8em;
margin-top: 40px;
}
#hb_discount-code-link {
margin: 20px 0;
text-align: center;
}
#hb_discount-code-link a.btn {
appearance: none;
height: auto;
width: auto;
font-size: 20px;
padding: 0.75rem 3.5rem;
background-color: #F1F1F1;
border: 1px solid #A3A3A3;
border-radius: 4px;
color: #333333;
text-decoration: none;
transition: background-color .3s ease-in-out;
}
#hb_discount-code-link a.btn:hover,
#hb_discount-code-link a.btn:focus {
background-color: #a4a4a4;
}
Adding HTML around the page
The Layout section also gives you HTML boxes to inject content above and below the discount message. Use these to add a banner image, custom intro paragraph, or follow-up note.
Mobile alignment issues
The default styles work well on most Shopify themes, including on mobile. If you spot a mobile-specific alignment issue, please get in touch and we'll provide a CSS snippet for your theme.
Need any help?
Please get in touch with support if you need any further assistance.