Как переключать фото товара при выборе цвета или комплектации
Для одной главной фотографии на каждый цвет отдельный код не нужен: торговая вариация товара уже хранит своё изображение, а каталог Тильды переводит галерею к нему после выбора. Модификация начинается позже — когда для синего товара нужна целая синяя галерея, для красного красная, и фотографии других вариантов вообще не должны оставаться в листании.
В магазине слова «опция», «цвет» и «вариант» звучат одинаково, но для карточки товара это разные уровни. Простая опция может добавить подпись или цену. Торговая вариация описывает конкретную комбинацию — например, «синий, размер M» — со своей ценой, артикулом, остатком и фотографией.
Именно торговая вариация нужна, если картинка должна меняться вместе с выбором.
Короткий ответ
Создайте торговые вариации товара, назначьте каждой свою фотографию и оставьте эти фотографии в галерее карточки. После выбора Тильда сама найдёт нужный слайд и переведёт галерею к нему. Код нужен только тогда, когда надо не перейти к одному фото, а полностью заменить набор слайдов.
Что Тильда делает сама
Внутри каталога выбранная вариация хранит поле изображения. Когда посетитель меняет цвет или комплектацию, Тильда:
- определяет подходящую комбинацию опций;
- обновляет цену, артикул и остаток;
- берёт фотографию этой вариации;
- ищет её среди слайдов карточки;
- переводит галерею к найденному слайду.
Это не предположение по интерфейсу. Такая последовательность видна в функциях каталога: одна обновляет вариацию, другая отдельно двигает слайдер к её изображению.
Как настроить без кода
Названия кнопок в редакторе могут меняться, но порядок действий остаётся таким:
- Откройте товар в каталоге Тильды.
- Создайте варианты по признаку, который выбирает покупатель: цвет, размер, материал или комплектация.
- Проверьте именно торговые вариации — комбинации с отдельным остатком и артикулом, а не только текстовую опцию.
- Назначьте главную фотографию каждой вариации.
- Убедитесь, что эти же изображения входят в галерею товара.
- Сохраните товар, обновите блок каталога и опубликуйте страницу.
Последний шаг важен: опубликованный каталог и карточка в редакторе — не один и тот же режим. Проверяйте результат там, где товар увидит покупатель.
Почему картинка не переключается
Если цвет выбран, а фото осталось прежним, пройдите причины по порядку.
Фото назначено товару целиком. Тогда оно остаётся общим для всех вариантов. Нужна фотография внутри конкретной торговой вариации.
Назначенной картинки нет в галерее. Штатный код не создаёт новый слайд на лету: он ищет совпадение среди уже существующих. Если его нет, позиция галереи не меняется.
Не собрана нужная комбинация. Для товара «цвет + размер» отдельной вариацией является сочетание двух значений. Проверьте не только «синий», но и «синий + M», «синий + L» и остальные продаваемые комбинации.
Страница не обновлена после правки каталога. Сохранение товара и публикация страницы — два разных действия. После изменения вариантов обновите блок и проверьте опубликованный адрес в новом окне.
Когда штатной фотографии мало
Представим товар с тремя цветами и пятнадцатью фотографиями: по пять на каждый цвет. Тильда умеет перевести галерею к главной фотографии выбранного цвета, но остальные слайды никуда не исчезают. Покупатель листает дальше и снова видит чужой цвет.
Вот это уже задача MOD-167: не одна фотография вариации, а отдельная группа слайдов для каждого варианта. Мод должен оставить родной слайдер, свайп, зум, цену и корзину, меняя только доступную группу изображений.
Пока мод находится в исследовании. Главный открытый вопрос — как владелец без кода надёжно обозначит группы фотографий. Привязка к номеру слайда слишком хрупкая: переставили одну картинку, и все номера съехали. Сначала нужен способ, который переживёт обычное редактирование товара.
Что подготовить для галерей по вариантам
Удобнее всего составить маленькую таблицу до настройки:
| Вариант | Главная фотография | Остальные фотографии |
|---|---|---|
| Синий | синяя модель спереди | сбоку, сзади, деталь, упаковка |
| Красный | красная модель спереди | сбоку, сзади, деталь, упаковка |
Если у двух вариантов должна быть одна общая фотография — например, упаковка — отметьте это отдельно. Такая мелочь определяет, будет ли общий слайд виден в обеих группах или случайно пропадёт.
Что проверить покупателем
Пройдите товар так, будто видите его впервые:
- выберите каждый вариант по очереди;
- проверьте главную картинку, цену, артикул и остаток;
- добавьте вариант в корзину и сравните его название и фото;
- закройте и снова откройте попап товара;
- повторите выбор на телефоне свайпом;
- вернитесь к первому варианту и убедитесь, что галерея восстановилась.
Если нужна только одна главная фотография, на этом задача закрыта средствами Тильды. Не добавляйте модификацию ради функции, которая уже работает сама.