Skip to main content

Overview

What is a Shoplazza Theme?​

A theme determines the way that a Shoplazza online store looks, feels, and functions for merchants and their customers.

Shoplazza themes are built using a template language called Liquid, along with HTML, CSS, JavaScript, and JSON. Using these languages, developers can create any look and feel that their clients want. Shoplazza provides several tools and best practices to accelerate the development process.

Theme Architecture​

A theme controls the organization and style of a merchant's online store. Theme code is organized with a standard directory structure of files specific to Shoplazza themes, as well as supporting assets such as images, stylesheets, and scripts.

Theme Architecture

Key Components​

Markup​

The organization of each page is determined by the following components:

  • Layouts: The base structure that other templates build on
  • Templates: Different page types (product, collection, etc.)
  • Sections: Modular, customizable content blocks
  • Snippets: Reusable pieces of code

Supporting Assets​

  • Images: Product images, banners, icons
  • Stylesheets: CSS files for styling
  • Scripts: JavaScript for interactivity
  • Fonts: Custom typography

Development Workflow​

As a developer, you can build a custom theme for a specific merchant, customize a theme to meet a merchant's needs or build a theme to sell in the Shoplazza Theme Store. You can also build apps that extend the functionality of a theme.

Build Options​

  1. Custom Theme: Build from scratch for specific merchant
  2. Theme Customization: Modify existing theme
  3. Theme for Sale: Create theme for Theme Store
  4. Theme Apps: Extend theme functionality with apps

Getting Started​

Ready to start building Shoplazza themes? Check out these guides:

Allowing for Merchant Customization​

Most themes include settings that allow merchants to customize the look and feel of their online store. The merchant edits these settings using the theme editor.

Settings are defined in:

  • Config files: Define customizable options
  • Settings schema: Structure of customization options
  • Sections: Allow merchants to add/remove content blocks

Theme Distribution​

Once you've built your theme, you can:

  • 📦 Deliver to a specific merchant
  • 🏪 Sell in the Shoplazza Theme Store
  • 🎨 Use as a base for multiple projects
  • 🔄 Maintain and update regularly

Getting Started Tutorials​

Tools and Resources​

  • Shoplazza CLI: Command-line tool for theme development
  • Theme Editor: Visual editor for customization
  • Code Editor: Work with your preferred IDE
  • Language Editor: Manage translations

Next Steps​

Start your theme development journey:

  1. Learn about theme architecture
  2. Explore Liquid templating
  3. Build your first theme
  4. Customize a theme