> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 How to Set Custom CSS for Popups 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** | Selector | Description | | ----- | ----- | | `.futureblink-popup` | Entire popup container | | `.futureblink-popup .title` | Popup title | | `.futureblink-popup .description` | Popup description text | | `.futureblink-popup .cta-button` | Call-to-action button | | `.futureblink-popup .close-btn` | Close button | --- ### **Mobile Selectors** For mobile-specific styling, use the `.mobile` variation. | Selector | Description | | ----- | ----- | | `.futureblink-popup.mobile` | Mobile popup container | | `.futureblink-popup.mobile .title` | Mobile title | | `.futureblink-popup.mobile .description` | Mobile description | | `.futureblink-popup.mobile .cta-button` | Mobile CTA button | | `.futureblink-popup.mobile .close-btn` | Mobile close button | --- ### **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. ✨