Get custom CSS for customer portal

What is Custom CSS? Custom CSS allows merchants to fully customize the visual appearance of their customer portal beyond the basic theme settings. This enables complete brand alignment and creates a seamless experience that matches the merchant’s main store design.

Custom CSS Capabilities:

• Layout Customization:

  • Modify page layouts and spacing
  • Adjust grid and flexbox configurations
  • Control responsive breakpoints
  • Customize navigation and sidebars

• Typography:

  • Custom fonts and font families
  • Font sizes, weights, and line heights
  • Letter spacing and text transforms
  • Heading and paragraph styles

• Colors and Branding:

  • Brand color palette application
  • Custom background colors and gradients
  • Button and link styling
  • Hover and focus states
  • Border colors and shadows

• Component Styling:

  • Subscription card appearances
  • Form input styling
  • Button designs and interactions
  • Modal and dialog boxes
  • Navigation menus
  • Product images and thumbnails

• Advanced Features:

  • CSS animations and transitions
  • Media queries for responsive design
  • Pseudo-elements and pseudo-classes
  • Custom icons using CSS
  • Transform and filter effects

CSS Structure: The returned CSS includes:

• Global styles for portal-wide consistency
• Component-specific styles
• Responsive design rules
• Theme overrides
• Custom animations
• Print styles (optional)

Common CSS Selectors Available:

/* Portal container */
.subscription-portal { }

/* Subscription cards */
.subscription-card { }
.subscription-card-header { }
.subscription-card-body { }

/* Buttons */
.btn-primary { }
.btn-secondary { }
.btn-cancel { }

/* Forms */
.form-control { }
.form-group { }
.form-label { }

/* Navigation */
.portal-nav { }
.nav-item { }

/* Product displays */
.product-item { }
.product-image { }
.product-title { }

Use Cases:

• Apply custom branding to match main store design
• Create unique visual experiences for different customer segments
• Implement seasonal or promotional themes
• Enhance mobile responsiveness
• Add accessibility improvements (high contrast, larger fonts)
• A/B test different portal designs
• Integrate with design systems
• Implement dark mode or theme switching

Important Notes:

• CSS is sanitized for security (XSS prevention)
• Certain properties may be restricted for security reasons
• External resources (fonts, images) must use HTTPS
• CSS is cached for performance - changes may take a few minutes to propagate
• Invalid CSS syntax is automatically filtered out
• Some core portal elements have !important styles that cannot be overridden

Best Practices:

• Use specific selectors to avoid conflicts
• Test across different browsers and devices
• Keep CSS organized with comments
• Use CSS variables for maintainability
• Minify CSS for production performance
• Consider accessibility in color choices (WCAG compliance)
• Provide fallbacks for advanced CSS features

Security Considerations:

• CSS is sanitized to prevent code injection
• External URLs are validated
• JavaScript in CSS is blocked (e.g., expression(), behavior())
• Data URIs are validated for malicious content

Authentication: Requires valid X-API-Key header