Core concepts

To get started with building themes for Ticket Rewards there are a few core concepts you should understand.

We want designers and developers to be able to build beautiful online stores and not have the tools get in their way. In order to do that please take the time to go through the following concepts.

Concepts

Templates

A template describes the user interface of your store. You will have a template for the product page, one for the collection page, one for the product search result page and so on.

These templates will contain plain HTML but they will also contain:

• Expressions, like {{ product.name }}, which will take the name information from the product object and place it into your HTML
• Filters, like {{ product.name | uppercase }}, which will take the name of the product and place it into your HTML in an uppercase form
• Control structures, like {% if product.stock %}, which will test if the product is in stock
• Iteration structures, like {% for product in collections.frontpage %}, which will iterate through arrays

Layouts

A layout will describe the basic structure of your design. This will contain plan HTML code with all the tags that you would expect in a webpage: head, body, etc.

On top of that all layout files will contain a {{ content }} expression that specifies where the content of a template will be placed.

Snippets

These are similar to templates but are used for repetitive smaller bits of code. An example of a snippet would be the HTML code that creates your store search box. You can define it as a snippet and use it in multiple places.

Resources

The resources represent the static content of your design, be it CSS code, images or javascript.

In Ticket Rewards your entire theme is made up from layouts (one or more), templates and resources. In order to customize your theme all you need to do is edit these templates and resources. You are not restricted to anything in terms of look & feel. You can even use external libraries and plugins with your theme.

All these resources are also accessible throught the API so you could in practice change the design of your store from an external program.

Online resource editor

A default tree of resources looks like in the screenshot below. You can reach this screen from Store design -> Advanced theme editor or by pressing the key e.

From here you have access to all the resources that define your current theme. All javascript, css and image files are in the folder res. layouts, snippets and templates are special directories:

• in layouts you'll have all available layout files
• in templates you'll find special store templates, like the template for your product page, collection page, etc
• in snippets you'll have bits of code used more than once and you don't want to duplicate each time

All these resource are available for download as a zip file. (Use the Download the theme as a zip file link above the Add resource button)

Ticket Rewards Tools

For designing new Ticket Rewards themes we recommend using the Ticket Rewards Tools.