Styling the Happy Birthday app block – Happy Birthday App

It is possible to customise the styling of the Happy Birthday app block.

Unlike the other pages and forms generated by Happy Birthday app, that each have their own dedicated CSS section within the app settings, styling of he Happy Birthday app block should be applied to the relevant stylesheet within your Shopify Theme files.

For most use cases this can be applied to the main/ base stylesheet.

If you don't have CSS/HTML skills or a developer that can help you with the styling of your Happy Birthday app block and you'd like us to take a look, then please do get in touch.

All form elements can be styled

In the example below, we have used CSS rules to style all elements of the Happy Birthday app block to use the colours of our Union Works branding. You may not wish to have your form so boldly coloured. This example is purely to demonstrate how to target each specific element:

DEFAULT styling:

BRANDED styling:

Targetting each specific element

01. - WRAPPER background-color

#hb_page-wrapper { background-color: #000066 !important;} /* div wrapper background colour - Deep Blue */

02. - MAIN HEADING text-colour

#hb_page-wrapper h1 { color: #f4fbb5!important;} /* main h1 text colour - Super light yellow */

03. - INTRO text-colour

#hb_intro { color: #eb5ab0 !important;} /* intro text colour - Shock pink */

04. - FIELD LABEL text-colour

#hb_page-wrapper { color: #0cd9d4 !important;} /* label text colour - Contemporary Teal */

05. - FORM FIELD background-color

#hb_page-wrapper .hb-input-field { background-color: #f4fbb5 !important;} /* Form field background colour - Super light yellow */

06. - FORM FIELD text-color

#hb_page-wrapper .hb-input-field { color: #eb5ab0 !important;} /* input text colour - Shock pink */

07. - FORM FIELD PLACEHOLDER text-color

#hb_page-wrapper input::placeholder { color: #000066 !important;} /* input placeholder text colour - Deep Blue*/

08. - BUTTON background-color

#hb_submit_birthday_details { background-color: #eb5ab0 !important;} /* button colour - Shock pink */

09. - BUTTON text-color

#hb_submit_birthday_details { color: #0cd9d4 !important;} /* button text colour - Contemporary Teal */

The color of the Sign-up button and it's text can be targeted to change when focused or hovered over:

Sign-up button:

Sign-up button Focused / On hover:

10. - BUTTON background-color - (FOCUSED & HOVER)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { background-color: #0cd9d4 !important;} /* button hover & focus colour - Contemporary Teal */

11. - BUTTON text-color - (FOCUSED & HOVER)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { color: #eb5ab0 !important;} /* button hover & focus text colour - Shock pink */

12. - TERMS text-color

.hb_field_wrapper small { color: #0cd9d4 !important;} /* terms text - Contemporary Teal */

Submission Success

If you'd like to change the colour of the success message once the form has been submitted, then you will need to target the following ID within the CSS in the settings area:

#hb_success { color: #0cd9d4 !important; } /* thank you text colour - Contemporary Teal */

SMS Bump Integration

If you have enabled the SMS Bump integration then the Birthday Sign-up Page form will also display a field for the customer to enter their Mobile phone number:

Default Stylesheet

Below are the default styles that we inject into the page:

:root {
--hb-success-color: green;
--hb-error-color: red;
--hb-error-border-color: #cc0000;
--hb-error-background-color: #ffeaea;
--hb-input-border-color: #e5e5e5;
--hb-input-background-color: #FFF;
--hb-code-border-color: #CCC;
--hb-code-background-color: #f4f6f8;
--hb-spacing: 10px;
}

#hb_success {
display: none;
color: var(--hb-success-color);
}

#hb_error {
color: var(--hb-success-color);
}

#hb_page-wrapper {
padding-top: 20px;
padding-bottom: 50px;
width: 500px;
}

#hb_page-wrapper h1 {
text-align: center; font-size: 28px;
}

#hb_intro {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}

#hb_page-wrapper {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

#hb_form {
margin: 0 auto;
text-align: left;
}

#hb_error:not(:empty) {
color: var(--hb-error-color);
border: 1px solid var(--hb-error-border-color);
border-radius: 5px;
padding: 15px;
margin-bottom: 30px;
background-color: var(--hb-error-background-color);
}

#hb_error:not(:empty) strong {
margin-bottom: 10px;
float: left;
width: 100%;
text-decoration: underline;
}

@media (max-width: 768px) {
#hb_page-wrapper {
width: 400px;
}
}

@media (max-width: 480px) {
#hb_page-wrapper {
width: 320px;
}
}

#hb_page-wrapper label {
display: block;
}

#hb_page-wrapper .hb-input-field-wrapper {
margin-bottom: var(--hb-spacing);
}

#hb_page-wrapper .hb-input-field {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid var(--hb-input-border-color);
height: 40px;
background-color: var(--hb-input-background-color);
}

#hb_page-wrapper #hb_mobile_number {
padding-left: 52px;
}

#hb_submit_birthday_details {
height: auto;
width: auto;
font-size: 20px;
padding: 0.75rem 3.5rem;
}

#hb_discount-code-wrapper {
border: 1px solid var(--hb-code-border-color);
background: var(--hb-code-background-color);
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_birthday_wrapper {
display: flex;
gap: 5px;
margin-bottom: var(--hb-spacing);
}

#bd_dd_wrapper, #bd_mm_wrapper {
width: 50px;
}

#bd_yyyy_wrapper {
width: 100px;
}

Need any help?