Overview of SHOPLINE Themes
Themes define the look, feel, and functionality of SHOPLINE online stores for merchants and their customers.
SHOPLINE themes are created using SHOPLINE's theme template language Handlebars along with HTML, CSS, JavaScript, and JSON. With these languages, developers can create any appearance that clients want. SHOPLINE provides various tools and best practices to speed up the development process.
As a developer, you can build custom themes for specific merchants to suit their needs. You can also develop apps to extend theme features.
Analysis of SHOPLINE Themes
Themes control the structure, functionality, and style of a merchant’s online store. The theme code is organized according to a standard directory structure specific to SHOPLINE theme files, including assets like images, CSS, and JavaScript.
If you are building a theme for the SHOPLINE theme store, you need to meet certain requirements for layout options, theme styles, and included features.
Markup and Functionality
Each page is organized using the following parts:
- Layout files
- Template used by the current page
- Sections added to the template
- Blocks in each section
Each theme should include different templates to display various types of content, like homepages and product detail pages. You can also create multiple templates for the same type of resource to show different content.
Sections and blocks can be configured in Handlebars template files. Section files can repeatedly include snippet files and use Handlebars, CSS, and JavaScript to implement theme features. Features included in the theme inform customers on how to interact with the content in the online store. For example, your theme should let customers add products to the cart by providing a Handlebars form helper of the product type.
Supporting Assets
You can add supporting assets to the theme to control the display of parts and features or use reusable code snippets across components.
For instance, you need to add assets to set the theme style. These resources help define the aesthetic of the online store and style the content to showcase the merchant's brand. The theme's style is defined by the CSS and JavaScript applied to the layout, template, and section files. Reusable Handlebars and HTML snippets can be stored in the snippets directory. Theme CSS and JavaScript files are stored in the theme's assets directory.
Additionally, you can use locale files to translate your theme into different languages. Locale files contain translations of text strings used throughout the theme and are stored in the theme's locales directory.
Allowing Merchant Customization
Merchants can customize their themes using the SHOPLINE Theme Editor. You can provide various customization options to let merchants create their desired customer experience without editing code.
- You can modularize your theme templates by using sections and blocks.
- You can create settings that allow merchants to control the appearance or behavior of the theme. Merchants can set dynamic values for settings using dynamic sources.
Theme Publishing
Themes can be published in the following ways:
- By packaging the theme directory into a zip file, which merchants can upload in their SHOPLINE admin backend.
- By using the SHOPLINE CLI to push a theme to a store.
Tools and Best Practices
Refer to the tools and best practices to optimize your theme development process.
Tools
SHOPLINE offers a range of tools to help you build SHOPLINE templates faster.
You can use SHOPLINE-provided tools to build and edit themes locally, and access SHOPLINE infrastructure. You can also use SHOPLINE's reference theme Seed as a starting point for your own theme, or explore how to implement various functionalities using SHOPLINE's theme-building best practices.
Explore the tools for building SHOPLINE themes.
Best Practices
To optimize your theme development experience, SHOPLINE has established a set of best practices you can reference when developing themes and any surrounding toolchains and processes. Our best practices include the following:
- Designing and coding themes - To create the best customer experience and ensure your merchant's store is fast, accessible, and discoverable, you need to consider many factors. While building Seed, SHOPLINE developers identified several principles and best practices you can follow to design and build optimized themes.
- Working in merchant stores - When developing or customizing themes for merchants, you should keep certain best practices in mind regarding security, tool usage, and collaboration.
