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

Building Themes in Zid

Welcome to the Chapter 2 of the Zid Themes Documentation. Having familiarized yourself with the general steps of theme development, you're now ready to delve deeper into the specific components that form the backbone of a Zid theme. This following few pages are designed to demystify the core aspects of theme development and provide you with the practical know-how to turn your creative ideas into fully functional themes.

Understanding the Intricacies#

1.
File Structure: We'll begin by exploring the file structure of a Zid theme. A well-organized file system is key to efficient theme development, allowing you to locate, modify, and manage your theme components effectively.
2.
Twig Syntax and Functions: Next, you'll learn about the Twig template engine – the powerhouse behind Zid themes. Understanding Twig's syntax and functions is crucial for crafting dynamic, data-driven storefronts. You'll discover how to manipulate data and layout with Twig to create a unique customer experience.
3.
Zid Theme Packager: Finally, we'll cover the Zid Theme Packager, a vital CLI tool for building and managing your themes. This tool simplifies the process of packaging your theme into a deployable ZIP file, ready for testing or submission to the Zid Theme Market.

Practical Application with Sample Theme#

To enhance your learning experience, we highly recommend downloading and exploring our sample theme from GitHub. This sample is a practical companion as you navigate through this section, providing concrete examples and aiding in your understanding of how a Zid theme comes together. As you explore, you'll encounter .twig files, understand the rationale behind the file arrangements, and learn the steps to compile these into a functional theme.
By the end of this section, you should be able to confidently structure your theme files, utilize Twig to enhance your theme’s functionality, and package your theme for deployment. Let’s start building the foundations of your Zid theme.
Previous
Manage your Themes
Next
Theme File Structure
Built with