Create a new Zid theme using our starter template.
zid-theme new <theme-name>
<theme-name>
: The name of your new theme (required)
The new
command initializes a new Zid theme project with the specified name. It creates the necessary file structure and installs required dependencies to get you started quickly.
The new theme will be created with the following structure:
$ root
.
┃
┃─── query.json
┃─── layout.twig
┃─── header.twig
┃─── footer.twig
┃
┃─── templates (accepted extensions: [ '.twig' ] )
┃ ┃─── 404.twig
┃ ┃─── home.twig
┃ ┃─── search.twig
┃ ┃─── products.twig
┃ ┃─── product.twig
┃ ┃─── categories.twig
┃ ┃─── category.twig
┃ ┃─── blogs.twig
┃ ┃─── blog.twig
┃ ┃─── faqs.twig
┃ ┃─── cart.twig
┃ ┃─── shipping-and-payments.twig
┃ ┃─── account-addresses.twig
┃ ┃─── account-orders.twig
┃ ┃─── account-profile.twig
┃
┃─── modules (accepted extensions: ['.twig'] )
┃
┃─── common (accepted extensions: ['.twig'] )
┃
┃─── locals (accepted extensions: ['.json'] )
┃
┃─── assets
templates/
: Contains Twig template files for various pages (accepted extensions:.twig
)modules/
: For reusable module templates (accepted extensions:.twig
)common/
: For common template parts (accepted extensions:.twig
)locals/
: For localization files (accepted extensions:.json
)assets/
: For theme assets like images, CSS, and JavaScript files
Create a new theme with default options:
zid-theme new my-awesome-theme
After creating your new theme:
-
Navigate to the theme directory:
cd <theme-name>
-
Start customizing your theme by editing the Twig templates and adding your styles and scripts in the
assets/
directory. -
Use other
zid-theme
commands likebuild
andpreview
to test and develop your theme.
- Ensure you have the necessary permissions to create directories in the chosen location.
- The theme name should be unique and follow naming conventions (lowercase, no spaces, use hyphens or underscores).
- After creation, you can use version control (like Git) to manage your theme development.
For more information on theme development, refer to the Zid Theme Development Documentation.