Introduction
Transform your Loloyal Dedicated Page into a seamless extension of your brand with custom CSS styling and personalized fonts. With just a few adjustments, you can create a unique, on-brand experience that aligns perfectly with your store’s look and feel.
This guide will walk you through the essentials of customizing your page, helping you deliver a polished and consistent aesthetic that your customers will instantly recognize and trust.
Customizing your Dedicated Page with CSS
To use Custom CSS on your page, follow these steps:
1. Go to Brand Style > Loyalty page > Edit in theme editor
2. On the right side, scroll down till you find the Custom CSS field, and then enter your CSS code
3. Your changes will update in real-time on the left-hand preview. Click Save when you're happy with your customizations.
💡 Pro Tip: The !important rule in CSS is used to add more importance to a property/value than normal. If you use this rule, it will override all previous styling rules for that specific property on that element.
Adding a custom font with CSS
In the example below, we'll walk through how to add custom fonts using a Google font and the @import method.
1. Go to Brand Style > Loyalty page > Edit in theme editor
2. On the right side, scroll down till you find the Custom CSS field, and then enter your CSS code. We're using the Sono font from Google, but you can use your own font
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300;700&display=swap'); /* Loloyal: Hello Banner */ #loloyal-hello * { font-family: 'Sono', sans-serif !important; font-weight: 300 !important; } /* Loloyal: Ways to earn */ #loloyal-ways-to-earn * { font-family: 'Sono', sans-serif !important; font-weight: 300 !important; } /* Loloyal: Ways to redeem */ #loloyal-ways-to-redeem * { font-family: 'Sono', sans-serif !important; font-weight: 300 !important; } /* Loloyal: Referrals */ #loloyal-referrals * { font-family: 'Sono', sans-serif !important; font-weight: 300 !important; }3. Click Save and preview the page on your store.
Adding custom fonts from your Shopify Admin
Upload your font file (.ttf, .woff, .woff2 or .css format) to your Shopify Store. To access the Files page, go to Content > Files
After uploading, click on the file to view it and copy the link URL
From the Loloyal Dashboard, go to Brand Style > Loyalty page > Edit in theme editor
Copy the CSS below and paste it into the Custom CSS field. Replace with your font name and update the URL with your font file link:
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/hostgrotesk/v4/co3UmWBnlCJ3U42vbbfdwMjzqHAXOdFzqU5PuefO_h-j-w94.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Loloyal: Ways to earn */ #loloyal-ways-to-earn * { font-family: "Host Grotesk", sans-serif !important; font-weight: 300 !important; }@import url('https://cdn.shopify.com/s/files/1/0726/4672/1701/files/Edu-NSW-ACT.css?v=1755749767'); /* Loloyal: Ways to earn */ #loloyal-ways-to-earn * { font-family: "Edu NSW ACT Cursive"; font-weight: 400 !important; }5. Click Save and preview the page on your store.
Common CSS customizations for your Dedicated Page
Here are some examples of CSS customizations you can make to personalize your Dedicated Page:
Change text colors
/* Get the element selector through the "Inspect Element" function of the browser's developer tools*/ .ll-cards-title { color: #2c2c2c !important; }
Adjust padding and spacing
/* Get the element selector through the "Inspect Element" function of the browser's developer tools 1. option one: All Sides Equal padding: 10px; margin: 10px; 2. option two: Different Sides Have Different Values padding: top right bottom left; margin: top right bottom left; */ .ll-page-cards-item { padding: 2px !important; } .ll-page-cards-item { margin: 2px !important; }
Style buttons
/* Get the element selector through the "Inspect Element" function of the browser's developer tools */ /* Style primary buttons */ .ll-mask-btn a:first-child button, .ll-mask-btn a:last-child button { background-color: red !important; color: white !important; border-radius: 4px !important; padding: 10px 20px !important; transition: all 0.3s ease !important; } /* Add hover effect to buttons */ .ll-mask-btn a:first-child button:hover, .ll-mask-btn a:last-child button:hover { background-color: pink !important; transform: translateY(-2px) !important; }
Common Questions
1. Can I get help adding my custom style or font?
Yes! Our team is happy to help you set this up. Please contact us and we’ll guide you through the process.
2. Where can I find good fonts?
Visit Typekit or Google Fonts for free and affordable fonts to use.
3. Will my custom CSS affect my entire Shopify store?
No. Any custom CSS you add will only apply to your Loloyal Dedicated Page. It won’t affect other parts of your Shopify store.
4. Why isn’t my custom CSS working?
If your CSS changes aren’t showing up, try the following:
Add the
!importantdeclaration to your CSS properties to override default styles.Make sure you’ve saved your changes.
Refresh your page after saving.
5. How can I see what CSS selectors are available to customize?
You can use your browser’s developer tools:
Right-click on the element you want to customize.
Select Inspect.
Review the classes and IDs of that element—these are the selectors you can target with custom CSS.