Want your popups to match your store's branding perfectly? 🎨

While Hoppy Popups includes extensive design customization options, Custom CSS gives you complete control over advanced styling adjustments that go beyond the standard settings.

Whether you're refining typography, adjusting spacing, creating unique visual effects, or resolving theme-specific styling conflicts, Custom CSS allows you to customize your popups exactly the way you want.

⚠️ Before You Begin

Before using Custom CSS:

• Make sure your popup has already been created and saved.
• Have a basic understanding of CSS or access to a developer.
• Understand that Custom CSS can override standard Design settings.

💡 Standard styling options such as colors, fonts, and spacing are already available within the Design tab. Custom CSS is intended for more advanced styling requirements.

🛠️ Step 1 — Open Your Popup Setup

Open the Hoppy Popups app from Shopify Admin.

Then:

➡️ Open an existing popup.

➡️ Or create a new popup if you haven't already.

Navigate to the Design tab.

Scroll down until you locate the Custom CSS section.

🎨 Step 2 — Open the Custom CSS Section

Inside the Custom CSS section you'll find:

• A CSS editor
• An Apply button
• A Reset button
• A starter CSS template

The template includes commonly used popup selectors, making it easy to begin customizing your popup without needing to identify class names manually.

✍️ Step 3 — Add Your Custom CSS

The editor provides several ready-to-use selectors for styling popup elements.

Available Selectors

Mobile Selectors

For mobile-specific styling, use the .mobile variation.

Example CSS

To customize the popup title and CTA button:

.futureblink-popup .title {
color: #ff6b6b;
font-size: 24px;
}

.futureblink-popup .cta-button {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

💡 You can also add additional selectors, animations, media queries, and other valid CSS rules as needed.

📱 Step 4 — Add Mobile-Specific Styling

To apply styles only on mobile devices, use the .mobile selectors.

Example:

.futureblink-popup.mobile .title {
font-size: 18px;
}

The app automatically wraps .mobile selectors inside a mobile media query when rendering them on your storefront.

This means you do not need to manually create mobile breakpoints for these selectors.

✅ Step 5 — Apply Your CSS

Once your CSS has been added:

➡️ Click Apply.

The preview updates automatically so you can immediately review your styling changes.

⚠️ Simply pasting CSS into the editor does not activate it.

You must click Apply before the styles become active.

If you want to remove your custom styling:

➡️ Click Reset.

This restores the default template and disables the Custom CSS.

👀 Step 6 — Review the Preview

After applying your CSS:

➡️ Review the Desktop preview.

➡️ Review the Mobile preview.

Verify that:

• Text displays correctly.
• Buttons remain aligned.
• Spacing appears consistent.
• Visual effects behave as expected.

If changes are needed:

➡️ Update the CSS.

➡️ Click Apply again.

The preview refreshes automatically after each update.

💾 Step 7 — Save and Publish

Once you're satisfied with the design:

➡️ Click Save.

➡️ Click Publish.

⚠️ Saving alone does not update your storefront.

The popup must also be published before customers can see the changes.

⚠️ Important Notes

Custom CSS Overrides Design Settings

Custom CSS takes precedence over most standard Design settings.

If a design setting appears to be ignored, it is likely being overridden by your CSS.

Mobile Handling Is Automatic

The app automatically converts .mobile selectors into responsive mobile styles.

This makes it easy to maintain separate desktop and mobile designs without writing custom media queries.

Scoped Styling

Custom CSS is automatically scoped to the specific popup being edited.

This helps prevent styling conflicts with:

• Other popups
• Theme elements
• Other storefront content

Reset Option

Clicking Reset removes only the Custom CSS.

It does not affect:

• Popup settings
• Design settings
• Templates
• Content configuration

CSS Validation

The editor does not validate CSS syntax.

If a style isn't appearing correctly:

➡️ Check selector names.

➡️ Verify braces and semicolons.

➡️ Review the CSS for syntax errors.

❓ Troubleshooting

If your styles are not appearing correctly:

➡️ Confirm that Apply has been clicked.

➡️ Verify the popup has been Saved and Published.

➡️ Check that selectors exactly match the provided template.

➡️ Test in an Incognito or Private browser window.

➡️ Refresh the storefront to clear cached styles.

🎉 Final Result

✅ Your popup can be customized beyond the standard Design settings.

✅ Desktop and mobile experiences can be styled independently.

✅ Advanced visual effects and brand-specific styling become possible.

✅ Custom styles remain isolated to the selected popup.

Custom CSS provides the flexibility to create a more polished and brand-consistent popup experience while maintaining the simplicity of the app's built-in design tools. ✨

Updated on: 27/06/2026