SHOPLINE Online 3.0 Sections 🛍️
The next generation of e-commerce theme architecture powered by the Sline template engine.
Sections are the core building blocks of SHOPLINE Online 3.0 themes. They provide modular, flexible components that merchants can customize through the theme editor. With support for up to 5 levels of nested blocks, advanced schema configurations, and dynamic rendering capabilities, sections enable powerful and performant online stores.
Sline Template Engine
SHOPLINE Online 3.0 uses the high-performance Sline template engine, replacing Handlebars for faster rendering and improved performance. Sline provides lightweight design that effectively reduces loading time while ensuring smooth page rendering.
Built for e-commerce scenarios with SEO optimization, structured data support, and zero third-party package dependencies.
Multi-level Blocks 🧱
Support for up to 5 levels of nested blocks within each section, enabling complex modular designs and layered functionality.
Create sophisticated layouts with private blocks, public blocks, and app blocks. Each section can contain multiple blocks with their own settings and configurations, providing unprecedented flexibility in theme customization.
Dynamic Rendering API 🔄
Fetch HTML for theme sections through AJAX requests, enabling dynamic content updates without full page reloads.
Perfect for pagination, filtering, and interactive features. Request single sections or multiple sections with JSON responses containing HTML fragments.
Schema Configuration
Define section settings that appear in the theme editor, allowing merchants to customize sections without code.
Support for various control types including text, images, collections, colors, and more. Create presets, define blocks, and set up section groups for organized theme management.
Flexible Layout System ✨
Fine-tune element positioning, spacing, and alignment with precise layout controls. Adjust arrangement direction, auto-wrapping, alignment, positioning, and spacing between elements for perfect design control.
Mobile-specific adjustments allow separate configurations for desktop and mobile devices. Preview your sections across various device types to ensure optimal browsing experiences on all screen sizes.
Development Structure
Each section consists of .html (required), .css (optional), and .js (optional) files within organized directories. Sections support section groups for header/footer management, fixed sections for unchangeable components, and private blocks for modular functionality.
Built on standardized directory structures that enable efficient collaboration between templates, sections, and blocks for systematic theme development.