Articles in this section

Styling the Birthday Sign-up Page

Steve Jones
  • Updated

We have used a CSS and HTML framework that should work well out of the box for most Shopify themes. The page displays well when viewed on mobile devices which makes it a great way to acquire more birthday sign-ups.

We've introduced some customisable styling options to allow merchants to take full control of the Birthday Sign-up Page.

You can find the styling options under Settings > Birthday Sign-up Page

The available styling options

mceclip0.png

Layout > CSS

We've provided generic styling for the sign-up form 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, then you can override those styles by adding them to the CSS section of the layout settings.

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

#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: red;
 border: 1px solid #cc0000;
 border-radius: 5px;
 padding: 15px;
 margin-bottom: 30px;
 background-color: #ffeaea;
}

#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: 992px) {
 #hb_page-wrapper {
 }
}

@media (min-width: 1200px) {
 #hb_page-wrapper {
 }
}

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

#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_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 #ccc;
 background: #f4f6f8;
 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;
}

 

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: #de3618 !important;
}


Layout > HTML

You can also use the basic HTML boxes provided to introduce some further text above and or below the birthday sign-up form. This can be used to explain more about your Birthday campaign and give your customers the incentive to sign up. Consider using this area to include some further information about what the customer can expect when they join your Birthday Club, e.g.

  • how many days before their Birthday they are likely to receive their email
  • what type of discount they are likely to receive
  • how long the discount might be valid until

Need any help?

If you don't have CSS/HTML skills or a developer that can help you with the styling of your Birthday Sign-up Page and you'd like us to take a look, then please do get in touch and we'll do our best to get the page layout to work in your theme.

Related articles