КАК СДЕЛАТЬ хлебные крошки в карточке товара на Тильде?

Подготовка к настройке модификации:

1. Создайте страницу и назначьте ее шапкой для каталога товаров. Для этого перейдите в раздел «Товары», затем «Настройки», выберите «Шапка и подвал» и выберите созданную страницу. Установите настройку «Открывать страницу вместо попапа»
2. На созданной странице добавьте блок «t123» и позднее вставьте в него код модификации;
3. Также на этой странице добавьте блок с каталогом (любой), выберите опцию «Отображать все товары из каталога» и в настройках блока установите количество видимых блоков до кнопки «Загрузить еще» равным 1. Это позволит уменьшить нагрузку на сайт при загрузке страницы, однако не повлияет на другие аспекты. Разделы каталога в этом блоке должны быть видны (не включайте галочку «Спрятать список разделов каталога»).
4.Создайте еще одну страницу на которой будет размещен весь каталог товаров, кастомизируйте этот блок по своему усмотрению. На эту страницу пользователь будет попадать из крошки «Раздел товара».

Для того, чтобы добавить на страницу хлебные крошки, необходимо заполнить следующие поля генератор кода:

1. «id блока t123» — в данном поле необходимо указать id блока в который будет добавляться сгенерированный код. Эта настройка помогает настроить параметры отступов для блока;

2. «id блока c каталогом в header» — указываем id блока с каталогом который добавили на страницу-шапку;

3."Укажите id каталога" — здесь укажи id того блока, который добавили на отдельную страницу с каталогом.

4."Укажите путь к каталогу товаров" — указываем полную ссылку на отдельную страницу с каталогом;

5. «Название для раздела „Все“ или оставьте поле пустым» — в данном поле необходимо указать название первого раздела, либо можно оставить поле пустым и для данного раздела автоматически будет указано название «Все»;

6. «Стиль разделителя» — выбери разделитель из предложенных вариантов, или укажи свой. При выборе своего варианта в дополнительном поле укажи знак который будет располагаться между разделами и выбери для него цвет;

7. «Цвет разделителя» — укажи нужный цвет для разделителя;

8. «Добавить пункт „Главная“ ведущая на главную страницу» — выбери данный пункт в случае если необходимо, чтобы в хлебных крошках первым разделом был размещен пункт «Главная», который будет вести на главную страницу сайта;


Расположение хлебных крошек:

В полях, которые раскрываются в данном разделе укажи параметры положения хлебных крошек.

• «Отступ сверху (px)»;
• «Отступ снизу (px)».

Настройка для мобильной версии:

В полях, которые раскрываются в данном разделе укажи параметры положения хлебных крошек в мобильной версии сайта (до 640рх).

• «Отступ сверху (px)»;
• «Отступ снизу (px)»;
• «Размер пунктов (px)» — размер шрифта для хлебных крошек в мобильной версии сайта.

Настройка шрифта:

• «Шрифт для пунктов» — в данном поле укажи шрифт, который указан в настройках Тильды для твоего сайта. «Для заголовков" — шрифт, который указан в качестве заголовков. «Для текста" — шрифт, который указан для основного текста;
• «Размер пунктов (px)» — размер шрифта, указывается в рх;
• «Насыщенность пунктов» — укажи необходимую насыщенность шрифта для раздела;
• «Цвет пунктов» — укажи необходимый цвет;
• «Активный пункт: насыщенность»
• «Активный пункт: цвет»
• «Активный пункт: непрозрачность (%)» — настрой непрозрачность 0%-прозрачный, 100% - не прозрачный;
• «При наведении: цвет пункта» — укажи необходимый цвет;
• «При наведении: непрозрачность (%)» — настрой непрозрачность 0%-прозрачный, 100% - не прозрачный;
• «При наведении: подчеркнуть пункт» — выбери толщину подчеркивающей линии или без подчеркивания;
• «При наведении: цвет подчеркивания» — выбери цвет подчеркивания. В случае если выше в полях ты указал вариант «без подчеркивания», то это поле можно оставить пустым.

7. Копируешь сгенерированный HTML код и вставляешь его в блок Т123, а сам блок T123 нужно добавить в шапку каталога товаров.

Важно:

• цвет фона хлебных крошек берется из цвета блока T123 где установлен код.
• отступы слева/справа и выравнивание берутся из настроек блока t123, если используете автоскейл, выберите 100%, если используете верстку по грид, выберите количество нужных колонок.
• если на странице товара не отображается фото товара и товары из секции «Смотрите также», после публикации всех страниц сайта обязательно отдельно публикуйте страницу каталога.