settings

Настройки стилей темы. Задаются в файле settings.html. По сути этот файл является версткой бокового меню страницы настроек стилей темы.

Вызов значения какого-либо параметра задается переменной

{{settings.необходимый_метод}}

Имя метода задается в атрибуте name поля настроек. Например, чтобы получить введенное значение такого поля

<input name="welcome_text" id="welcome_text" value="" />

нам нужно вызвать в шаблоне {{settings.welcome_text}}.

Первоначально вызов возможен только из шаблонов, но если к .js или .css файлу добавить .liquid (Пример: style.css.liquid) в них так же можно будет вызывать нужные методыобъекта settings.

Общепринятый стиль верстки настроек темы

В целом вы можете довольно широко менять вид "Настроек темы", однако лучше придерживаться единого стиля.

1. Каждый подраздел настроек заключается в <fieldset>

2. Название подраздела и параметров должно быть очевидным. Например

<legend>Цвета</legend>

3. Текстовые поля задаются через <input>

4. Подраздел настроек формируется в таблице.

Пример:

<fieldset>
  <legend>Цвета</legend>
  <table>
    <tr>
      <td><label for="text_color">Обычный текст</label></td>
      <td><input name="text_color" class="color" id="text_color" value="#505050" /></td>
    </tr>
    <tr>
      <td><label for="accent_color">Выделенный текст</label></td>
      <td><input name="accent_color" class="color" id="accent_color" value="#000000" /></td>
    </tr>
  </table>
</fieldset>

Где Цвета- название подраздела, Обычный текст и Выделенный текст- названия параметров, а text_color и accent_color их переменные.

Примеры использования

1. Цвет элемента (input.color добавит к обычному текстовму полю цветовую палитру в интерфейсе настроек темы):

<tr>
      <td><label for="text_color">Обычный текст</label></td>
      <td><input name="text_color" class="color" id="text_color" value="#505050" /></td>
</tr>

2. Загрузка файла (Например логотипа).

Рекомендуется использовать максимальные размеры изображения в атрибутах data-max-height/data-max-width. После загрузки платформа автоматически уменьшит изображение до заданных таким образом размеров, сохранив пропорции:

<tr>
        <th><label for="loaded_logo">Загрузить свой файл</label></th>
        <td><input name="loaded_logo.png" data-max-width="300" id="loaded_logo_image" type="file" 
data-max-height="75" /></td>
</tr>

3. Выбор вариантов параметра из выпадающего селектора:

<tr>
      <td><label for="regular_font">Обычный текст</label></td>
      <td>
        <select name="regular_font" class="font" id="regular_font">
           <option selected value="'DejaVu Sans', Tahoma, Verdana, sans-serif"></option>
        </select>
      </td>
    </tr>

4. Чек-бокс:

<tr>
      <td><label for="use_logo_image">Использовать логотип?</label></td>
      <td><input name="use_logo_image" id="use_logo_image" value="1" type="checkbox" /></td>
</tr>