Adding Custom CSS

Adding Custom CSS

While Nuvi themes provide extensive customization through the visual editor, sometimes you need fine-grained control over specific elements. Custom CSS lets you override styles, hide elements, or add visual effects that are not available in the theme settings.

Where to Add Custom CSS

You can add custom CSS through the theme customization panel:

1. Navigate to Settings > Themes > Customize.
2. Scroll to the "Custom CSS" section at the bottom.
3. Enter your CSS in the code editor.
4. Click "Save" — changes apply immediately to your live storefront.

Alternatively, you can use the AI assistant: "Add custom CSS to hide the breadcrumb on mobile".

Safety Restrictions

For security reasons, Nuvi sanitizes custom CSS to prevent malicious code:

• No JavaScript — expression(), url(javascript:), and event handlers are stripped.
• No external imports — @import rules referencing external URLs are blocked.
• No position: fixed overlays — You cannot create overlays that cover the entire viewport.
• Standard CSS properties — All standard CSS properties like color, font-size, margin, display, grid, and flex are fully supported.

Common Examples

Here are frequently requested custom CSS snippets:

Hide the Announcement Bar

.announcement-bar {
  display: none !important;
}

Override Heading Font

h1, h2, h3 {
  font-family: 'Georgia', serif !important;
  letter-spacing: -0.02em;
}

Make Product Images Rounded

.product-card img {
  border-radius: 12px;
}

Adjust Mobile Navigation Size

@media (max-width: 768px) {
  .mobile-nav a {
    font-size: 18px;
    padding: 12px 16px;
  }
}

Tips and Best Practices

• Use your browser's Inspect Element tool to find the correct CSS class names.
• Avoid !important unless necessary — it makes future overrides harder.
• Test on both desktop and mobile after adding custom CSS.
• Keep your custom CSS minimal — rely on theme settings for standard changes.
• Comment your CSS with /* ... */ so you remember what each rule does.