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

Инструкция

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

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

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

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

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

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

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

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

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

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

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

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

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

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