Zid Docs
  1. Getting Started with Zid Themes
Zid Docs
  • Merchant API
    • Start Here 🚀
    • Overview to Zid Apps
    • Authorization
    • Responses
    • Webhooks
    • Rate Limiting
    • APIs
      • Orders
        • Update Order by ID
        • Get Order Credit Notes
        • Get Order by ID
        • List of Orders
        • Order Notes
      • Reverse Orders
        • Reverse Order Reasons
        • Create Reverse Orders
        • Create Reverse Orders Waybill
        • Add Reverse Order Reasons
      • Carts
        • Get Abandoned Cart Details
        • List Abandoned Carts
      • Products
        • Managing Products
          • Get a Product by ID
          • Retrieve a list of products
          • Create a new product
          • Update an existing product.
          • Bulk update of products using their IDs or SKUs
          • Delete a product.
          • Product Setting
          • List Product Reviews
        • Digital Vouchers
          • Product Vouchers
          • Order Voucher
          • Add Product Voucher
          • Import Vouchers
          • Export Vouchers
          • Update Product Voucher
          • Remove Product Voucher
        • Product Categories
          • Get Single Category Details
          • Get all categories
          • Create Store Category
          • Update a Store Category
          • Add a product to a certain category
          • Publish/Unpublish a Category
          • Detach Category from All Products
          • Remove Category from Product
        • Product Badge
          • Product Badge
        • Product Attributes
          • Get Product Attributes
          • Get Product Attributes
          • Retrieve a product attribute
          • Add a New Product Attribute
          • Add a New Product Attribute
          • Update a product attribute
          • Delete a product attribute
        • Product Attribute Presets
          • Get attribute presets
          • Create Attribute Preset
          • Update Attribute Preset
          • Delete an attribute preset
        • Product Customizations
          • Add Product Variants
          • Insert Custom Options to a Product
          • Insert Custom User-Input Fields to a Product
        • Product Manual Sorting
          • Set Custom Product Order
          • Reset the manual sorting of all products
        • Product Images
          • Get List of images of a product.
          • Add an image to a product
          • Update a product Image Order
          • Delete a product image
        • Product Notifications
          • Availability Notification Stats
          • Availability Notifications Settings
          • List Availability Notifications
          • Add Availability Notification
          • Save Availability Notifications Settings
          • Manually Send Availability Notification Email
          • Export Availability Notifications
        • Product Import
          • Email All Products to Store Owner
          • Import Products via CSV or xlsx File
        • Product Stock (Multi-Inventory)
          • Get Product Stock by ID
          • List Product Stocks
          • Add Product Stock
          • Update Single Product Stock
          • Bulk Update Product Stocks
        • Product Questions & Answers
          • Get Question
          • Get Answer
          • Get All Questions
          • List Question Answers
          • Create Question
          • Create Answer
          • Update Question
          • Update Answer
          • Delete Question
          • Delete Answer
        • Product Reviews
          • List Reviews
          • New Reviews Total
          • Change Review Status
          • Bulk Change all Review Statuses
          • Delete Review
          • Import Product Reviews
          • Reply to Review
          • Delete Reply
          • Update Reply to Review
        • Digital Products
          • Create Downloadable Product
          • Generate an Upload URL
          • Upload File to S3
          • Create Product Downloadables
          • Get Product Downloadables
          • Delete Product Downloadables
          • Get Store Downloadables
          • Create Store Downloadables
          • Delete Store Downloadables
      • Inventories
        • Get Store Location by ID
        • List Store Locations
        • Add a New Location
        • Update a Location by ID
        • Update Products Stock by Location ID
      • Shipping
        • List Store Delivery Options
        • Add Shipping Option
      • Marketing
        • Gift Cards
          • Get Store Settings
          • Add gift card to the cart
          • Update Store Settings
          • Upload gift card designs
          • Remove gift card from the cart
        • Coupons
          • Create a New Coupon
          • List Coupons
          • Get Coupon Details
          • Update Coupon
          • Delete Coupon
        • Bundle Offers
          • Retrieve all Bundle Offers
        • Loyalty Program
          • Customer Wallet
          • Customer Points
          • Loyalty Program Points per Order
          • Store Loyalty Status
          • Redemption Methods
          • Cashback Rules
          • Add Redemption to Cart
          • Remove Redemption from Cart
          • Info Page
          • Loyalty Program Activation
          • Loyalty Status
          • Set Points Expiration
          • Cashback Rule Method Update
          • Cashback Rule Method Update Status
          • Add Points Redemption Method
          • Update Points Redemption Method
          • Delete Points Redemption Method
          • Toggle Redemption Method Status
          • Show Loyalty Points Info for Specific Customer
          • Customer Profile
          • List Data
          • Customer Points History
          • Info Page - Managers
          • Update Info Page
          • Adjust Customer Points
      • Customers
        • List of Customers
        • Get Customer by ID
      • Store Settings
        • 📄 User Roles and Permissions
        • Get Manager's Profile
        • Get VAT Settings
        • List of Payment Method
      • Countries and Cities
        • Retrieve Store Operating Countries
        • Retrieve Cities by Country ID
        • Countries List
      • Webhook
        • List of Webhooks
        • Create a Webhook
        • Delete a Webhook by OriginalId
        • Delete a Webhook by Subscriber
    • Store Events
      • Order
      • Product
      • Abandoned Cart
      • Customer
      • Product Category
  • Payment API
    • Merchant Activation
    • Submitting
    • Gateway Error Codes
    • Webhooks
      • Link Merchant Event
      • Payment Paid Event
      • Refund Event
    • Payment
      • Direct Payment
      • Embedded Payment
      • Execute Payment Request
      • Get payment status
    • ApplePay
      • ApplePay Checkout
      • On Payment Authorized
      • Register ApplePay Domain
      • On Providing Merchant Validation
    • Refund
      • Request Refund
  • Apps
    • Create your First App
    • Embedded Apps
    • App Scripts
    • App Events
    • App Subscription
      • Get Subscription Details
      • Update Usage-Based Charges
  • Themes
    • 🚨 Important Update: Zid Themes
    • Adding Video URL Feature to Third-Party 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
      • Store Social Media
      • 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. Getting Started with Zid Themes

Introduction to Theme Development

Welcome to the Zid themes guide, where we empower merchants and developers alike to create dynamic and engaging storefronts using Zid's robust theming capabilities. Whether you're tweaking an existing design or crafting a brand-new theme, this guide will provide you with all the tools and knowledge you need to succeed.

Developing Themes for Zid Merchants#

A theme in Zid is not just a visual layer; it is a comprehensive set of files that define both the look and functionality of your storefront. Functional components, which range from navigation elements to product displays, require developers to accurately retrieve and utilize data according to specific schemas, and aided by template components, all of which is detailed in this documentation.
We recommend that you start your development journey by cloning our sample theme, and customizing your way from there. Theme development involves editing CSS files for aesthetic adjustments as well as coding unique elements to enhance the a store's features and shopper experience.
This guide provides you with the necessary instructions and resources for developing, customizing, and managing themes effectively. Your storefront will not only resonate with your brand identity but also provide a seamless and engaging shopping experience for customers. Get ready to deliver a unique and compelling online presence with your Zid theme.

Who is This Guide For ?#

This guide is tailored for developers looking to build new Zid Themes, and for those wanting to customize existing ones. To make the most of it, you should have a basic understanding of web technologies like CSS and JavaScript.
A Zid Partner account is essential for uploading and testing themes on a development store. Sign up here for a Zid Partner account if you haven’t already.

Theme Development Roadmap#

To effectively start your journey in theme creation, follow these guided steps:
1
Read through Documentation
Start by familiarizing yourself with the Zid Themes Documentation. Begin with foundational topics like the theme file structure and Twig syntax. As you advance, explore subjects such as data schemas for retrieving specific element data, and code snippets illustrating how to implement particular features.
2
Explore Available Themes
Get inspired by browsing through the default themes and the diverse selections available on the Themes Market.
3
Start with a Sample Theme
Save time and resources by using our sample theme as a starting point. Preview the sample theme here.
4
Develop Your Own Theme
Either tailor the sample theme to your needs or begin crafting your unique theme from scratch, following our detailed documentation.
5
Package and Upload Your Theme
Familiarize yourself with how to use the Zid Theme Packager to compile and prepare your theme files for upload.
6
Test Your Theme
Utilize a development store to rigorously test your themes in a realistic store environment.
7
Submit Your Theme
Once satisfied, learn the process of submitting your theme for consideration on the Zid Theme Market via your Partner Dashboard.
Technical Prerequisites: Ensure Node.js and NPM (version 1.1.0 or higher) are installed on your machine to support the theme development process.
By following this guide, you'll be equipped to craft a storefront that not only looks great but also provides a seamless shopping experience for your customers. Enjoy the process of bringing your vision to life with Zid Themes.
Previous
Landing Page Development
Next
Manage your Themes
Built with