Theme settings
A marketplace changes most of its storefront’s look without touching code, from
Content → Theme (/admin/themes). Those choices reach your templates as variables.
Read them instead of hard-coding the same values, so the admin keeps control of them.
There are two kinds of settings:
- the theme settings every marketplace has (logo, colours, footer, homepage sections), under Customize;
- the theme options of a theme installed from the theme library, under Theme options. They exist only when that theme defines some.
Theme settings
Section titled “Theme settings”Customize offers four screens:
| Screen | URL | What it sets |
|---|---|---|
| General | /admin/themes?p=general |
Logo and its alt text, favicon, logo in email, theme colours, footer columns and their content, social media links, layout of the listing attributes, of the profile attributes and of the blog posts |
| Homepage | /admin/themes?p=homepage |
The homepage sections: welcome block, featured categories, featured listings, featured blog posts, edito, custom section, key points, member reviews, references / partners, FAQ, video |
| Custom CSS | /admin/themes?p=custom_css |
A stylesheet loaded on every page. See Assets. |
| Custom JS | /admin/themes?p=custom_js |
A script loaded on every page. See Assets. |
Reading them in templates
Section titled “Reading them in templates”The values a template needs arrive already resolved. The logo and name come in
settings:
<a class="logo" href="{{ routes.home }}">{{ settings.logo }}</a>settings.logo is ready-to-print HTML: an <img> of the uploaded logo with its alt text,
or the marketplace’s name when no logo is set. settings.name, settings.logo_alt and
settings.favicon hold the raw values.
Each homepage section reaches index.liquid as its own object, with a switch in
settings telling whether the admin turned it on:
{% if settings.homepage-welcome-block %}{% include 'homepage-welcome' %}{% endif %}{% if settings.homepage-categories %}{% include 'homepage-categories' %}{% endif %}{% if settings.homepage-listings %}{% include 'homepage-listings' %}{% endif %}The homepage template lists every section object and its
fields. The footer columns and social links reach footer.liquid as
settings.footer.columnsCount, settings.footer.columns and settings.social-links;
the listing card’s display choices reach listing-thumbnail.liquid as
settings.thumbnail. See Templates.
Theme colours are not variables: the platform turns them into a stylesheet loaded after your custom CSS. A colour set there therefore wins over the same property in your custom CSS, unless your rule is more specific.
Theme options
Section titled “Theme options”A theme installed from Theme library (/admin/themes/library) may come with its own
options: colours, texts, images, switches for its sections. When it does, the Theme
page shows a Theme options card leading to /admin/themes/options, a form generated
from the theme’s definition of its options, in groups.
The options are defined by the theme, which Kreezalid publishes. You cannot add an option to a theme, or define options for your own templates.
The theme object
Section titled “The theme object”When the marketplace uses a theme from the library, every storefront template receives
theme:
| Field | Description |
|---|---|
theme.name |
The theme’s name, Canopée |
theme.handle |
Its handle, canopee |
theme.version |
The installed version, 1.6.4 |
theme.settings |
The value of every option, by option id |
theme.css_variables |
A <style> tag setting the CSS variables of the colours and lists the admin changed, empty when they changed none |
On a marketplace that uses Kindshare alone, theme does not exist: test it before use.
{% if theme %} <p class="theme-version">{{ theme.name }} {{ theme.version }}</p>{% endif %}Option values
Section titled “Option values”theme.settings.<id> always holds a value: the admin’s, or the theme’s default when they
left the option untouched. The type of the option decides what you get:
| Option type | Value in the template |
|---|---|
| Text, multi-line text | The text (up to 500 and 10,000 characters) |
| Link | A URL starting with https://, http://, /, #, mailto: or tel: |
| Colour | #RRGGBB |
| Image, video | A public URL |
| Checkbox | true or false |
| List | The key of the chosen choice |
| Number | A number, within the option’s minimum and maximum |
{% if theme.settings.show_announcement %} <div class="announcement"> <a href="{{ theme.settings.announcement_link | escape }}">{{ theme.settings.announcement_text | escape }}</a> </div>{% endif %}Option ids are specific to each theme. To find them, print the object once in a template you are editing, then remove the line:
{{ theme.settings | debug }}