Born to Bloom • внутренняя инструкция

Как создать новый раздел каталога

Ниже рабочая последовательность создания новой товарной категории на основе уже настроенной страницы каталога. Инструкция сделана под текущую архитектуру Born to Bloom на Tilda.

Tilda ST305N Все товарные категории Внутренняя инструкция

Что берём за эталон

В качестве базовой, эталонной страницы для создания новых разделов используем страницу:

Каталог одежды и товаров для детей 0-6 лет | Born to Bloom

Где её искать

Открыть раздел «Мои сайты»
Найти папку «Все товарные категории»
Открыть страницу «Каталог одежды и товаров для детей 0-6 лет | Born to Bloom»

Именно эту страницу используем как шаблон, потому что на ней уже собрана рабочая структура каталога, нужные блоки, логика листинга и связанный с каталогом код.

Шаг 1

Сделать копию эталонной страницы

Наверх ↑

Новый раздел не создаём с нуля. Мы берём эталонную страницу каталога и дублируем её, чтобы сохранить уже собранную структуру, рабочие блоки и всю связанную с каталогом логику.

1

Открыть эталонную страницу
Найдите страницу «Каталог одежды и товаров для детей 0-6 лет | Born to Bloom» в папке «Все товарные категории».

2

Открыть настройки страницы
Можно либо навести курсор на строку страницы и нажать настройки справа, либо открыть страницу и нажать кнопку настроек в верхней части интерфейса.

3

Перейти в раздел «Действия»
В белом окне настроек открыть вкладку или раздел «Действия».

4

Нажать «Дублировать страницу»
После этого Tilda создаст копию выбранной страницы.

5

Нажать «Перейти к новой странице»
Это важно: дальше все изменения делаем уже на новой странице, а не на эталоне.

Эталонную страницу не редактируем. Все изменения всегда вносим только в её копию.

Шаг 2

Заполнить настройки новой страницы

Наверх ↑

После перехода к новой странице нужно сразу открыть её настройки и заменить базовые данные. Это помогает не оставить старый URL, старое описание и старый заголовок от эталонной страницы.

1

Снова открыть настройки страницы
Уже на новой, только что созданной странице.

2

Задать адрес страницы
В поле URL нужно прописать правильный адрес нового раздела.

3

Добавить короткое описание
Внести актуальное описание страницы для этого раздела.

4

Заполнить заголовок страницы
Это название будет показываться во вкладке браузера и одновременно будет видно в списке страниц внутри Tilda.

5

Сохранить изменения
После заполнения всех полей обязательно сохранить настройки страницы.

Что обязательно заполнить

URL страницы
Короткое описание
Заголовок страницы

Почему это важно

страница сразу получает корректный адрес
в списке страниц не остаётся старое название
во вкладке браузера отображается нужный title

На этом этапе важно сразу переписать все базовые поля. Не оставляем от эталонной страницы ни старый заголовок, ни старое описание, ни старый URL.

Пример структуры URL: catalog / odezhda / novaya-kategoriya

Шаг 3

Поменять название раздела на самой странице

Наверх ↑

После дублирования на странице остаётся старое название эталонного раздела. Его нужно заменить в верхнем текстовом блоке, чтобы новый раздел отображался корректно для пользователя.

1

Найти верхний блок с названием страницы
После копирования там обычно остаётся старый текст. Например, если дублировали страницу каталога, в блоке может остаться слово «Каталог».

2

Нажать «Редактировать блок»
Откройте настройки именно этого текстового блока.

3

Заменить старое название на новое
В открывшемся окне впишите название нового раздела.

4

Сохранить изменения
После сохранения проверьте, что на странице визуально отображается уже новое название.

Название в настройках страницы и название в верхнем блоке страницы - это не одно и то же. Нужно проверить и обновить оба места.

Шаг 4

Подключить нужную категорию в блоке ST305N

Наверх ↑

После того как название страницы заменено, нужно указать, какие именно товары должны выводиться в каталожном блоке на этой странице.

1

Спуститься к блоку товаров ST305N
Найдите на странице основной блок каталога с карточками товаров.

2

Нажать кнопку «Контент»
Открыть настройки контента этого блока через кнопку с карандашом.

3

Найти поле «Выводить товары из каталога»
Внутри окна контента открыть выпадающий список с категориями.

4

Выбрать нужную категорию
В списке указать тот раздел каталога, который должен отображаться на новой странице.

5

Нажать «Сохранить» и «Закрыть»
После этого блок начнёт подтягивать товары уже из выбранной категории.

Что здесь важно проверить

выбрана именно нужная категория
не остался старый раздел от эталонной страницы
после сохранения на странице показываются нужные товары

Пример логики выбора

Каталог → Одежда → Новая категория

Если на этом этапе выбрать не ту категорию, вся страница будет технически рабочей, но пользователю покажутся не те товары.

Шаг 5

Найти новый recID блока каталога

Наверх ↑

После дублирования страницы Tilda создаёт новый ID у блока каталога ST305N. Этот ID обязательно нужно скопировать, потому что дальше он будет использоваться для замены в коде страницы.

1

Открыть настройки блока ST305N
На новой странице найдите основной блок каталога товаров и нажмите его настройки.

2

Прокрутить окно настроек вниз
В нижней части окна находится строка Block ID.

3

Скопировать новый ID
Он начинается с #rec и выглядит примерно так:

#rec2014274851

4

Сохранить этот ID отдельно
Его нужно временно куда-то вставить, чтобы не потерять перед заменой в коде.

Копировать нужно полное значение вместе с #rec, а не только цифры.

Шаг 6

Заменить recID в Head страницы

Наверх ↑

Первый и самый важный блок для замены - это код внутри Head страницы. Именно там лежит часть CSS и привязок к конкретному ID каталога.

1

Открыть настройки страницы
На новой странице снова зайдите в настройки.

2

Перейти в раздел «Дополнительно»
Прокрутите окно вниз до блока HTML-код для вставки внутрь Head.

3

Нажать «Редактировать код»
Откроется окно с кодом, который сейчас привязан к исходной странице.

4

Скопировать весь код во временный документ
Удобно вставить его в Google Docs, Word или любой текстовый документ, где можно сделать поиск и замену.

5

Найти старый recID
Через Command + F или Ctrl + F найти старый ID, который остался от эталонной страницы.

6

Заменить старый recID на новый
Во всём коде Head нужно заменить старое значение на новый ID каталога, который был скопирован на предыдущем шаге.

7

Скопировать весь обновлённый код обратно
Полностью вставьте обновлённый код в поле Head и сохраните изменения.

Важно заменить не кусок кода, а именно все вхождения старого recID внутри этого блока.

Шаг 7

Заменить recID ещё в двух HTML-блоках страницы

Наверх ↑

После замены в Head нужно повторить ту же замену ещё в двух HTML-блоках на самой странице. Если пропустить хотя бы один из них, каталог может отображаться некорректно.

1

Заново открыть новую страницу
После сохранения Head вернитесь на страницу и найдите нужные HTML-блоки.

2

Найти HTML-блок Mobile Swatches
Откройте его на редактирование и скопируйте всё содержимое во временный документ.

3

Заменить старый recID на новый
Через поиск и замену вставьте новый ID вместо старого, затем верните код в блок и сохраните его.

4

Найти следующий HTML-блок под каталогом товаров
Ниже блока товаров есть ещё один HTML-блок, где также используется этот recID.

5

Повторить ту же замену
Скопировать содержимое, найти старый recID, заменить на новый, сохранить блок.

Где обязательно заменить recID

в коде Head страницы
в HTML-блоке Mobile Swatches
в следующем HTML-блоке под каталогом товаров

Что будет, если забыть замену

карточки могут стать узкими
сетка может выглядеть сломанной
часть функций каталога перестанет работать корректно

После замены recID во всех трёх местах страницу нужно сохранить и только потом переходить к финальной проверке.

Шаг 8

Сохранить, опубликовать и проверить страницу

Наверх ↑

После всех изменений страницу нужно сохранить, опубликовать и обязательно проверить, что новый раздел отображается корректно и на десктопе, и на мобильной версии.

Страница создана через дублирование эталонной страницы

Заполнены URL, краткое описание и заголовок страницы

Название в верхнем блоке страницы заменено на новое

В ST305N выбрана правильная категория товаров

Скопирован новый recID блока каталога

Новый recID заменён в Head страницы

Новый recID заменён в блоке Mobile Swatches

Новый recID заменён во втором HTML-блоке под каталогом

Страница сохранена и опубликована

На странице выводятся нужные товары

Карточки товаров отображаются корректно

Сетка каталога не сломана

На мобильной версии ничего не уезжает по ширине

Проверку лучше делать сразу после публикации, пока ещё легко вернуться и быстро исправить ошибку.

Частые ошибки

Что проверить, если страница работает неправильно

Наверх ↑

На странице выводятся не те товары Обычно это значит, что в блоке ST305N выбрана неправильная категория в поле «Выводить товары из каталога».

Карточки товаров стали узкими или поехала сетка Чаще всего это означает, что новый recID заменили не во всех нужных местах. Нужно перепроверить Head страницы, блок Mobile Swatches и второй HTML-блок под каталогом.

Осталось старое название раздела Нужно проверить не только настройки страницы, но и верхний текстовый блок на самой странице.

После публикации страница выглядит нормально на десктопе, но едет на мобильной версии Нужно отдельно открыть страницу на мобильном брейкпоинте и проверить, не уехали ли элементы по ширине.

Отдельный шаг

Проверить URL, описание и заголовок страницы

1

Проверить URL страницы
Адрес должен быть логичным, коротким и соответствовать структуре каталога.

/catalog/odezhda/novaya-kategoriya

2

Проверить краткое описание
Описание должно соответствовать новому разделу и не содержать текста от старой категории.

3

Проверить заголовок страницы (title)
Он отображается во вкладке браузера и в списке страниц Tilda. В нём не должно оставаться старого названия категории.

4

Проверить название раздела на странице
Текст в верхнем блоке (где был «Каталог») должен быть заменён на новое название.

5

Обязательно проверить отображение на всех экранах
Открыть страницу:

на десктопе
на планшете
на мобильном

и убедиться, что название:

не обрезается
не переносится некрасиво
не ломает верстку

Что часто забывают

оставляют старый title
не меняют описание
оставляют слово «Каталог»

Почему это важно

влияет на SEO
влияет на UX
ломает визуальное восприятие страницы

Это один из самых частых источников ошибок: страница технически настроена правильно, но пользователь видит старое название или обрезанный заголовок.

Отдельный шаг

Как правильно формировать URL новой страницы

Наверх ↑

URL новой страницы должен не просто быть коротким и аккуратным. Он должен отражать реальную логику каталога и тот раздел, в который мы добавляем новую категорию.

Принцип простой: URL собирается по иерархии разделов. Чем глубже новая категория находится в каталоге, тем длиннее и точнее будет путь.

1

Сначала определить, в какой раздел каталога добавляется новая страница
Нужно понять, это категория верхнего уровня, подкатегория внутри одежды, аксессуаров, текстиля или раздела «Малышам».

2

Собрать URL по логике структуры каталога
В URL сначала идёт catalog, дальше - путь по разделам, и только потом - новая категория.

3

Не придумывать путь вручную вне структуры
Нельзя делать URL случайным или слишком коротким, если категория находится глубже в дереве каталога.

Если категория добавляется в верхний уровень каталога

Тогда после catalog сразу идёт новая категория.

/catalog/novaya-kategoriya

Если категория добавляется внутрь раздела «Одежда»

Тогда путь строится через раздел одежды.

/catalog/odezhda/novaya-kategoriya

Если категория добавляется внутрь «Одежда → Аксессуары»

Тогда в URL должна отражаться эта вложенность.

/catalog/odezhda/aksessuary/aksessuary-dlya-volos

Если категория добавляется в раздел «Малышам»

Тогда путь строится от раздела для малышей.

/catalog/malysham/novaya-kategoriya

Если категория добавляется в «Малышам → Одежда»

Нужно сохранить и раздел «Малышам», и внутренний раздел «Одежда».

/catalog/malysham/odezhda/novaya-kategoriya

Если категория добавляется в «Малышам → Аксессуары» или «Малышам → Текстиль»

URL тоже должен повторять эту структуру.

/catalog/malysham/aksessuary/novaya-kategoriya /catalog/malysham/tekstil/novaya-kategoriya

Правило: URL должен быть логичным продолжением структуры каталога. Сначала раздел, потом подраздел, потом конкретная новая категория.

Правильно

/catalog/odezhda/bryuki
/catalog/odezhda/aksessuary/aksessuary-dlya-volos
/catalog/malysham/tekstil/pled
/catalog/malysham/odezhda/body

Неправильно

/catalog/body, если это раздел внутри «Малышам → Одежда»
/catalog/aksessuary-dlya-volos, если категория живёт внутри «Одежда → Аксессуары»
/catalog/newcategory2026
/catalog/Одежда/Брюки

Дополнительно: URL пишем латиницей, в нижнем регистре, без пробелов, без кириллицы и без случайных цифровых хвостов.

Дополнительно

Что делать, если не работают хлебные крошки

Наверх ↑

Хлебные крошки формируются автоматически на основе URL страницы, но названия категорий берутся из словаря внутри кода.

Если новая категория не добавлена в словарь, крошки могут: не появляться, отображаться некорректно или показывать техническое название.

1

Открыть нужный HTML-блок
Найдите блок:
BTB — ONE HTML (MERGED) v5.3 STABLE (COUNT FIX ONLY)

2

Открыть код
Нажмите «Редактировать HTML».

3

Найти словарь
Нажмите Ctrl + F / Command + F и введите:

var dict

4

Найти структуру словаря
Она выглядит примерно так:

var dict = { "bryuki": "Брюки", "platya": "Платья" }

5

Добавить новую категорию
Нужно:

взять slug из URL (латиницей)
и прописать название на русском

Пример

"bryuki": "Брюки"

Новая категория

URL:

/catalog/odezhda/aksessuary-dlya-volos

Добавляем:

"aksessuary_dlya_volos": "Аксессуары для волос"

Важно:

и slug, и название пишутся в кавычках
между ними ставится двоеточие
в конце строки должна быть запятая (как у других)

Добавляется только новая категория.
Не нужно переписывать весь словарь.

↑ Наверх