Articles in this section

Styling the generate discount page

Stu Jones
  • Updated

 

Please Note:

This guide is specifically aimed at Merchants who will be enabling our Klaviyo, MailChimp, Sendinblue or SMSBump integrations and have selected the option for the Happy Birthday app to auto-generate a discount code for use in their Birthday email or Birthday SMS message.

 

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 Generate Discount Page.

Styling the discount applied landing page

To change the styling of this page on your store, navigate to Settings > Generate Discount Page within the Happy Birthday app:

HB_GDP_settings_manage.png

You will find the styling options within the Layout section:
The available styling options

HB_GDP_layout.png

CSS

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

Please Note:

The following 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!

 

All page elements can be styled

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

DEFAULT styling:

HB_GDP_default_styling.png

BRANDED styling:

HB_GDP_branded.png

Targetting each specific element:

HB_GDP_branded_numbered_elements.png

01. - WRAPPER background-color

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

02. - MAIN HEADING text-colour

h1#hb_discount-code-pre-text { color: #f4fbb5 !important;} /* main h1 text colour - Super light yellow */

03. - PARAGRAPH text-colour

#hb_discount_page-wrapper p { color: #0cd9d4 !important;} /* intro text colour - Contemporary Teal */

04. - DISCOUNT CODE WRAPPER background-color

#hb_discount-code-wrapper { background: #f4fbb5 !important;} /* Discount Code wrapper background colour - Super light yellow */

05. - DISCOUNT CODE WRAPPER text-color

#hb_discount-code-wrapper p { color: #000066 !important;} /* Discount Code wrapper text colour - Deep Blue */

06. - BUTTON background-color

#hb_discount-code-link a.btn { background-color: #eb5ab0 !important;} /* button text colour - Shock pink */

07. - BUTTON text-color

#hb_discount-code-link a.btn { color: #f4fbb5 !important;} /* button colour - Super light yellow */

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

Shop now button: 

HB_GDP_shop_now_button.png

Shop now button Focused / On hover:

HB_GDP_shop_now_button_focused.png

06b. - BUTTON background-color - (FOCUSED & HOVER)

#hb_discount-code-link a.btn:hover, #hb_discount-code-link a.btn:focus { background-color: #0cd9d4 !important;} /* button hover & focus colour - Contemporary Teal */

07b. - BUTTON text-color - (FOCUSED & HOVER)

#hb_discount-code-link a.btn:hover, #hb_discount-code-link a.btn:focus { color: #eb5ab0 !important; font-weight: bold;} /* button hover & focus colour - Shock pink */

08. - TERMS text-color

p#hb_discount-code-terms-text { color: #0cd9d4 !important;} /* terms text - Contemporary Teal */

 

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 .3s ease-in-out;
}

#hb_discount-code-link a.btn:hover, #hb_discount-code-link a.btn:focus {
  background-color: #a4a4a4;
}

HTML

You can also use the basic HTML boxes provided to introduce some further text above and / or below the Generate Discount message.

 

Mobile View

As mentioned already, the generic styling we have provided for the Generate Discount Page elements should work out of the box in the majority of Shopify themes. However if you find any alignments issues of your page on mobile, you can try adding the code below:

Need any help?

If you don't have CSS/HTML skills or a developer that can help you with the styling of your Generate Discount 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