When customizing your Shopify store, every detail matters, and that includes your cookie banner. The cookie banner not only serves as an important legal requirement but it’s also a part of your brand’s visual identity. One way to make the banner fit your brand better is by changing the font. In this guide, we’ll walk you through the process of customizing the font of your cookie banner using Complianz for Shopify, making sure your banner looks just the way you want it.
Why Change the Font of Your Cookie Banner?
Changing the font of your cookie banner is an easy adjustment that can improve user experience and align with your branding. Here’s why it helps:
- Branding: Ensure that the banner matches the style of your website or store.
- Readability: Choose a font that is easy for your visitors to read.
- Aesthetic Appeal: Enhance the overall design of your website by ensuring the banner complements the look and feel.
How to Change the Font of Your Cookie Banner in Complianz for Shopify
Changing the font of your cookie banner is simple and can be done directly through the Shopify admin panel. Follow these easy steps:
Step 1: Access the Theme Editor
To start, you need to go into the theme editor of your Shopify store.
- Log in to your Shopify store admin panel.
- From the left-hand menu, click on Online Store and then Themes.
- On your active theme, click Actions and select Edit Code from the dropdown.
Step 2: Locate the Theme’s Head Section
Now, you’ll need to find where to add custom CSS in your theme files.
- In the left-hand menu under the Assets folder, click on theme.liquid or theme.css (the file may vary depending on your theme).
- Scroll to the bottom of the file, just before the closing
</head>tag. It’s best to add your custom code here, as the last element inside the<head>section, to ensure it loads correctly.
Step 3: Add Custom CSS Code to Change the Font
To change the font of your cookie banner, you’ll need to add some custom CSS code. Here’s what you’ll need to do:
- Copy the following code:
body #Compliance-cs-banner [class^="cmplc"],
body #Compliance-cs-banner #Compliance-cs-title ,
body #Compliance-cs-banner .Compliance-cs-opt-group button {
font-family: serif !important;
}
- Paste the code just above the closing
</head>tag in your theme.liquid or theme.css file.- If you’re adding the code to
theme.liquid, make sure to wrap it in<style> ... </style>tags.
- If you’re adding the code to
- You can replace
serifwith any font you prefer. For example, if you want to use Arial, replaceserifwithArial. If you want a custom font, make sure it’s added to your website (e.g., via Google Fonts) or use a font family that is already available.
Step 4: Save Changes
Once you’ve added the code, make sure to click the Save button at the top right of the file editor to save your changes.
Step 5: Check Your Store
After saving, head over to your store’s front end and refresh the page to see the changes. The font of the cookie banner should now reflect the new one you’ve selected.
Customizing your cookie banner font is an easy way to give your Shopify store a professional and consistent look. With just a few steps, you can create a compelling design that enhances the overall look of your store.
