Styling the discount applied landing page

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 Discount Applied Landing Page.

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

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

CSS

We've provided generic styling for the Discount Applied Landing 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:

BRANDED styling:

Targetting each specific element

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: #eb5ab0 !important;} /* paragraph text colour - Shock pink */

04. - BUTTON background-color

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

05. - BUTTON text-color

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

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

Shop now button:

Shop now button Focused / On hover:

04b. - 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 */

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

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

06. - 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: #d9d9d9;
}

HTML

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

Mobile View

As mentioned already, the generic styling we have provided for the discount applied landing 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 Discount Applied Landing 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.

Articles in this section