Support

Theme Component Settings

📘

Heads up!

Theme settings are only used by the new designer launched in June 2016. Not sure which designer you're using? Check here.

The Cratejoy Designer customizes all site content and styles via simple, configurable strings that we call "settings". These string settings can be accessed in any HTML or CSS file and can be reused across your theme.

Using Settings

Settings can be used in any HTML and CSS file as a Jinja templated value. All settings are available in the settings variable on all HTML pages and CSS files. You can access the settings via the id specified in the settings_schema.json file.

HTML

<body>
  <h1>{{ settings.index_header }}<h1>
  {{ settings.index_content }}
</body>

<!-- Will render into -->

<body>
  <h1>Buy our great box now!<h1>
  <p>
    You should subscribe to Boxshop today while we still have
    <h3>50% off your first month!</h3>
  </p>
</body>

CSS

/* Settings can be accessed using their ids */
body {
  background-color: {{ settings.primary_color }};
}

/* Settings with slashes in their ids must be accessed using [] notation */
.btn {
  color: {{ settings['primary_button/text_color']}};
}

/*** Will render into ***/

body {
  background-color: #FFFFFF;
}

.btn {
  color: #1BF402;
}

CSS setting values cannot be used as partial values, you should use them as the full values of properties instead.

❗️

Bad

body {
  border: 1px solid {{ settings['border_color'] }};
}

👍

Good

body {
  border: 1px solid;
  border-color: {{ settings['border_color'] }};
}

Images

The Cratejoy designer supports automatic resizing and cropping guides for images used in your designs. In order to use this feature you must use the special helper to define image areas.

This helper generates a <div> with a background-image style rather than an <img> tag. This ensures that the size of the image uploaded by the merchant never changes the layout of the page, even on responsive layouts. For this to work you will have to define CSS styles that set a width and height.

<body>
  {{ setting_helpers.image_tag('hp_hero_image', class_name='hero flex-item') }}
</body>

<!-- Will render into -->

<body>
  <div class="hero flex-item" style="background-image: url(...)"></div>
</body>