Theme File Structure
Contents of a Zid Theme
.twig
file serving a distinct role in the theme's design and functionality.In Addition to Twig Templates, a Zid theme contains static assets, and optional JSON files for localization. The following hierarchy of files represent a valid Zid theme.
layout.twig
: Master layout for theme structure.header.twig
: Website header section.footer.twig
: Website footer section.templates
(Directory containing page-specific templates)404.twig
: Custom 404 error page.home.twig
: Homepage layout.search.twig
: Search results layout.products.twig
: Multiple product listings.product.twig
: Single product details.reviews.twig
: Customer reviews section.categories.twig
: All product categories overview.category.twig
: Individual category details.blogs.twig
: Blog post summaries.blog.twig
: Single blog post details.faqs.twig
: FAQ section.cart.twig
: Shopping cart interface.shipping-and-payments.twig
: Shipping and payment options.account-addresses.twig
: User account addresses management.account-orders.twig
: User's order history.account-profile.twig
: User profile and settings.modules
(Modular Twig snippets for template integration)common
(Reusable Twig templates across the theme)locals
(Localization files, e.g., 'messages.en_US.yaml')assets
(Static files: CSS, JavaScript, images)Note: For your theme to function correctly, the files and folders listed above must be included in your theme project folder.
What are Twig Templates and Data?
A Detailed Look at Twig Templates and Folders of a Zid Theme
Global Templates
.twig
files lying in the root directory are site-wide templates. They form the foundational layout of your theme, used across all pages.Page-Specific Templates
.twig
file in the templates
directory corresponds to a specific type of page or component within the store. We call these Page Templates. Each Page Template is designed to render a distinct part of the store, such as product listings (products.twig
) or the shopping cart interface (cart.twig
).templates
directory are mandatory.Twig Components/Modules
modules
folder). These components add specific functionalities to the Twig Templates and can be used across different parts of the theme.Directories with Optional Contents
.json
or .yaml
files for theme localization and internationalization, e.g., messages.en_US.yaml
. Please resist the urge to correct the spelling mistake in locals
, otherwise the theme will not compile correctly..json
or .yaml
files for theme localization and internationalization, such as messages.en_US.yaml
. Remember, keeping the 'locals' spelling as-is is crucial for the correct compilation of the theme..js
, .ts
, .css
, .scss
, .map
, .png
, .jpg
, .jpeg
, .gif
, .svg
, .woff
, .woff2
, .otf
, .ttf
, .eot
.Modified at 2024-12-05 07:56:37