Customizing Your Store with Custom CSS

For users with a programming background, SHOPLINE offers a convenient way to customize your store's appearance using Custom CSS. This feature allows you to tailor styles at both the global theme and component levels, providing granular control over your store's design and even the styles of third-party apps.

Custom CSS Limitations

Please be aware of the following limitations when using Custom CSS:

• Component-level CSS: At-rules are not supported.
• Global Theme CSS: Only the following at-rules are permitted: @color-profile, @font-face, @counter-style, @font-feature-values, @font-palette-values, @keyframes, @page, @property.
• URL Usage: Only URLs from the domain https://*.myshopline.com are allowed.
• Character Limits:
  • Global theme custom CSS: 1,500 characters
  • Component-level custom CSS: 500 characters

How to Add Custom CSS

Follow these steps to implement your Custom CSS:

1. In your admin panel, go to Online Store > Design. Click the Design button within the Current theme module.
   
2. In the theme editor, locate the Custom CSS module:
   • Global Theme: Click the palette icon to access Theme settings and select Custom CSS.
     
   • Component-level: Choose the specific component you want to customize and locate the Custom CSS module.
     
3. Enter your custom CSS code and click Save to apply your changes.