Please note:
This guide refers to a CSS stylesheet used by Happy Birthday Email app for stores installing on or after May 11th 2023. If your store installed the app prior to this date and you would like to update to this new version then please get in touch. It is a quick and simple process that we can perform remotely for you and we'd be happy to help!
We have used a CSS and HTML framework that should work well out of the box for most Shopify themes. However, we've introduced some customisable styling options to allow merchants to take full control of the Discount Applied Landing Page.
Accessing the styling options
For a full overview of the Discount Applied Landing Page and how to navigate to its settings, please see our guide The discount applied landing page.
The styling options can be found within the Layout section of the Discount Applied Landing Page settings. To access them, select Advanced from the Happy Birthday app main menu, then click the Configure button within the Discount Applied Landing Page option.
CSS
We've provided generic styling for the Discount Applied Landing Page elements that should work out of the box in the majority of Shopify themes. If you would like to customise the page to be more in keeping with your theme, you can override those styles by adding them to the CSS section of the layout settings.
All page elements can be styled
In the example below, we have used CSS rules to style all elements with custom branding colours. You may not wish to have your page so boldly styled. This example is purely to demonstrate how to target each specific element:
Default styling:
Branded styling:
Targeting each specific element
1 - Wrapper background colour
#hb_discount_page-wrapper {
background-color: #FAF7F4 !important;
}2 - Main heading text colour
h1#hb_discount-code-pre-text {
color: #4A4543 !important;
}3 - Paragraph text colour
#hb_discount_page-wrapper p {
color: #8C8380 !important;
}4 - Button background colour
#hb_discount-code-link a.btn {
background-color: #C4A882 !important;
}5 - Button text colour
#hb_discount-code-link a.btn {
color: #FFFFFF !important;
}The colour of the Shop now button and its text can be targeted to change when focused or hovered over:
Shop now button:
Shop now button Focused / On hover:
4b - Button background colour (focused and hover)
#hb_discount-code-link a.btn:hover, #hb_discount-code-link a.btn:focus {
background-color: #B09470 !important;
}5b - Button text colour - (focused and hover)
#hb_discount-code-link a.btn:hover, #hb_discount-code-link a.btn:focus {
color: #FFFFFF !important;
}6 - Terms text colour
p#hb_discount-code-terms-text {
color: #B8B2AD !important;
}
The default CSS stylesheet:
Below are the default styles that we inject into the page:
#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 0.3s ease-in-out;
}
#hb_discount-code-link a.btn:hover,
#hb_discount-code-link a.btn:focus {
background-color: #d9d9d9;
}
HTML
You can also use the basic HTML boxes provided within the settings to introduce some further text above and / or below the Discount Applied message.
Mobile View
As mentioned already, the generic styling we have provided for the discount applied landing page elements should work out of the box in the majority of Shopify themes.
However if you find any alignment issues on mobile, please do let us know.
Need any help?
Please get in touch with support if you need any further assistance.