Shopify Theme architecture

Developing a Shopify Blank Theme requires a well-structured file system that follows Shopify’s Liquid template and Shopify Theme architecture. Here’s an optimal file structure for your blank Shopify theme:

:open_file_folder: shopify-blank-theme/

│── :open_file_folder: assets/ → (CSS, JS, images, fonts, and other static assets)
│── :open_file_folder: config/ → (Theme settings and presets JSON files)
│── :open_file_folder: layout/ → (Main theme layout files like theme.liquid)
│── :open_file_folder: locales/ → (Translation files for multiple languages)
│── :open_file_folder: sections/ → (Reusable section components like header, footer, featured products, etac.)
│── :open_file_folder: snippets/ → (Reusable small Liquid templates like buttons, forms, etc.)
│── :open_file_folder: templates/ → (Main template files for pages, products, and collections)
│── :open_file_folder: customers/ → (Templates related to customer accounts)
│── :scroll: .gitignore → (Git ignored files like node_modules, environment files, etc.)
│── :scroll: config.yml → (For Shopify CLI settings and theme development)
│── :scroll: package.json → (If using a build process with npm, webpack, or gulp)
│── :scroll: theme.liquid → (Main layout file inside /layout/ folder)

Detailed Breakdown of Directories & Files:

:small_blue_diamond: 1. assets/

Stores all static theme assets such as:

  • CSS (base.css, theme.css)

  • JavaScript (theme.js, custom.js)

  • Fonts (font.woff2, custom-font.ttf)

  • Images (logo.png, background.jpg)

:small_blue_diamond: 2. config/

Manages theme settings & styles:

  • settings_schema.json → Defines theme settings in the Shopify admin.

  • settings_data.json → Stores user-configured settings from Shopify’s theme editor.

:small_blue_diamond: 3. layout/

Holds the theme structure, controlling how templates are rendered.

  • theme.liquid → The core layout file, where the header, footer, and body are included.

:small_blue_diamond: 4. locales/

Contains translations for multilingual support.

  • en.default.json → Default English language file.

  • fr.json, de.json → French, German, or any other locale files.

:small_blue_diamond: 5. sections/

Reusable sections that can be added via the Shopify Theme Editor.

  • header.liquid → The header section.

  • footer.liquid → The footer section.

  • hero-banner.liquid → A customizable hero banner.

  • featured-products.liquid → A section for featured products.

:small_blue_diamond: 6. snippets/

Reusable small UI elements to avoid code repetition.

  • product-card.liquid → A single product display.

  • price.liquid → A price formatting snippet.

  • breadcrumb.liquid → Breadcrumb navigation.

:small_blue_diamond: 7. templates/

Defines Shopify’s core page structures.

  • index.liquid → Homepage template.

  • product.liquid → Individual product pages.

  • collection.liquid → Collection pages.

  • cart.liquid → Shopping cart page.

  • search.liquid → Search results page.

:small_blue_diamond: 8. customers/

Manages customer-related pages:

  • account.liquid → Customer account page.

  • login.liquid → Login page.

  • register.liquid → Signup page.

Development Tools (Optional)

If you want to improve development efficiency, include: :package: package.json → Manages dependencies (if using a build system like Webpack, Gulp, or Tailwind CSS). :gear: config.yml → Used for Shopify CLI for local theme development. :stop_sign: .gitignore → To exclude unnecessary files from Git commits.

:small_blue_diamond:Next Steps:- Here is the initial file structure for your Shopify Blank Theme:

shopify-blank-theme/

├── assets/

│ ├── css/

│ │ ├── theme.css

│ │ ├── base.css

│ ├── js/

│ │ ├── theme.js

│ │ ├── custom.js

│ ├── fonts/

│ ├── images/

│ ├── logo.png

│ ├── background.jpg

├── config/

│ ├── settings_schema.json

│ ├── settings_data.json

├── layout/

│ ├── theme.liquid

├── locales/

│ ├── en.default.json

│ ├── fr.json

│ ├── de.json

├── sections/

│ ├── header.liquid

│ ├── footer.liquid

│ ├── hero-banner.liquid

│ ├── featured-products.liquid

├── snippets/

│ ├── product-card.liquid

│ ├── price.liquid

│ ├── breadcrumb.liquid

├── templates/

│ ├── index.liquid

│ ├── product.liquid

│ ├── collection.liquid

│ ├── cart.liquid

│ ├── search.liquid

├── customers/

│ ├── account.liquid

│ ├── login.liquid

│ ├── register.liquid

├── .gitignore

├── config.yml

├── package.json

:one: Setup Shopify CLI (shopify theme init)
:two: Create & Upload Theme Files (shopify theme push)
:three: Start Customizing the Blank Theme! :art:

2 Likes

How far I’ve known, shopify doesn’t support subfolders inside the assets directory. All files must be placed directly inside the assets. Though I’m new in learning shopify.