Zid Docs
Merchant APIPayment APIAppsThemes
Merchant APIPayment APIAppsThemes
Help Center
Slack
  1. Getting Started with Zid Themes
  • 🚨 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
    • 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.
Modified at 2025-04-24 08:35:25
Previous
Landing Page Development
Next
Manage your Themes
Built with