How to set up a cookie banner in the Hoppy cookie?
Learn how to create and customize your Cookie Banner.
✅ Step 1: Open the Hoppy Cookie app
1️⃣ Go to Shopify Admin → Apps → Hoppy Cookie
2️⃣ The main dashboard will open, showing cookie stats like:
- ✅ All Accepted
- ❌ All Declined
- 👁️ Impressions Count
- 🔍 Cookie Types: Analytics, Marketing, Functional
3️⃣ You'll also see a quick 3-step setup guide at the top.
Follow these 3 essential steps:
- Click “Activate App” to enable the cookie banner on your site.
- Click “Scan Cookies” to detect cookies used on your store.
- Click “Set Up Your Cookie Banner”.
📌 You'll be redirected to the Banner Settings. You can also find Banner Settings from the left sidebar.
✅ Step 2: Region Tab – Set Where to Show the Banner
4️⃣ Now that you are in the Banner Settings section, this is where you will create the cookie banner.
🔹 Under the Region tab, choose where your banner should appear.
- All Countries 🌐 – Show it worldwide
- EU & UK 🇪🇺 – For GDPR compliance
- US States 🇺🇸 – CCPA, CPRA, and others (CA, UT, VA, CT, CO)
- Brazil 🇧🇷 – LGPD
- Canada 🇨🇦 – PIPEDA
- Japan 🇯🇵 – APPI
💡 Tip: Some regions (like the EU) require the default consent status to be set to "null".
✅ Step 3: Behavior Tab – Customize Functionality
5️⃣ In the Behavior Tab, you need to configure the following settings:
- Cookie Consent Type:
- Preferences – Users can choose their preferences
- Accept/Decline – Shows both buttons
- Accept Only – Only shows “Accept”
- Decline Only – Only shows “Decline”
- Informative – Displays info without options
- Optional Settings:
- ✅ Show Google Privacy Policy Link Example: https://policies.google.com/privacy
- ✅ Show Privacy Policy Link
Choose:
- Auto-generate based on user location
- Use a specific one like:
Example: https://yourstore.com/pages/privacy-policy
- Data Sales Opt-Out (for US State Laws)
Choose if you want to:
- Display a “Do Not Sell or Share My Personal Info” checkbox on the banner
- Or show it in the Preference Popup
📍 Required for stores targeting CA, UT, VA, CT, and CO.
- Reopen Banner Option
You can show a small reopen button on the screen so users can revisit the banner anytime.
🕐 Set a delay (in seconds) for when the reopen button should appear after the page loads.
✅ Step 4: Style Tab – Design Your Banner
6️⃣ Navigate to the Style tab and customize the look and feel of the banner to match your store:
- Choose a template 🎨
- Set visibility (Desktop, Mobile, or Both)
- Pick alignment, icon, position, background color, button color, and fonts.
- Add a cookie icon 🍪 (optional)
✅ Step 5: Content Tab - Add the Banner text
7️⃣ Navigate to the Content Tab, where you have to add the text for the cookie banner.
- Cookie Bar Texts🍪:
- Display a **“Do Not Sell or Share My Personal Info”**🔘checkbox on the banner
- Header Example📝**:** “We Value Your Privacy”
- Description Example💬**:** “We use cookies to improve your experience. You can choose your preferences below.”
- Privacy Policy Link Text🔗**:** “Read Our Privacy Policy”
- Google Privacy Policy Link Text🔗**:** “Google Privacy Policy”
- Accept Button Text✅**:** “Accept All”
- Decline Button Text❌**:** “Decline”
- Preferences Button Text⚙️**:** “Customize”
- Reopen Button Text🔄**:** “Cookie Settings”
- Data Sales Opt-Out Section🚫**:**
- Checkbox Title Example☑️**:** “Do not sell or share my personal information”
- Preferences Popup Fields⚙️**:**
- Popup Header Title📌: “Cookie Preferences”
- Popup Header Description💬: “Manage your cookie settings below.”
- Cookie Sections🗂️**:**
- Strictly Required Cookies🔒
- Title: example “Necessary Cookies”
- Description: example “Required for basic functionality like cart and checkout.”
- Analytics Cookies📈
- Title: eg, “Performance & Analytics”
- Description: example “Helps us understand how you interact with the site.”
- Marketing Cookies🎯
- Title: eg, “Marketing Cookies”
- Description: example “Used to deliver personalized ads.”
- Functional Cookies🛠️
- Title: eg, “Functionality Enhancements”
- Description: example “Enable advanced features like live chat.”
- Checkout Block🛒:
- Checkout Block Banner Title Example🔐**:** eg, “Your Privacy at Checkout”
✅ Step 6: Checkout Tab
8️⃣ Navigate to the Checkout tab and enable options like:
- Show Collapse Icon🔽 – Users can minimize content
- Show Close Icon❌ – Shows an “X” to dismiss the banner
✅ Step 7: Save & Apply
9️⃣ Click Save to Apply Changes.
🔟 Your Cookie banner is now live and will appear on your website.
✅ Step 8: Additional Features in the Hoppy Cookie App
🔹 In the left side panel, you'll find additional options under the 'Hoppy Cookie' heading:
- 📋 GDPR Checklist – View your compliance progress. Quickly track your compliance status with GDPR. This section
provides a checklist of key actions (like enabling consent banners or setting region rules), so you know exactly
what’s done ✅ and what still needs attention ⚠️.
- 🧾 Consent Logs – View a detailed log of all cookie consents received from your visitors. This includes timestamps,
user preferences, and region data, helping you stay transparent and compliant with legal requirements.
- 🔍 Cookie Scanner – Automatically scan your Shopify store to detect all cookies being used. This tool helps you
understand what cookies are active, so you can categorize them correctly under Analytics, Marketing, or Functional.
- 🌐 Translation – Add translations for multiple languages. Easily translate your cookie banner content into multiple
languages. Customize the banner for international customers to ensure clarity and compliance across regions.
💡 All set! Your cookie banner is live — keeping your store compliant and your customers informed!
