Custom CSS Injection for Zid Themes

As a ZAM Theme developer, you have the flexibility to allow merchants to add custom CSS styling to their active themes directly from the Merchant Dashboard. This feature enables merchants to personalize the appearance of their online stores without the need for theme modification.

Accessing Custom CSS Styling

1. Log in to the Merchant Dashboard on Zid.

2. Navigate to the Themes section.

3. Look for the active theme you wish to customize and click the CSS button next to it.

Injecting User CSS

To allow merchants to inject custom CSS styling into their active theme, you can add the user_custom_css link to the end of the HTML head.

Code Sample:

{% if user_custom_css %}
    <link rel="stylesheet" href="{{ user_custom_css }}">
{% endif %}
</head>

By including this code in the HTML head section of your theme, the user_custom_css link will be added dynamically if the merchant has added custom CSS from the Merchant Dashboard.

The user_custom_css link refers to the custom CSS file that the merchant has uploaded in the Merchant Dashboard. This allows merchants to apply their preferred styling to the theme.

Theme Starter Sample

We've prepared a Theme Starter Sample on GitHub for you to use as a starting point to create new themes and implement the custom CSS injection feature.

Merchants can tailor the look and feel of their online stores according to their preferences, offering a more personalized shopping experience to their customers. Utilize this powerful customization feature to enhance your themes and attract more merchants to choose your designs on the Zid App Marketplace.