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

Unlike the other Happy Birthday pages and forms that each have their own dedicated CSS section within the app settings, the styling of the Happy Birthday theme 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. This example is purely to demonstrate how to target each specific element:

Default styling:

Branded styling:

Targeting each specific element:

The colors used below are not the same as those used in our example:

1 - WRAPPER background-color

#hb_page-wrapper { background-color: #000066 !important;}

2 - MAIN HEADING text-colour

#hb_page-wrapper h1 { color: #f4fbb5!important;}

3 - INTRO text-colour

#hb_intro { color: #eb5ab0 !important;}

4 - FIELD LABEL text-colour

#hb_page-wrapper { color: #0cd9d4 !important;}

5 - FORM FIELD background-color

#hb_page-wrapper .hb-input-field { background-color: #f4fbb5 !important;}

6 - FORM FIELD text-color

#hb_page-wrapper .hb-input-field { color: #eb5ab0 !important;}

7 - FORM FIELD PLACEHOLDER text-color

#hb_page-wrapper input::placeholder { color: #000066 !important;}

8 - BUTTON text-color

#hb_submit_birthday_details { color: #0cd9d4 !important;}

8a - BUTTON text-color - (Focused & Hover)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { color: #eb5ab0 !important;}

9 - BUTTON background-color

#hb_submit_birthday_details { background-color: #eb5ab0 !important;}

9b - BUTTON background-color - (Focused & Hover)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { background-color: #0cd9d4 !important;}

10 - TERMS text-color

.hb_field_wrapper small { color: #0cd9d4 !important;}

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; }

SMSBump Integration

If you have enabled the SMSBump integration then the Happy Birthday theme app block 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;
}