Introduction
Your Dedicated Page offers numerous ways to align its appearance with your brand identity. This guide provides some recommended practices - feel free to utilize the code examples and adapt the styling to suit your needs. We've used the following pages as reference points:
- BrandLift Demo Store
- Yallah Coffee
- Dirty Labs
Banner
Aligning the hero content in the center
.hero { height: auto !important; padding: 100px 100px; align-items: center;}Aligning the hero buttons in the center
.hero-buttons { align-self: center;}Add text before the title
.hero-title:before { content: 'sign up and earn 100 welcome points'; display: block; font-size: 18px; text-transform: uppercase;}Page sections
Adding space to the top of the sections
.page-section { padding-top: 100px !important; padding-bottom: 100px !important;}Explainer section
Adding a circle around the step number in the explainer section.
.step-number { display: flex; align-items: center !important; background: #7C2265; color: white !important; border-radius: 50%; width: 70px !important; height: 70px !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important;}đź“ť Note
- The text color (
color) can be set in the builder. - You can play with the
widthandheightto increase/decrease the padding
Adding a background effect around the step number
.step-number { width: fit-content !important; background: linear-gradient(0deg,#F8E9F2,#F8E9F2 45%,rgba(255,0,255,0) 46%); /* replace by the colors you want */}.step-number { margin-left: auto; margin-right: auto; padding: 0 10px; font-family: ubuntu-mono, sans-serif !important;}Adding a hover effect to the step card
.col-4:hover { background-color: #F5F5EB; border-radius: 6px; transform: scale(1.02);}@media only screen and (max-width: 700px) { .col-4 { padding: 0 0px; }Adding SVG elements to the title
Replace the image URL
.title:after { content: ""; background-image: url("https://d3afjz4ck0dmfv.cloudfront.net/underline-yallah-coffee_1_2.png") !important; background-size: contain; background-repeat: no-repeat; height: 1rem; margin-top: 20px;}Cards and icons
Cards
Styling the cards vertically
.item-box { flex-direction: column; /* MOVE THE ICONS TO THE TOP */ border: none !important; text-align-last: center !important; text-align: -webkit-center !important; height: 220px; padding: 20px 0px !important; background: white;} Aligning the cards in the same row (maximum of 5 cards)
.page-section.ways-to-earn .content { max-width: 1400px;}Defining the font size for the text inside the cards
.card-title { font-size: 25px;}.card-description { font-size: 20px; padding-top: 10px;}Adding hovering effects to the actionable cards
.action-cards .item-box:hover:not(.unhoverable) { background: #f9ac76 !important; color: white !important; border: none !important; transform: scale(1.02);}Centering the content of the cards
.item-box { justify-content: center;}.item-box .content { margin-right: 0 !important; text-align: -webkit-center;}Styling the VIP Tiers Cards and centering the content
To view the progress bar in the cards, go to Explainer > Logged in (member). If the content is not aligned vertically, here's a quick way to fix it.
#vip_tier .item-box { height: 300px; display: flex !important; flex-direction: column; justify-content: start;}Icons
Resizing the icons
.custom-icon { height: 70px !important; width: 70px !important;}Change the color of the icons
Please note that this approach is limited to the default icons in the BrandLift app. Custom icons you've added cannot have their colors modified using this method.
svg.svg-icon, img.custom-icon { fill: rgb(0, 171, 132) !important;} path { fill: rgb(0, 171, 132) !important;}Buttons
Adjust the background and text colors within the builder interface. Utilize the provided code to customize elements such as borders, text alignment, and more.
Add basic styling to the buttons
.btn, button.btn.btn-primary.modal-login-btn.btn-lg:hover, .btn.btn-lg { border: 1px solid #c7c7c8 !important; max-width: fit-content !important; height: fit-content !important; padding: 15px 30px !important; text-align: center; text-transform: uppercase; font-weight: 600 !important; letter-spacing: 1px !important;}Add a different style to the secondary button
.secondary { border: 1px solid #F8E9F2 !important;}Add hover effects
.btn:hover { background: #F8E9F2 !important; transform: scale(1.02);}Rewards table
To view the table in the page editor, go to Explainer > Logged in (member).
Styling the rewards table
thead { color: #7C2265 !important; background: #F8E9F2; letter-spacing: 0.08em !important; font-size: 17px; padding: 20px !important;}.table th { border-bottom: 2px solid #7C2265; padding: .6rem .4rem;}Referral link
Styling the box with the code
.form-input { border: 2px solid #7C2265; height: 50px;}input#home_referral_url { font-size: 17px;}Styling the copy button
.copy-coupon .browser-loy-button { border-radius: 0; color: #F8E9F2;}.copy-coupon .browser-loy-button:hover { background-color: #F8E9F2; border-radius: 0;}Modal
When previewing your page, you can interact with the actionable cards to view their associated modals. Currently, this preview functionality is not available within the app builder itself.
Style the closing button in the modal
.btn.btn-clear { padding: 0 !important;}a.btn.btn-clear.float-right { background: transparent !important; border: 0 !important; }​Styling the modal title
.login-modal-title { text-transform: uppercase; font-weight: 900; letter-spacing: .1em; font-size:18px; color: #7C2265 !important;}Styling the link text inside the model (reads: "Sign in")
.modal-container a { color: #7C2265 !important; text-decoration: underline;}Styling the modal container
.modal-container { border-radius:0; min-height: 300px;}Mobile responsiveness
Prior to publishing, it's crucial to check your page on mobile devices to ensure proper responsiveness and visual appeal.
Merge all the media queries shared throughout this doc into one to have a clean code.
Here are a few media queries that you'll need based on the designs we shared above.
Custom sections
In your Shopify admin, go to Themes > Customize > Edit Code and search for page.brandlift-loyalty.liquid. Then, add any custom code below <div id="brandlift-page-wrapper" style="min-height:800px;"></div>.
Referral section
Should you prefer, you can substitute the existing referral section with an alternative design. Here's an example featuring a two-column layout combining text and imagery.
<div class="page-section" id="section-referrals"> <div class="columns-faqs"> <div class="content-left"> <h2 class="section-title">Share your love for coffee</h2> <h3 class="section-subtitle">Give $5, Get $5</h3> <p class="text">Refer a friend and you both get $5 towards your next purchase*</p> <p class="text-highlight">*offer valid for new customers only</p> <a href="https://yallahcoffee.co.uk/account/login?checkout_url=https://yallahcoffee.co.uk/pages/loyalty-program" class="btn btn-referral">Refer Now</a> </div> <div class="content-right"> <img src="https://cdn.shopify.com/s/files/1/1498/5720/files/CRCC-page-tile2.jpg?v=1635252575" alt="Yallah Coffee Referrals"> </div> </div>/* STYLE YOUR SECTION */<style>.section { padding: 75px 0;} .columns-faqs { display: flex; margin: 0 auto;}@media (max-width: 800px) { .section { padding: 75px 20px;} .columns { flex-direction: column; } .content-left { padding: 0 !important; } .content-right { padding-top: 50px; } }.content-left, .content-right { flex: 1; text-align: center; align-self: center;}.content-left { padding: 0 75px;}.section-title { font-size: 38px; color: #000000; font-family: inherit; margin-bottom: 0.5em; margin-top: 0; text-transform: uppercase; line-height: 1.25 !important; font-weight: bold !important; display: grid;}/* LINE EFFECT UNDER THE TITLE */.section-title:after { content: ""; background-image: url(https://d3afjz4ck0dmfv.cloudfront.net/underline-yallah-coffee_1_2.png) !important; background-size: contain; background-repeat: no-repeat; height: 1rem; margin-top: 20px;}.section-subtitle { font-size: 22px !important; margin-bottom: 10px;} .text { font-size: 17px;} .text-highlight { color: #f9ac76 !important; margin-bottom: 40px;}.btn-referral { background-color: #212721 !important; border: 1px solid #c7c7c8 !important; max-width: fit-content !important; height: fit-content !important; padding: 15px 30px !important; text-align: center; text-transform: uppercase; font-weight: 600 !important; letter-spacing: 1px !important;}.btn-referral:hover { background: #f9ac76 !important; text-decoration: none;}#section-referrals a, #section-referrals a:link, #section-referrals a:visited, #section-referrals a:hover { color: white !important; text-decoration: none; outline: 0; font-weight: 700;} .referral-img { height: auto; max-width: 100%;} </style>FAQs
<div class="page-section" id="faqs"> <div class="columns-faqs"> <div class="content-left"> <img src="https://cdn.shopify.com/s/files/1/0370/0215/0024/files/Signature_detergent_pouring_detail_c9ad9e41-08e6-49f7-946a-fa09895c6510_590x.jpg" alt="Dirty Labs"> </div> <div class="content-right"> <div class="title" style="font-size: 40px; color: #000000; font-family: inherit; text-align: left;">Frequently Asked Questions</div> <div class="accordion-wrapper"> <button class="accordion">What is the Loyalty Program about?</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Who is eligible to join?</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">How do I join the Loyalty Program?</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">When do my points expire?</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div></div>/* -----> EDIT THE CONTENT ABOVE ⬆️ <----- */<style>#faqs { padding: 100px 5% !important;} .columns-faqs { display: flex; margin: 0 auto; margin-bottom: 150px;}@media (max-width: 800px) { .section { padding: 75px 20px;} .columns-faqs { flex-direction: column; } .content-left { padding: 0 !important; } .content-right { padding-top: 50px; } }.content-left, .content-right { flex: 1; text-align: center; align-self: center;}.content-left { padding: 0 75px;}/* ACCORDION */.accordion-wrapper { margin: auto; margin-top: 40px; margin-bottom: 40px;}.accordion { font-family: inherit; background-color: white; color: black; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 20px; transition: 0.2s;}.active, .accordion:hover { background-color: white;}.accordion:before { content: '\002B'; color: black; font-weight: bold; float: left; margin-right: 5px;}.active:before { content: "\2212";}.panel { padding: 0 18px; border: none; text-align: start; background-color: white; max-height: 0; overflow: hidden; transition: max-height .15s linear,opacity .15s linear .1s;}</style><script>var acc = document.getElementsByClassName("accordion");var i;for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } });}</script>