Version: StoreConnect v20
The StoreConnect Base theme is a clean and simple boilerplate ready for use. This starter theme is the default theme used in every StoreConnect installation.
The Base Theme can help you with any of the following customizations:
- Overriding or customizing any page, template, or snippet
- Enhancing or creating complex functionalities to improve user experience, such as dynamic data displayed to customers only
- Creating and inserting new and reusable templates
- Finding specific templates, snippets, variables, or translation keys that you need to override in your StoreConnect app
We currently provide liquid templates to generate front-end components such as pages, content block templates, snippets, and components. Most pages are liquidify, meaning that you can access their page templates. You can also insert custom content blocks using the StoreConnect interface. You can learn more about how to customize your store in this article.
One important point to note is that you don't need to upload the entire base theme if you have modified or added any of the pages, templates, or snippets. You can simply override them directly into a new theme in your StoreConnect app.
Page-level templates are templates that are output as the content of the entire page between the header and footer. They correspond to the page that the user is visiting. Some examples are the home page, the product page, the search page, and the cart page.
Templates control the content you see on your Store. They define the HTML layout as well as the data content you want to show. There are several kinds of templates, with each serving a different purpose. You should customize them based on what you want to achieve.
Snippets are reusable templates that you can load from any other template. For example, you may have a header that you want to use on each page.
You now have access to all JavaScript resources provided by the base theme. These can be customized by working within the resources directory. For guidance on how to effectively use these theme resources, refer to our Wiki and documentation.
A Locale defines a set of translations for a given language. You can create a Locale for each language your theme needs to support.
Variables are key-value pairs that you can use to provide configuration options for your theme.
Stores your CSS and JS assets.
Theme controllers give you full flexibility to design and manage how user data is handled within your theme. Learn more about Liquid controllers here.
There are two ways to develop a theme:
- Create a new theme in your StoreConnect app. We recommend this approach if you are working on a single store.
- Create a new theme using this base theme, customize it within your own dev environment, and then install it via the theme installer (provided by StoreConnect). We recommend this approach for devs creating new themes for multiple stores. Also you can take a look to our Clean Theme for further reference.
If you have chosen the first option, you can follow the theme reference instructions which gives you a quick start. You can also find a complete guide on how to create a new theme within your store in the Theme Builder Reference article.
Following the point #2 you will need to upload your theme using theme installer.
- Compress it to a zip file
- Upload it via the theme importer
- Preview your theme
The theme installer is located in your Salesforce org, where you need to upload this theme as a zip file as mentioned above.
Compatible with StoreConnect Liquid 1.1.3 and up