✅ 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 Appearance- 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🍪