LemonStand Themes Overview

LemonStand provides a powerful, highly flexible theme engine that makes it easy for web designers to design beautiful custom online stores. Whether you're building or customizing a theme for a client, your own store, or as a commercial theme to sell, this manual provides an in depth guide on how to do this. You can manage Themes for your store from the Store Design > Themes page.

Anatomy of a theme

Storefronts in LemonStand include everything your customers see when they visit your website. Storefronts are controlled by a theme.

Theme Overview

LemonStand themes are made up of multiple parts:

  1. Templates
  2. Pages
  3. Partials
  4. Resources
  5. Widget Blocks

Each of these parts do a different job. When combined together, these elements form the entire design of your online storefront so your brand can offer an amazing shopping experience!

Themes in LemonStand are flexible, giving web designers complete control so they can create exactly what they want.

Twig Templating Engine

LemonStand uses a flexible and open source templating language called Twig, which has a lovely syntax that’s concise and friendly.

Theme parts

Templates

Templates provide the overall structure that pages use. Templates are used to define the different types of pages that your website has, such as a home page, inner page and even an RSS feed page.

LemonStand Templates

A template includes the following items:

Code

This is the name of your template. It also corresponds to the actual template file name.

Content Type

Template content types allow you to define different formats of content. Here’s a list of different content types available:

  • text/html - the most common content type, used for any page that people will view in their web browser.
  • text/plain - commonly used for things like robots text pages, or even pages that contain CSV data.
  • text/xml - some systems prefer this XML format, but in most cases we recommend the following.
  • application/xml - This content type is meant for machine readable XML, such as RSS feeds.
  • application/json - used to specify JSON formatted data.

Description

This is descriptive text that’ll help you know what in the world a particular template is for!

Content

This is the real meat of the template and is where you would define the overall boilerplate structure or layout that is inherited by any page that uses the template.

The template content is where you define the overarching HTML layout that includes things like the doctype, header and footer. This is also where you define where the page content is output using the {{ page() }} variable.

Theme templates also commonly reference partials with the {{ partial() }} variable, which are described below.

Pages

Pages are where the action happens. Any time you you visit your storefront in your web browser, you are visiting a page.

Pages often contain dynamic content, so the same page may look different depending on how the page is being viewed. For example, the product page will change depending on which product you are viewing based on the URL parameter. The /product/juicy-lemon page will look different and load different content than the /product/chocolate-bar page, for example.

LemonStand Theme Pages

Name

The page name is used to help you identify which page it is amongst all the others!

Published (yes/no)

If you check this box, people can visit the page. If it’s unchecked, nobody can view the page.

Template

This is where you select which template that the page should use. The page will inherit the template’s content type and its content structure or layout.

URL

The URL is the address by which the page can be accessed, and is appended to the end of your storefront’s domain name.

If your store’s domain name is tastyfruit.xyz, and the page’s URL is /about-us, you would view that webpage by going to tastyfruit.xyz/about-us in your web browser.

URLs can contain dynamic segments, which can tell a page which data to load. A product page URL may look like /product/:urlName. The :urlName segment would be replaced by the product’s own URL which may result in a URL such as tastyfruit.xyz/product/juicy-lemon for example.

Action

Page actions set the context and define the type of page. As an example, the shop:product action tells LemonStand which Twig variables it should expect.

Code

This is the name of your page. It also corresponds to the actual page file name.

Content

This is where the bulk of the page content goes. For most pages, this would be the HTML, but could also be XML in the case of an RSS feed page, or plain text in the case of a robots.txt file.

Code Blocks

Code blocks allow you to define content on a per page basis that is output somewhere in the template using the {{ code_block() }} variable. Each page can have any number of code blocks.

For example, you may want to set up different analytics tracking code for each page of your website. You could then define a content block in your template’s HTML, and then for each page you could define the tracking code you want to output.

Code

Code blocks have a code field, which is how templates reference a particular code block. The code field also corresponds to the code block’s file name.

SEO

The SEO section of pages allows you to define meta data for that particular page. You can edit the following:

  • Title tag
  • Meta description
  • Meta keywords

Note that the page meta data can be overridden dynamically by products and categories which have their own meta data.

Partials

Partials are reusable pieces of code that can be referenced from inside templates or pages using the {{ partial() }} variable. You can even reference a partial from within another partial (inception warning)!

They’re great for keeping your theme organized. Any code that you find yourself repeating on multiple pages or templates would be a candidate for partial. Or, if a particular page or template is getting long and unruly, you can separate some logical pieces out into partials.

Resources

Resources is where files are stored that are used in the theme. Common resource files types would be CSS, JavaScript, images and font files.

Resource files can be organized into folders, and are referenced from within theme templates, pages and partials.

Content

Widget blocks allow you to define regions of text that can be easily edited by anyone, even a non-programmer!

Widget blocks can be referenced from Pages or Partials using the {{ content_block() }} or {{ widget_block() }} variable.

They’re great for text like copyright notices that need to be occasionally edited, or even the text on a Receipt page that the marketing team will want to update on a regular basis.

Code

This is the code used to reference the widget blocks from within a page or partial. It also corresponds to the widget block’s file name.

Name

The widget block name is used to help you identify which block it is amongst all the others!

Type

You can choose between html and text. HTML widget blocks allow you to use the rich text editor to format the content in a friendly way, whereas text content blocks will output plain text.

Content

This is the content that will be output wherever the content block has been referenced.

Theme rendering

The below diagram outlines the major steps and order for rendering a page when it is requested. Once a specific page is requested, LemonStand will set up page objects based on the action for that page, which will include page specific objects as well as globally available objects. The page template will be applied and the completed page will then be rendered.