Start Strong
Sell Smart
Manage with Ease
Market to Success

Using the AI Code Assistant to Generate Custom CSS for Your Storefront

As your one-stop smart commerce partner, SHOPLINE embraces the latest AI trends and makes AI benefits accessible to all merchants. With the AI Code Assistant, you can efficiently tailor storefront visuals through code, even without a technical background. Based on your request, the assistant generates ready-to-apply code so you can easily customize your storefront styles.

This guide explains how to find and use the AI Code Assistant in the Theme Editor to generate and apply Custom CSS for storefront styling. Use this when you need quick, precise visual adjustments without editing theme code.

 

 

Where to Find the AI Code Assistant

AI Code Assistant is integrated into the Theme Editor. From your SHOPLINE admin panel, go to Online Store > Design > My theme tab, then click Design to enter the theme editor. You can find it from three entry points:

  • 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
     

 

How to Use the AI Code Assistant

To use the AI Code Assistant to generate custom CSS for your storefront, follow these steps:

First select the component or page you want to adjust, then describe your storefront style request conversationally. After understanding your question, the assistant will output corresponding code. Click Apply and it will auto‑fill Custom CSS and show a preview.

  1. Select the component or page 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.

Note: To remove styles added by the AI Code Assistant:

  1. From your SHOPLINE admin panel, go to Online Store > Design > My theme tab, then click Design to enter the theme editor.
  2. In the sidebar, open the Custom CSS section where the code was applied, then delete the inserted code block.
  3. Click Save to update 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 Product Recommendations 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 Product Recommendations 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 Apply.
    image.png
    image.png
  4. 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