Start Strong
Sell Smart
Manage with Ease
Market to Success

Customizing Your Store with Custom CSS and the AI Code Assistant

Custom CSS lets programming-proficient merchants fine-tune their store's appearance beyond the built-in theme settings, at both the global theme level and the individual component level. You can write the CSS yourself, or use the AI Code Assistant to generate it for you based on a plain-language description of the change you want. 

This guide explains the limitations that apply to Custom CSS, how to add CSS manually, how to generate CSS with the AI Code Assistant, and how to remove CSS you've added.

Note:  Custom CSS is not supported on the checkout page.

 

 

Understanding Custom CSS Limitations

Before adding Custom CSS, keep the following restrictions in mind — they apply whether you write the CSS yourself or generate it with the AI Code Assistant:

  • At-rules: 
    • Component-level CSS prohibits at-rules entirely. 
    • Theme-wide CSS permits only: @color-profile, @font-face, @counter-style, @font-feature-values, @font-palette-values, @keyframes, @page, @property.
  • URL restrictions: Only URLs from the domain https://*.myshopline.com are allowed.
  • Character caps: 
    • Theme-wide CSS is limited to 1,500 characters maximum. 
    • Component-level CSS is limited to 500 characters maximum.

 

 

Adding Custom CSS Manually

To add Custom CSS at the theme-wide or component level:

  1. Go to Online Store > Design and click Design within the Current theme module.
  2. Choose where to add your CSS:
    • Theme-wide: Click the Theme settings icon, then open the Custom CSS module.
      image.png
    • Component-level: Select the component you want to style, then open the Custom CSS module.
      image.png
  3. Enter your CSS code and click Save to apply the changes.

 

Generating Custom CSS with the AI Code Assistant

The AI Code Assistant is available in OS 3.0 themes only. If your store is using an OS 2.1 theme, this icon won't appear in your theme editor — you can still add Custom CSS manually as described above.

Instead of writing CSS yourself, you can describe the styling change you want in plain language and let the AI Code Assistant generate the code for you.

 

Where to Find the AI Code Assistant

In the theme editor (Online Store > Design > My theme), the AI Code Assistant icon appears in three places:

  • Beside the Page Title: Located next to the name of the page you are currently viewing (e.g., Homepage), at the top of the left sidebar.
    image.png
  • Beside a Component Title: Found next to the title of specific sections or components in the left sidebar (e.g., next to Slideshow or Image banner).
  • Next to the Custom CSS settings: Displayed next to the Custom CSS heading in the settings panel for a page or component.
    image.png

 

Using the AI Code Assistant to Generate CSS

To generate CSS with the AI Code Assistant:

  1. Select the page or component you want to adjust in the theme editor sidebar.
  2. Click the AI Code Assistant icon next to the title of the selected page or component.
  3. Conversationally describe the storefront style change you want to make (e.g., "Make the product title text blue").
  4. The assistant will output the corresponding CSS code. 
  5. Click Apply. The code will automatically populate the Custom CSS field and show a preview.
  6. Click Save in the theme editor to publish the changes to your theme.

Example Use Case

Here’s an example of how you can use the AI Code Assistant to adjust the styling of a storefront component. In this scenario, we’ll make the Recommended products component title (e.g., "You may also like") larger, left-aligned, and pink on the product details page:

  1. From your SHOPLINE admin panel, go to Online Store > Design > My theme tab, then click Design to enter the theme editor.
  2. Go to the Products page and select the Recommended products  component.
  3. Open the AI Code Assistant by clicking the feature icon, enter: "Increase the component title font size, align it to the left, and change the color to pink," then click Generate.
    image.png
  4. The AI Code Assistant generates the CSS code automatically. Review the code, then click Apply to apply it to the Custom CSS field.
    image.png
  5. The generated CSS will be automatically applied to the Custom CSS field. Preview the change, then click Save to publish the update if everything looks good.
    image.png

 

 

Removing Custom CSS

To remove Custom CSS you've added — whether you wrote it manually or generated it with the AI Code Assistant:

  1. Go to Online Store > Design > My theme.
  2. Open the Custom CSS section where the code was applied.
  3. Delete the code block you want to remove.
  4. Click Save.