Merchants can customize their storefront layout and style using CSS in the Admin, flexibly creating a branded look and enhancing the overall shopping experience.
⚠️ Before you start, please be reminded: As a network platform, it is necessary for SHOPLINE to frequently update the website design and the system's nature. If your custom CSS has problems due to website updates, this is out of the responsibility of SHOPLINE. Please regularly check your storefront status to ensure your store and layout function properly.
This article will cover the following:
1. How to customize CSS
Step 1
Go to [Online Store Design] > [Design] and select the Advanced Settings tab.
Step 2
Enter your custom CSS code in the "Custom CSS" field.
Step 3
Click Save at the bottom to save your changes; click Preview to open a new window and view the storefront. Once confirmed, click Publish to apply the CSS code to your store.
2. Notes
- Common plain standard CSS3 tags are supported.
- CSS mixins like Sass or Less are not supported.
- If you enter incorrectly formatted CSS, the storefront may not display properly.
- Invalid CSS or CSS that poses a security risk will be removed.
- Most CSS class names can be seen by looking at the HTML source code.
- SHOPLINE does not product specifications regarding the class usage and their meaning, as it may change in the future, so you may use it at your own discretion.
- Due to potential changes in future updates, SHOPLINE is unable to offer a comprehensive CSS stylesheet. Please monitor your website status frequently to ensure that your online store and layout are functioning properly.
-
If you have enabled Layout Engine, please note that custom styles added under Layout Engine > .css.liquid will also be applied to your storefront. If the same element is defined in both the "Custom CSS" and Layout Engine, you need to determine which has the highest priority. When the specificity and CSS selectors are identical:
-
"Custom CSS" has the highest priority.
-
Next is Layout engine > theme.css.liquid, where you can manually adjust the loading order.
-
Custom CSS added in other ".css.liquid" files:
-
Without render_to_top: true → lower priority than theme.liquid
-
With render_to_top: true → higher priority than theme.liquid
-
-
Comments