Skip to main content

File Naming Conventions

At 10SQ, we maintain a high standard of organization and clarity in our file naming conventions. This ensures efficient workflow and easy navigation for our team members. Below is a detailed guide on how we categorize and name files within our Shopify projects.

Prefixes​

Core Theme Files​

Prefix: core-*

These files form the essential parts of the theme. They are indispensable elements that any theme would require. Examples include headers, footers, and announcement bars. The naming should be intuitive and reflective of the component's function.

  • snippets/core-cart.liquid
  • snippets/core-cart-row.liquid

Testing Files​

Prefix: z-*

These files are used exclusively for testing purposes. They usually take the form of z-debug*. The 'Z' prefix ensures that these files are sorted at the bottom of the file tree, making them easily identifiable as test components. They are not part of the final product delivered to clients.

  • snippets/z-scratch.liquid
  • snippets/z-debug-theme-preview.liquid

Client-Specific Files​

Prefix: 0-[BRAND_CODE]-*

Files specific to a client's build are prefixed with 0-[BRAND_CODE]-*. This convention places these files at the top of the file tree, signifying their importance and custom nature for specific client projects. These files are tailored to meet the unique requirements of each client. The client code is added to ensure our builds are compatible with BrandSync.

  • snippets/0-msh-athletes.liquid
  • snippets/0-msh-athletes-item.liquid

Concepts​

Parent Child Pairings​

In our Liquid file organization, the concept of parent-child pairings plays a pivotal role. This structure is essential for maintaining a clear hierarchical relationship between components, making it easier to understand how different parts of a theme are interconnected. For example, consider the files snippets/0-msh-athletes.liquid and snippets/0-msh-athletes-item.liquid. Here, 0-msh-athletes-item.liquid is a child of 0-msh-athletes.liquid. This naming convention indicates that 0-msh-athletes-item.liquid is a subcomponent or a nested element within the 0-msh-athletes.liquid parent file. Such pairings are crucial for organizing components that are closely related and typically function together, ensuring that our code remains both intuitive and efficient to navigate.

Groupings​

Groupings in our Liquid file structure are used to categorize similar types of components under a unified naming convention. This approach aids in quickly identifying and accessing related files. For instance, the pattern core-card-* is employed to group all card-type components. All files that follow this naming convention, like core-card-product.liquid or core-card-article.liquid, are instantly recognizable as card elements. Similarly, core-block-* is used for generic blocks that are reused globally across various themes. This includes elements like core-block-header.liquid or core-block-footer.liquid. Grouping these similar types of components under a common prefix not only streamlines the file structure but also enhances the ease of development by grouping together elements that share a common purpose or design.