Learn how to change the look and style of your Cookie banner.
✅ Step 1: Open the Hoppy Cookie App
1️⃣ From your Shopify Admin, go to: Apps → Hoppy Cookie
2️⃣ This opens the main dashboard of the app.
✅ Step 2: Go to Banner Settings
3️⃣ On the left-hand panel of the app, click on Banner Settings.
4️⃣ You'll be directed to the main configuration area for the cookie banner.
✅ Step 2: Navigate to the "Style" Tab
5️⃣ Inside Banner Settings, switch to the Style tab to begin customizing.
-
Choose the Template 🧩
-
Select a Template that aligns with your store's branding.
-
This affects the overall layout and design of the banner.
-
-
Set Banner Visibility 👀
Decide where the banner will show:
-
Mobile only 📱
-
Desktop only 🖥️
-
Both devices 🌐
-
-
Set Banner Display Type & Position 📌
For Desktop:
-
Display Type:
- Full Bar or Float Card
-
Position:
- Top or Bottom
For Mobile:
-
Choose a position:
- Top, Middle, or Bottom
-
6️⃣ Enable Cookie Icon (Optional) 🍪
-
Toggle the option to show a cookie icon in your banner.
-
You can also set the icon’s position.
7️⃣ Customize Banner design- Modify the look and feel of your banner to match your brand:
-
Background and Border 🔷
-
Background color
-
Border size and color
-
-
Typography✍️
-
Choose the font
-
Set font sizes for:
-
Title
-
Description
-
Privacy Policy Text
-
-
Adjust font colors for all text areas
-
-
Button Styling🔘
-
Change button size
-
Customize button color
-
Set hover effect if needed
-
-
Icon Colors❌
-
Customize close (X) icon color
-
Customize arrow icon color
-
✅ Step 3: Preview and Save
8️⃣ Once you've made all the customizations, preview the banner on both desktop and mobile.
9️⃣ Click Save to apply all the changes to your store.
💡 Pro Tip: Your cookie banner should be clear, easy to read, and compliant with data regulations. A well-designed banner builds trust with your customers!
🖌️ That’s it! Your cookie banner is now fully customized to match your store’s style🍪