Skip to main content
Legacy Docs

This page describes the legacy theme extension development process based on the shoplazza te command. For the latest development process, please refer to Create a Theme Extension.

note

The Getting started guide for Theme Extension Development in this article is based on the use of the Shoplazza CLI (specifically the shoplazza te command).

Additionally, you can also create and develop extensions using the Shoplazza CLI (via the shoplazza app command). For more details, please refer to this documentation.

Theme Extension Development

Theme Extension is a way provided by Shoplazza to extend and customize theme pages. Developers can use Theme Extension to extend and customize theme pages.

Development Process​

Install Shoplazza CLI:

cli
npm install -g shoplazza-cli

Log in to Developer Store

cli
shoplazza login --store https\://{shopdomain}.myshoplaza.com/

Create Extension:

cli
shoplazza te create

Choose the Extension type (Basic or Embed).

  • Basic Extension: Allows adjusting the insertion position in the theme editor.
  • Embed Extension: The insertion position is hardcoded in the Extension (recommended for pod developers).

Start Development:

cli
cd your-project
shoplazza te serve

Note: Select a template to develop your theme and preview. After you choose the theme, there are 2 links shown below:

Two links will be displayed:

  • The first link redirects to the theme editor, where you can enable the Extension and save the theme.
  • The second link redirects to the storefront for preview.

Preview Process:​

  • Access the Theme Editor Preview Link in the Store Backend:
  • Open the browser and navigate to the theme editor preview link in the store backend.

  • Add Theme Extension in the Theme Editor:
    Embed App: Go to App Management and enable the extension.

  • Complete Configuration in the Theme Editor and Save Draft:
  • Once the configuration in the theme editor is complete, save the draft. You can then access the storefront preview link to preview the changes.

Build Production Version:

cli
shoplazza te build
  • Enter the App's client_id and client_secret obtained from the Shoplazza Partner backend.

Release Extension

cli
shoplazza te release
On this page