SEOshop Documentation

The template editor

You can alter the look and feel of your store using the template editor (nicknamed TPE). The template editor gives you complete control over the HTML, CSS and JavaScript code.

Getting started

You may need to activate the template editor before you can start modifying your theme. Sign in into the backoffice and go to Design > Template Editor. Agreeing to the terms & conditions and activating the template editor will copy the theme files to your store and disable automatic updates from that theme. You can always go back to the original theme by reinstalling it in the theme store.

Getting started

Templates (.rain files)

Under the templates tab you will find an overview of all editable templates files. You can add snippets by clicking on the + icon at the top of the screen under [v1] or by clicking Create a new snippet under [v2].

After opening a template you can immediately start editing. All changes will automatically be visible on the frontend of your store.

Assets

Under the assets tab you will find an overview of all assets used in your theme. Assets include stylesheets, JavaScript files, fonts and images.

You can upload assets by using the + icon at the top of the screen under [v1] or by clicking on Create a new asset or by clicking the Upload Files button under [v2].

Settings

Settings will give users control to customize their shop's look. Under the settings tab you will find an overview of all settings used in your theme. A newly created setting will be directly visible to all users under Design > Settings > Theme settings under [v1] or Design > Customize Theme under [v2].

It's possible to create a new setting by using the + icon at the top of the screen.

  • Type - Checkbox, Text field, Drop-down list, Color, Image
  • Category - The setting will be listed under the same section at the Theme settings while giving it a unique category name.
  • Key - Variable title of the setting ( theme.* ).
  • Title - Title of the setting displayed at the Theme settings.
  • Description - Description of the setting.
  • [Text field]Value - Standard value shown at the text field setting.
  • [Checkbox] Value - If the value is activated or not.
  • [Drop-down list] Value - Standard value for your drop-down list.
  • [Drop-down list] Options - Every new row creates a new value in the drop-down list setting by using the following set-up: "Variable: Title of option".
  • [Image] Fixed size - Width/heigth of the fixed size of the uploaded image.
  • [Image] Maximum size - Width/heigth of the maximum size of the uploaded image.
  • [Image] Minimum size - Width/heigth of the mimimum size of the uploaded image.

Presets

You can create new presets for users to install. Preset are simply different combinations of settings. A preset can be installed from the top of the Theme settings page. If you are making a theme, we ask that you make a demo store for each preset with different products and settings.

Please refer to the theme-checklist for more details on the elements that should appear in a preset demo store.

Please note: Please do not delete the Default preset.

Was this article helpful? Yes No
One moment please
Thanks for your feedback.