Shopify Theme Architecture | Everything You Should Know About

What is Shopify theme architecture?

Shopify theme architecture refers to how files are organized and work together to control the appearance and functionality of an online store. It includes files for layout, features, styles, and settings that determine how the store looks and behaves.

There are three main types of files in a Shopify theme:

• Markup and features: These files decide how things are arranged and work on a shop’s pages. They use Liquid to create the code that makes up the shop’s pages.
• Supporting assets: These files are like helpers. They can be pictures, scripts, or files the theme uses to make everything look good and work properly.
• Config files: These files use JSON, a way to organize data. They store settings that shop owners can change using the theme editor. It lets shop owners adjust things without having to know how to code.

Shopify’s Theme Editor – Structure of the Shopify Theme 

Layout

Layouts are the foundation for the structure and appearance of every page within an online store. They are crafted using Liquid files, a coding language in Shopify themes. Here’s an in-depth overview:

• Functionality: Layouts dictate how various elements, such as headers, footers, and other recurring content, are arranged across multiple pages of an online store. They provide a consistent structure and design throughout the website.
• Liquid Code: These files employ Liquid code to generate the layout and structure of each page. Liquid allows for dynamic content generation and customization, ensuring flexibility in displaying content.

1. Types of Layouts:

• General Layouts: This type of layout applies to most of the non-checkout pages on the store. It’s the default structure used for numerous pages.
• Checkout Layouts: This layout is specifically designed for the checkout pages but is exclusive to Shopify Plus merchants.

2. File Location: Layout files are stored within the “layout” directory of the theme’s folder structure. This organization ensures easy access and management of these essential files.

3. Key Components Inside Layouts:

• : This code snippet is crucial as it includes essential scripts needed by Shopify for various functionalities, like analytics scripts. It should be placed between the opening and closing (head) tags within the layout file.
• : This part of the code integrates all the content from the template files into the layout. It should be placed between the opening and closing body tags.

4. Customization and Alternative Layouts: By creating alternative layout files, it’s possible to craft diverse appearances for different pages. For instance, an alternative layout can be designed for a landing page without including the standard header and footer sections, providing a unique visual presentation.

5. Usage: By default, the theme.liquid layout is used for all pages unless specified otherwise in the template file. This default usage maintains consistency across the store’s design unless specific variations are intended.

Templates

In Shopify themes, templates play a crucial role in determining what content is displayed on different types of pages within an online store. 

Delving into the template code can also answer the question of how to find out what Shopify theme a website is using or if it is a custom design.

Here’s a breakdown of the key aspects of Shopify theme architecture concerning templates:

Basics of Templates

• Purpose: Templates control the content rendered on specific types of pages in a theme.
• Associated Template Types: Each page type in an online store corresponds to an associated template type. For instance, rendering a product page requires a product template.
• Customization: Multiple versions of the same template type can be created for different use cases, allowing customization for various content displays.

Location and File Types

• Location: Template files are stored in the “templates” directory within the theme’s structure.
• File Types: The two primary template file types are JSON and Liquid files. JSON templates facilitate Sections Everywhere, enabling easy content population, while Liquid templates directly contain Liquid markup and HTML.

JSON vs. Liquid Templates

• JSON Templates: Designed for easy content population from sections, allowing merchants to add, remove, or rearrange sections in the theme editor.
• Liquid Templates: Support Liquid markup and HTML directly for more traditional and specific content formatting.

Template Types and Descriptions

• Various templates exist, each representing specific content within an online store, from 404 error pages to product, collection, blog, and account-related pages.
• Each template type serves a distinct purpose and is essential for rendering corresponding pages in the store.

Schema and Content

• Schema: JSON templates have a fixed schema with specified attributes, while Liquid templates offer flexibility with standard HTML and Liquid markup.
• Content Inclusion: The content included in a template depends on its type and intended purpose, such as displaying product details or creating forms for customer interaction.

Usage and Customization

• Alternate Templates: These allow for different markup for the same template, providing flexibility to create specific designs for certain products or pages.
• Contextual Templates: Created when adapting a template for a specific buyer context, allowing overrides for different scenarios.

Practical Application

• Applying Templates: Templates are assigned, previewed, and rendered through various methods like Shopify admin, theme editor, and view URL parameters.
• Identifying Templates: The template object helps identify the currently used template for a specific page or resource.

Sections Everywhere and Evolution

• Sections Everywhere: Introduced through .json files, this feature empowers easy addition, hiding/showing, and reordering of sections on any page template, extending beyond just the homepage.
• Evolution of Template Files: .json files became prominent post-July 2021, enabling enhanced flexibility in content management compared to older .liquid files.

Templates and Their Functionalities

Each template is associated with a specific page type and dictates what content and functionality are visible on that page. For instance:

• Product Template: Controls how individual product pages are displayed, showcasing product images, descriptions, pricing, and the add-to-cart functionality.
• Collection Template: Governs the layout and content displayed on collection pages, listing various products within a collection.
• 404 Error Template: Determines the appearance of the page when a customer lands on an invalid URL, providing a user-friendly error message.
• Blog and Article Templates: Regulate the layout and structure of blog posts and the blog page, presenting blog content and comments section if applicable.

Sections

Sections are essentially self-contained chunks of a theme that can be added onto templates. A few common sections in Shopify themes include headers, footers, hero banners, image galleries, featured products, and email signup forms.

Sections allow for modular theme development. Rather than building an entire homepage template from scratch, developers can build different sections and allow merchants to mix and match sections to create unique designs without touching code.

Dynamic and Static Usage

• Dynamic Integration: Sections can be dynamically added to pages via JSON templates or section groups, allowing easy customization of page layouts. JSON templates and section groups can support up to 25 sections, each with a maximum of 50 blocks.
• Static Inclusion: For static content, sections can be included statically, providing in-context customization options. However, statically rendered sections need more flexibility in being modified or reordered by merchants.

Section File Location and Contents

• File Location: Section files reside in the sections directory within the theme’s structure.
• Content Types:
  • Main Content: HTML or Liquid content included within the section file. They access global objects, section-specific objects (like the section and block objects), and specific variables.
  • Assets: Sections can bundle their JavaScript and stylesheet assets using Liquid tags like % javascript % and % stylesheet % for section-specific functionalities.
  • Schema: Defined using the % schema % Liquid tag, specifying various attributes, settings, presets, defaults, and more for the section.

Utilization and Customization

• Rendering Sections: Sections can be rendered differently, either referenced in JSON templates, integrated through layout files or statically using Liquid tags.
• Integration with Theme Editor: Merchants can dynamically customize sections through the Theme Editor, allowing them to modify content directly without reloading the entire page. JavaScript events help identify user actions within the editor.
• App Block Support: Sections can include app blocks, enabling app developers to add their content to themes without altering the theme code directly. This functionality allows for enhanced app integration and customization.

Practical Application

• Customizable Sections: Sections, such as hero banners, contact forms, or product recommendation modules, are instrumental in Shopify theme development, often featuring customizable section settings.
• Ease of Customization: These sections simplify adding and tailoring content within templates while offering merchants a user-friendly interface through the Theme Editor.

Snippets

In Shopify theme development, snippets are like building blocks—small, reusable pieces of code designed to be used across multiple website sections. They are handy for encapsulating frequently used code segments, promoting reusability, and streamlining development.

Characteristics of Snippets:

1. Reusable Code Bits: Snippets are typically created for pieces of code that repeatedly appear throughout the site, such as product cards, blog cards, SVG icons, or social media links.
2. Common Use-Cases: For instance, product cards may appear in featured product sections, collection pages, or product recommendation areas, while blog cards might be visible in recent article sections, the main blog page, or even on error pages (like the 404 page).
3. Versatility in Functionality: Snippets serve various purposes, like displaying product information neatly in a uniform product card format or showcasing blog excerpts consistently across different site sections.
4. No Independent Settings: Unlike sections, snippets don’t have individual settings. Instead, they can access settings from the embedded sections, allowing them to inherit and display content or information chosen in those sections.
5. Integration with Sections: Snippets can be embedded within sections to handle specific functionalities. For instance, a section displaying product recommendations might use a snippet to uniformly exhibit each product’s details.
6. Passing Information: Sections act as containers determining what content to display, while snippets handle how that content is presented. Information chosen within a section can be passed into the snippet, ensuring that the right data is displayed correctly.
7. Enhancing Consistency: Snippets play a vital role in maintaining consistency across the website by presenting information uniformly, regardless of where it appears.

Assets

Assets refer to the files contributing to an online store’s visual and functional elements. These assets encompass various file types, such as images, stylesheets (CSS), JavaScript (JS), fonts, and other media files, that are integral to the appearance and behavior of the website.

Key Elements of Shopify Theme Assets:

1. Image Files: These include product images, logos, banners, icons, and other visual elements contributing to the website’s aesthetics. Optimizing image assets is crucial for faster page loading and an enhanced user experience.
2. Stylesheets (CSS): CSS files define web pages’ visual presentation and layout. They dictate colors, fonts, spacing, and overall styling aspects, ensuring a consistent and visually appealing design across the site.
3. JavaScript (JS) Files: JS files contain code that adds interactivity, functionality, and dynamic behavior to the website. They are responsible for features such as sliders, animations, form validation, and other interactive elements.
4. Font Files: Fonts play a significant role in defining the site’s typography and visual identity. Shopify themes often include custom font files or reference external font libraries for unique text styling.
5. Media Files: Other media assets, such as videos, audio files, or downloadable documents, might be utilized within the theme to enrich the user experience or provide additional information to customers.

Functionality and Organization of Assets:

1. Storage Location: Assets are typically organized within specific directories within the theme’s structure. For instance, images are often stored in the “assets/images” folder, while CSS and JS files reside in “assets/styles” and “assets/scripts” directories, respectively.
2. Loading and Optimization: Optimizing assets, like compressing images or minifying CSS and JS files, helps reduce page load times and ensures a smoother browsing experience for customers.
3. Theme Customization: Shopify’s theme editor allows merchants to manage and upload assets, providing a user-friendly interface to modify images, styles, and other media components within the theme.
4. Third-Party Integrations: Themes may incorporate assets from external sources or third-party services for specialized functionalities, like integrating payment gateways, social media widgets, or analytics tools.
5. Version Control and Updates: Managing asset versions and updates is crucial to ensure the website’s compatibility with newer functionalities or changes in design trends.

Config

In Shopify theme architecture, the ‘Config’ directory is fundamental for managing and storing the theme settings that control merchants’ appearance, behavior, and customization options. These settings, accessible through the Theme Editor under ‘Customize,’ are facilitated by two primary files within the ‘Config’ folder:

settings_schema.json

• Purpose: This file is a blueprint for creating and defining new settings within the Theme Settings section in the Theme Editor.
• Functionality: Developers use settings_schema.json to specify the types of customizable options available to merchants. These options might include color choices, typography settings, layout configurations, or enabling/disabling specific features.
• Creation of Settings: It outlines the structure and properties of each setting, such as its name, type (e.g., color picker, dropdown menu), default values, and any constraints or validation rules.

settings_data.json

• Purpose: settings_data.json is the file responsible for storing the selections and choices made by merchants within the Theme Settings.
• Automatic Population: When merchants change settings using the Theme Editor, this file automatically captures and retains these modifications.
• Storage of Choices: It stores the preferences, selections, or configurations merchants choose, preserving their customized choices for various elements and functionalities within the theme.

Locales

In the context of Shopify theme architecture, the ‘Locales’ directory is an essential component that houses locale files. These files are instrumental in enabling translations and facilitating a multi-lingual experience for an online store.

Translation Files Storage:

Locale files containing translations for different languages are stored within the ‘Locales’ directory. Each file typically represents a specific language or locale, allowing the theme to display content in that particular language.

Translation Provision:

These locale files provide translated content for various elements within the theme. This translated content is utilized in multiple areas:

• Enhancing the translated experience within the Theme Editor for merchants.
• Displaying translated text on the online store, enabling a multi-lingual storefront experience for customers.
• Allowing merchants the flexibility to customize and modify text displayed on the online store, facilitating localization and personalization.

Support for Multi-Lingual Experience:

By organizing translations into separate locale files, the ‘Locales’ directory supports including multiple languages in a theme, catering to a diverse customer base with varied language preferences.

Enhancing Accessibility and User Experience:

Translating content through locale files enhances the accessibility of the online store, making it more user-friendly and accommodating for customers who prefer to interact in their native languages.

Supporting Merchant Customization:

The locale files also enable merchants to customize and adjust the text displayed on their storefront. This flexibility allows for localization efforts or tailoring text to align with specific branding or marketing strategies.

Final words

In conclusion, understanding the Shopify theme architecture is pivotal for creating, customizing, and managing an online store. Merchants and developers can craft visually appealing and functional storefronts by grasping how files are organized and function. Mastering this architecture allows flexibility, customization, and a seamless user experience, ensuring your Shopify store stands out amidst the digital marketplace.