The Birthday Sign-up page is a hosted landing page generated by the Happy Birthday app. The Url of the Birthday Sign-up Page is:
https://{{ your store domain }}/apps/birthday
Once enabled, the page allows any visitor to join your Birthday Club without having to place an order.
You can edit its content, override the default styling with your own CSS, and wrap the form with custom HTML to match your brand.
Where to find the birthday sign-up page settings
Open Apps → Happy Birthday → Advanced → Birthday Sign-up Page:
Everything is split across three sections:
Status - turn the Birthday sign-up page on or off.
Content - the words shown on the page (title, intro, terms, thank-you, name fields toggle).
Layout - your custom CSS and HTML for the page.
Content
Five fields control the copy on the page:
Title
The main heading at the top of the page (defaults to Tell us your birthday).
Introduction text
A short paragraph under the title (defaults to An exclusive discount and special offers could be heading your way.).
Terms text
Small text shown below the form. Use this to tell visitors what you'll do with their data, what they can expect to receive and if there are any exclusions to how a birthday discount can be used e.g.
By signing up to our Birthday Club, you are consenting to receive a Birthday Email/Text containing a discount on or around your Birthday each year.
Please note:
If you intend to send marketing material beyond the birthday email itself, make sure you say so clearly in the Terms text.
Thank you text
Replaces the form once it has been submitted successfully.
Show first name and last name fields
Toggle the name fields on or off depending on whether or not you wish to collect the persons first and last names. Email and date of birth fields are always shown.
Things you can't change within these settings
Sign-up button label
This is controlled by the global Submit button text setting within the campaign editor. The same label is used for the birthday app block on your post-purchase pages, if enabled.
Date format
This is controlled by the global date format setting. See Setting your birthday date format.
Layout - CSS
The default styles work out of the box on most Shopify themes. To match your brand, paste override rules into the CSS box in the Layout section of the settings.
CSS hooks for each element
Every element on the page has a CSS ID or class you can target. The numbers below match the annotated screenshot:
1. Page wrapper background
#hb_page-wrapper { background-color: #000066 !important; }2. Main heading colour
#hb_page-wrapper h1 { color: #f4fbb5 !important; }3. Introduction text colour
#hb_intro { color: #eb5ab0 !important; }4. Field label colour
#hb_page-wrapper label { color: #0cd9d4 !important; }5. Form field background
#hb_page-wrapper .hb-input-field { background-color: #f4fbb5 !important; }6. Form field text colour
#hb_page-wrapper .hb-input-field { color: #eb5ab0 !important; }7. Placeholder text colour
#hb_page-wrapper input::placeholder { color: #000066 !important; }8. Submit button background
#hb_submit_birthday_details { background-color: #eb5ab0 !important; }9. Submit button text colour
#hb_submit_birthday_details { color: #0cd9d4 !important; }The button can have separate styles when focused or hovered:
8b. Submit button background on hover/focus
#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { background-color: #0cd9d4 !important; }9b. Submit button text on hover/focus
#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { color: #eb5ab0 !important; }10. Terms text colour
.hb_field_wrapper small { color: #0cd9d4 !important; }11. Thank-you message text colour
#hb_success { color: #0cd9d4 !important; }Common tweaks
Centre the submit button
#hb_form { text-align: center; }
#hb_page-wrapper label { text-align: left; }Widen the day / month fields if labels are overlapping
#bd_dd_wrapper, #bd_mm_wrapper { width: 70px !important; }Stack the date fields on top of each other instead of side-by-side
#hb_birthday_wrapper { flex-direction: column; }Default stylesheet
For reference, here are the styles we inject into the page by default. You don't need to copy these, they're already there. Use the IDs and classes below to write your overrides:
#hb_page-wrapper {
padding-top: 20px;
padding-bottom: 50px;
width: 500px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
#hb_page-wrapper h1 {
text-align: center;
font-size: 28px;
}
#hb_intro {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
#hb_form {
margin: 0 auto;
text-align: left;
}
#hb_success {
display: none;
color: green;
text-align: center;
}
#hb_error:not(:empty) {
color: red;
border: 1px solid #cc0000;
border-radius: 5px;
padding: 15px;
margin-bottom: 30px;
background-color: #ffeaea;
}
#hb_page-wrapper label {
display: block;
}
#hb_page-wrapper .hb-input-field {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid #e5e5e5;
height: 40px;
background-color: #fff !important;
}
#hb_page-wrapper .hb_field_wrapper {
margin-bottom: 10px;
}
#hb_submit_birthday_details {
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;
}
#hb_birthday_wrapper {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
#hb_page-wrapper {
width: 400px;
}
}
@media (max-width: 480px) {
#hb_page-wrapper {
width: 320px;
}
}
Layout - HTML
The Layout section also gives you two HTML boxes, HTML (before form) and HTML (after form), that inject your own markup above and below the sign-up form.
This is where to add things like:
A banner image or logo at the top of the page.
A short pitch about what new members get (e.g. "Sign up and we'll send you a 15% off code on your birthday").
A wrapping
<div>with your own class so you can scope your CSS even more tightly. Open the wrapper in HTML (before form) and close it in HTML (after form).
You can also use these boxes to set expectations: how close to their birthday the email will arrive, what kind of discount they'll receive, and how long it'll be valid for.
Need any help?
If you don't have CSS skills (or a developer who can help) and you'd like us to take a look at the styling for your store, please get in touch, we're happy to help.