Theme structure

Theme structure

src
assets [1]
config [2]
layouts [3]
sections [4]
blocks [5]
pages [6]
templates [7]
plugin.js [8]
index.js [9]
.editorconfig: [10]
.env: [11]
.eslintrc.js [12]
.gitignore [13]
.prettierrc.js [14]
package.json [15]
  1. It contains all the assets used in the theme, including images and stylesheets files.

  2. It Contains theme editor configuration, including schema and default data.

  3. It contains theme layout templates.

  4. It contain all theme sections, which are reusable modules of content that can be customized and re-ordered by users of the theme.

  5. Custom reusable components that can be referenced in any page templates.

  6. Theme templates for core pages.

  7. There might be cases where you need a different markup for the same page. For example, you might want a sidebar on one product page but not in another. The workaround for this is to create alternate templates.

  8. Defines routes component. Each route component should map to a template in the pages folder.

  9. Since themes also function as plugins, this is a required file in order to use this theme as a plugin.

  10. ShopBase will use the environment variables declared in this file to connect to your ShopBase store.

Required files and folders: src/assets/styles/style.scss, src/config, src/index.js, .eslintrc.js, .prettierrc.js, .package.json