The Code Base Theme is a Shopify theme designed to be used by developers within our company. It provides a starting point for new theme projects, with up-to-date best practices and solutions.
To get started with the Code Base Theme, follow these steps:
- Clone the theme repository to your local machine.
- Install the theme in your Shopify admin.
- Customize the theme to meet your needs.
- Publish the theme to your store.
This section describes the structure and purpose of the folders in the Code Base Theme.
Some paths in this section have an asterisk (*) at the end. This indicates that there is extended information available for that path. To view the extended information, scroll down to the bottom of this section.
The src
folder contains the source code for the theme. This is where you can make changes to the theme.
Files contained within the public/
directory are not modified by the build process
You can create subfolders in the src/assets/scss folder. The name of the subfolder will be included in the final file name to keep it consistent. Subfolders can also contain subfolders.
Example: src/assets/scss/sections/featured/product-grid.scss
-> sections-featured-product-grid.css
The first subfolder in src/assets/scss
is also the name of the @layer that is used around the transpiled SCSS.
Example:
@layer sections {
// CSS result
}
The src/assets/tailwind/plugins
folder contains the Tailwind CSS plugins that are used in the tailwind.config.js file.
You shouldn't touch these files.
The src/assets/tailwind/scss
folder contains the base Tailwind CSS files, where the base, components, and utilities are imported.