Zid Docs
Merchant APIApp APIThemes
Merchant APIApp APIThemes
Help Center
Slack
  1. Code Snippets
  • 🚨 Important Update: Zid Themes
  • Landing Page Development
  • Getting Started with Zid Themes
    • Introduction to Theme Development
    • Manage your Themes
    • Building Themes in Zid
    • Theme File Structure
    • Twig Syntax and Features
    • Zid Theme Packager
  • Templates
    • Layout
    • Home Page
    • Products
    • Cart
    • Store Language and Currency
  • Settings Schema
    • Text
    • Number
    • Text-Area
    • Select
    • Radio Buttons
    • Checkbox
    • Range
    • Color
    • Image
    • Product
    • Category
    • List
    • Fieldset
  • Code Snippets
    • Apple Pay Quick Checkout
    • Custom CSS Injection
    • Displaying the Store's Business Center Logo
    • Customizing Copyright Text
    • Store's Main Navigation Menu
    • Customer Wishlist
    • Products
      • Products Badges
      • Product Ratings
      • Remaining Product Stock
      • Sold Items Count
      • Product Filtration by Attributes
      • Grouped Products
      • Product Questions & Answers
      • Product Restock Notfication
    • SEO
      • Images alt text
      • Themes SEO Marketing Tags
    • Marketing
      • Metafields
      • Gift Feature
      • Loyalty Program
  • Zid Themes Library: API Integration
    • Products
    • Product Categories
    • Cart
    • Blog
    • Customer
    • Store Settings
  • Data Reference
    • Locals
    • Store
    • Cart
    • Product
    • Products List
    • Category
    • Categories List
    • Session
    • FAQs
    • Customer
    • Blogs
    • Page
    • Main Menu
    • Main Navigation Menu
    • Request
    • Orders
    • Addresses
    • Store Payment Methods
    • Store Shipping Methods
    • Store Banks
    • Asset URL
    • Header Meta Tags
    • Loyalty pogram Wallet
  • Themes CLI
    • CLI Authentication
    • Theme Create
    • Theme Package
    • Theme Update
    • Themes List
    • Theme Preview
  1. Code Snippets

Custom CSS Injection


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.
image.png
image.png

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:#

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.
Modified at 2024-07-28 16:46:09
Previous
Apple Pay Quick Checkout
Next
Displaying the Store's Business Center Logo
Built with