Как добавить свои иконки в каталог товаров на Тильде?

Шаг 1. Подготовьте Блок Магазина
Убедитесь, что на вашей странице Tilda добавлен стандартный блок магазина (из категории «Магазин»). Модификация будет применять стили к кнопкам в этом блоке. И туда загружены товары из каталога.
Модификация будет применяться только к указанному блоку магазина на странице. Если поле оставлено пустым, модификация применится ко всем стандартным кнопкам магазина на странице.

Шаг 2. Настройте параметры в Генераторе
Перейдите в ваш Генератор модификации и настройте желаемый вид кнопок:

• ID блока с каталогом: (Если это поле присутствует) Введите ID блока магазина, к которому вы хотите применить модификацию. ID блока можно найти в настройках блока, вкладка «Основное» -> «ID блока».

Настройки кнопки 'В корзину' (для товаров В НАЛИЧИИ)
Эти параметры определяют, как будет выглядеть кнопка «В корзину», когда товар доступен:

• Ссылка на иконку: Вставьте полный URL изображения иконки, которую вы хотите видеть в кнопке «В корзину» (для товаров в наличии).
• Варианты контента в кнопке: Выберите, что будет отображаться в кнопке:

1. Только текст: Скроет иконку и оставит только стандартный текст кнопки от Tilda или заданный вами (если есть такая настройка).
2. Иконка + Текст: Покажет иконку рядом со стандартным текстом кнопки от Tilda или заданным вами.
3. Только иконка: Скроет стандартный текст кнопки и оставит только иконку.

• Размер иконки (рх): Укажите желаемую ширину и высоту иконки в пикселях.

Настройки кнопки 'Подробнее'
Эти параметры определяют, как будет выглядеть кнопка «Подробнее»:

• Ссылка на иконку: Вставьте полный URL изображения иконки для кнопки «Подробнее».
• Варианты контента в кнопке: Выберите способ отображения содержимого для кнопки «Подробнее» (Только текст / Иконка + Текст / Только иконка).
• Размер иконки (рх): Укажите размер иконки для кнопки «Подробнее» в пикселях.

Настройки кнопки 'Нет в наличии' (для товаров НЕТ В НАЛИЧИИ)
Эти параметры применяются к кнопке «В корзину» только в том случае, если товар имеет статус «Нет в наличии». Они переопределяют настройки кнопки «В корзину» (для товаров В НАЛИЧИИ).

• Ссылка на иконку: Вставьте полный URL изображения иконки для кнопки «Нет в наличии».
• Варианты контента в кнопке: Выберите способ отображения содержимого для кнопки «Нет в наличии» (Только текст / Иконка + Текст / Только иконка).
• Размер иконки (рх): Укажите размер иконки для кнопки «Нет в наличии» в пикселях.
• Текст для кнопки: Введите текст, который будет отображаться в кнопке, когда товар «Нет в наличии» (например, «Нет в наличии», «Под заказ»).

Шаг 3. Скопируйте код и опубликуйте
Когда всё готово — копируешь HTML-код и вставляешь его в блок T123.

Проверка и устранение проблем:

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