Working With Themes

You can install, create, import and edit themes in LemonStand from the Store Design > Theme page in your LemonStand admin.

What We'll Cover

Installing Themes

LemonStand offers a growing collection of free, open source, responsive themes that can be easily installed for use with your store. We've even created a bare bones theme for developers called Bones with no design styling that radically speeds up the development of custom themes. To install a theme for your store, log in to your LemonStand admin panel and access the Store Design > Theme page. You will be presented with a catalog of available themes that you can preview and install for use and customization with your store:

The Theme Library listing

To select and install a theme for use with your store, find the desired theme and click the Install button. You can also preview themes by selecting the Preview Demo button to open a demo of the theme in a new window.

You'll see icons for any themes you've installed for your store at the top of this page above the catalog of available themes.

Note

You can install more than 1 theme into your store's theme repository but only one theme can be active for your store at one time. To learn more about this read Live vs. Editing below.

Creating Themes

In addition to the available free, open source themes that you can install and customize, LemonStand gives you the ability to create a completely new, custom theme for your online store. To create a new theme from scratch, navigate to Store Design > Theme in your LemonStand admin panel and click on the Add Theme (+) button at the top of the page to create a new theme.

new-theme-form.png?mtime=20160516165056New Theme Form

To create your theme you'll need to complete the New Theme form and add metadata. A description of each form field and its purpose is below:

Field Description
API Code The API code used as a reference for processing your theme by our template engine. This is a required field.
Name The name of your theme to help you identify it vs. other themes you have have created or installed in your store previously. This is a required field.
Description To provide a longer description of your theme.
Author The name of the theme author.
Website The website URL of the theme author or related website.
Engine Currently, Twig is the only available option. This field allows for additional engines to be offered in future and there is no need to edit it.

If you expand the Customization options section, you'll see that you have an easy way to create an unlimited number of user editable theme options that make it easy for a non technical user to customize their theme without any knowledge of HTML, CSS or Twig code. Users can edit these options for the currently active theme in their LemonStand admin from Store Design > Customization. We describe more about how this works from the Theme Customization Options page.

Importing Themes

LemonStand allows you to import themes that have been created or edited offline. This includes third party developed themes, themes that you may have created offline, or existing installed themes that you may have exported to edit offline. To import a theme you'll need to navigate to Store Design > Theme and click the Import button in your LemonStand admin.

import-theme.png?mtime=20160516165708Import theme button.

You'll now need to select a ZIP file of the theme you'd like to import via upload. Once you select the file the status message next to the import button will say processing until the theme has been fully uploaded.

ImportTheme.png?mtime=20160426123746#ass

Once your file has been uploaded, you can select use the Theme select box to confirm whether you'd like to update an existing installed theme or create a new theme from your file upload. Once you have made your selection, hit the Import button to complete the import process.

Live versus Editing themes

While you can have multiple themes that have been installed into your store environment, only one can be live (or active) in your store at any time, and only one can be set to Editing per user (meaning each developer can be editing their own theme). This combination of options makes it easy to design and develop changes to your theme without impacting the experience of your store's customers until any changes you're making have been thoroughly tested. More on what each of these labels means in more detail below.

The installed Store Themes listing

For an advanced tutorial on developing themes with multiple developers using LemonStand and Git, check out Our Workflow for Multiple Developers at the Jibe.

Live (active theme)

The Live (or Active) theme is what visitors will see when they visit your LemonStand store. When you activate a new theme, you are changing the look and feel of your store. You can activate a theme by hovering over one of the installed themes for your store and selecting the ⚡Make this theme live button.

Editing

By making a theme "editing" you are telling LemonStand to change the editable files in your Store Design tools to the specific selected theme, as well as making it the theme you'll see when you visit your store. To do this, select the installed theme you'd like to edit and click the ✏️ Develop this theme button. If you are a web developer using our open source command line tool LemonSync-JS, which allows you to work on your theme code locally from your favorite editor, it's telling the currently editing theme to connect with the one your config file is targeting.


Editing Theme Manifest

Once a theme has been added to your LemonStand store, you can edit the extra information (or metadata) described above by navigating in your LemonStand admin panel to Store Design > Theme, hovering your mouse over the installed theme that you'd like to edit, and selecting the Edit Theme Manifest menu item. Here you can also edit theme customization options. We describe how to do this in more detail from the Theme Customization Options page.

Exporting Themes

You can export any theme that has been installed into your LemonStand store. This allows you to back up your theme somewhere safe, package it up for sale on a theme marketplace, or import a clean copy into a new LemonStand store for a client. It also enables more advanced developers to modify their theme in their standard desktop development environment using our open source LemonSync tool. To export any theme currently installed in your store, navigate to the Store Design > Theme page in your LemonStand admin, mouse over the installed theme you'd like to export and select the Export menu item. The theme will be packaged up into a single ZIP file and downloaded.