Editing your theme

Explore a wide range of customization options in Shoplazza's theme library to make your store uniquely yours. The theme editor is user-friendly, letting you adjust most design elements of your store efficiently and securely. You can make significant changes to your store's appearance without the need for editing HTML code. This approach ensures a simple and smooth design experience.

Backing up your website

Duplicating your theme in your Shoplazza Admin gives you the ability to safely develop and work with a backup version, preventing any loss of progress to your live website.

This can be achieved by going to your Shoplazza Admin > Online store > Themes, click the more options icon from your current theme and select Duplicate.

Adding a theme

Instead of having to create every web page yourself, default theme templates give you a great starting point working towards your end goal.

You can customize your store that fits your business the most by installing a free theme in your Shoplazza Admin > Online store > Themes, click Add theme drop down and select Explore free themes.

Customizing your storefront

Now, as the theme is live on your store, you can start customizing the details by clicking the Customize button.

Theme editor 2.0

The Shoplazza theme editor is designed in the most easy-to-use way for you to complete the entire look of your store from start to finish.

When you are designing a store with Shoplazza theme editor, it is always recommended to start from the top and work your way down following the tree view which is based on the structure of your website.

Sections in this view are correlated to the preview on the right and clicking on the section title will take you to the specific one you are working on.

Sections and blocks

Sections and blocks are pre-designed modules that help you design your website. Each section is made up of blocks that serve specific functions and design aspects of your web pages. For example, the header section is a shared navigation menu displayed consistently on the home page, collection page, product page, or any other pages your web content includes.

Adding sections to the default templates provides more flexibility in how you arrange your store's content without having to edit code.

There are two types of sections you can add to the default templates:

  • Theme sections: Featured sections that are exclusive to a particular theme.
  • Additional sections: Standard global sections that are accessible from any theme.

Note

Configurations in Theme settings only apply to the Theme sections instead of any sections added from the Additional sections.

  • Your announcement, header, and footer sections are minimized by default, clicking the expand icon will allow you to view blocks and make changes within them.

  • Click and drag the drop icon to reorganize the sections.

  • You can remove a section from the bottom of its settings or use the preview inspector toolbar for quick access.

App blocks

Shoplazza apps enhance your store's capabilities to create a unique buying experience for your customers and integrate with external services without touching any subject in coding. Embedded apps are built-in theme components that you can install in your Shoplazza Admin. You can find these apps in the Shoplazza App store  or by going through your admin under Apps Visit Apps store.

1. To advance and extend the functionality of your store with apps, please refer to your Shoplazza Admin > Apps, and add the corresponding app section in the Shoplazza theme editor.

2. The App icon is where app embeds can be accessed, enabled and configured.

Preview inspector

The theme editor includes a Preview Inspector, a feature that allows you to quickly find and adjust settings such as reordering, hiding and deleting sections and blocks all within the preview window. With this intuitive and time-saving tool, you can make complex changes faster and more efficiently.

Add sections and blocks in the preview inspector

1. Activating the preview inspector will allow you to work on sections and blocks directly in the preview window by hovering where you would like a new section to be added.

2. Click on any outlined section to gain quick access to its associated configurations in the customizer.

  1. With the customizable toolbar, you are able to reposition, duplicate, hide or delete a section conveniently.

Pages dropdown menu

Centrally located at the top of your screen, this template drop-down menu provides an efficient and convenient way to navigate your store.

With the ability to toggle between page templates or create new ones, you can easily build a fully functioning online store with the included content pages.

Viewing the custom page tutorial will help you understand how this process works.

Note

Please refer to Pages in the dropdown menu if your store requires additional content customization.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Live chat
Reset