Смотрите подробную инструкцию и код ниже
Стилизация свойств вариантов товара
Инструкция

Данный код корректно работает и отображается в том случае, если для одного товара у вас указан один вариант, где в свойствах «Вид управляющего элемента» выбран как «Кнопки». Либо может быть несколько вариантов, но «Вид управляющего элемента» должен быть выбран как «Выпадающий список»

  1. Добавляем нужный блок на страницу из раздела «Магазин», переходим в «Настройки» — «Карточки» — ставим галочку «Показывать опции товара рядом с миниатюрой в списке товаров»
  2. Открываем нужный товар в каталоге товаров — раскрываем пункт «Варианты товара» — «Добавить свойство» — указываем своё название и «Вид управляющего элемента» выбираем как «Кнопки» — сохраняем
  3. Добавляем нужное количество таких свойств и заполняем их информацией
  4. Копируем код ниже и вставляем в блок T123
  5. Загружаем свои иконки для вариантов, для этого в любом зеро-блоке добавляем элемент «Image» — загружаем иконку — жмём правой кнопкой мыши — Copy Image Url. Повторяем нужное количество раз. Можно скрыть эти иконки в панеле слоёв и увести за область контента, но не удаляйте.
  6. В коде, который мы скопировали в 3 пункте, ориентируясь по комментариям добавляем ссылки на свои иконки
Если у вас в вариантах товара добавлено не 3 свойства, как у меня, а 4 и больше, то нужно продублировать часть кода, которая начинается от комментария «№ иконка» и до закрывающей скобки }. Также поменять в это части кода nth-child (№) номер на свой порядковый
Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему
Made on
Tilda