Цвет и вариант товара: как сохранить выбор от карточки до корзины
Покупатель выбрал чёрную сумку, увидел её фотографию и нажал «В корзину». Проверка магазина должна подтвердить, что в корзину попала именно эта комплектация — с понятным названием, нужным изображением и правильным количеством. Ниже — порядок проверки для владельца магазина и разработчика: от таблицы вариантов до воспроизводимого описания ошибки. Его можно применить к работающему магазину или включить в приёмку нового сайта.
Определите, какой именно товар выбирает покупатель
Сначала разделите модель, её характеристики и конкретное предложение. Название модели объединяет семейство товаров. Цвет и размер помогают выбрать исполнение. Продаваемый вариант связывает определённую комбинацию с её записью в каталоге, ценой и доступностью. Проверять только надпись «чёрный» недостаточно: она может измениться на экране, пока кнопка добавления продолжает отправлять прежний вариант.
В документации Shopify вариант определяется комбинацией значений опций, например размера и цвета. При его выборе должны согласованно обновляться связанные данные, включая медиа, цену и состояние выбора. Для владельца магазина это удобный принцип приёмки: все элементы карточки должны описывать один и тот же выбранный товар.
Попросите ответственного за каталог показать запись конкретного варианта. У платформы есть техническая идентификация, а у бизнеса может быть собственный артикул — SKU. Их значения необязательно совпадают. Разработчик проверяет соответствие между ними; посетителю показывают понятные названия и характеристики. Не нужно заставлять покупателя расшифровывать внутренний номер.
Для первой проверки возьмите модель с несколькими цветами и хотя бы одним отличающимся состоянием: другой ценой, отсутствующей комбинацией или временно недоступным вариантом. Простой товар с единственной кнопкой не покажет, как магазин обрабатывает изменения выбора. Если размеры не предлагаются, не добавляйте их в сценарий искусственно: проверяйте реальные особенности своего каталога.
Соберите таблицу соответствия вариантов
Ниже — учебная модель рюкзака Luma. Название, артикулы, фотографии и состояния вымышлены; это не ассортимент Ankobags. В примере продаются три комбинации, а бежевый рюкзак размера M не производится. Таблица показывает, какие сведения нужно связать до настройки переключателей.
| Комбинация | Артикул в примере | Подпись и изображение | Состояние |
|---|---|---|---|
| Чёрный / S | LUMA-BLK-S | Чёрный, S; фото чёрного рюкзака S | Доступен для добавления |
| Чёрный / M | LUMA-BLK-M | Чёрный, M; фото чёрного рюкзака M | Временно нет в наличии |
| Бежевый / S | LUMA-BGE-S | Бежевый, S; фото бежевого рюкзака S | Доступен для добавления |
| Бежевый / M | Не присваивается | Этой комбинации нет в ассортименте | Выбор не должен создавать продаваемый вариант |
В рабочем документе добавьте техническую ID варианта, подтверждённую цену, источник сведений об остатке и адрес страницы. Значения возьмите из действующего каталога. Если одно поле ведётся в системе учёта, а другое — в магазине, укажите, где исправляют каждый тип ошибки. Ручная правка витрины может исчезнуть после очередного импорта.
Не создавайте все сочетания автоматически только потому, что в списках есть два цвета и два размера. Сначала подтвердите, какие исполнения действительно существуют. Отсутствующая комбинация и существующий, но распроданный товар требуют разных объяснений. В первом случае нельзя обещать поступление без основания; во втором нужно показать действующий статус и предусмотренный магазином следующий шаг.
Согласуйте словарь названий. Один отдел может называть цвет «молочный», другой — ivory, а файл фотографии содержать старое обозначение. Назначьте человеку, который отвечает за ассортимент, задачу подтвердить соответствие. По одному имени файла нельзя заключать, что перед вами фотография нужного исполнения.
Покажите выбор словами, а не только цветным кружком
Покупатель должен понимать, что выбрано сейчас, до нажатия кнопки добавления. Практичный вариант — общее название модели и отдельная видимая строка «Цвет: чёрный · Размер: S». Если в самом заголовке уже зафиксирован другой цвет, эта строка не устранит противоречие: нужно пересмотреть правило формирования названия.
Для каждого образца цвета предусмотрите текстовое имя и различимый признак выбора. Рамка, отметка и подпись помогают понять состояние без сравнения оттенков. Рекомендация W3C Use of Color требует, чтобы цвет не был единственным визуальным способом передачи информации. Это относится и к выбранному, и к недоступному состоянию. Выполнение одного такого условия не подтверждает доступность всего магазина.
Пройдите переключатели клавиатурой. Видно ли, где находится фокус? Можно ли выбрать нужное значение без мыши? Понятно ли название элемента вспомогательным технологиям? Передайте разработчику эти задачи как проверяемые действия, а не просьбу «сделать удобные свотчи». Если используется стандартная группа радиокнопок, сохранение её нормального поведения часто понятнее покупателю, чем необычный самодельный контрол.
Для переведённого магазина отдельно проверьте согласованность подписей. Допустимо, что технический артикул остаётся прежним, а слово «чёрный» переводится. Недопустимо по ошибке связать переведённую подпись с соседним цветом. Проверяйте связь на одном и том же товаре, а не сравнивайте только списки слов в редакторе переводов.
Если размер требует пояснения, разместите инструкцию рядом с выбором. Сама инструкция отвечает на вопрос, как подобрать подходящее исполнение; сохранение этого исполнения в корзине — отдельная проверка. Обе задачи нужны, но смешивать их в одну отметку «размеры работают» не стоит.
Свяжите фотографии с конкретным исполнением
Для каждого варианта отметьте основное изображение, дополнительные ракурсы и общие фотографии модели. Общий снимок упаковки может подходить всем цветам. Крупный план бежевой поверхности не должен без пояснения выглядеть как подтверждение выбранного чёрного исполнения. Заранее решите, какие снимки остаются в галерее после переключения.
В Shopify к варианту назначается одно изображение; дополнительные изображения могут находиться в галерее товара. Такое назначение само по себе не означает, что тема автоматически отфильтрует все остальные фотографии по цвету. Если нужна отдельная группа ракурсов для каждого исполнения, это поведение надо согласовать и проверить в используемой реализации.
Пройдите галерею после выбора, откройте увеличение, затем вернитесь к карточке. Посмотрите, сохраняется ли понятная связь между выбранным вариантом и крупным изображением. Если посетителю разрешено смотреть другие цвета, обозначьте это ясно. Не создавайте ситуацию, в которой просмотр фотографии незаметно меняет товар для покупки.
Сверьте фото с реальным изделием через ответственного за ассортимент. Оттенок экрана и освещение могут влиять на восприятие, однако оговорка об этом не исправляет снимок другого материала, размера или модели. Для приёмки важна подтверждённая принадлежность изображения, а не обещание абсолютно одинакового цвета на любых устройствах.
Проверьте ссылку, перезагрузку и быстрые переключения
Выбор должен быть понятен не только после последовательных нажатий внутри карточки. Покупатель может открыть присланную ссылку, обновить страницу или вернуться из корзины. Для каждого такого входа запишите ожидаемое поведение. Если магазин обещает ссылку на конкретное исполнение, она должна воспроизводить именно его.
Shopify поддерживает прямые ссылки с параметром variant и ID варианта. Скопируйте фактический адрес после выбора и откройте его в новом окне без предыдущих действий в магазине. Проверьте выбранное значение и связанные данные. Для другой платформы попросите разработчика показать её способ адресации; переносить формат Shopify без проверки не нужно.
Согласуйте приоритеты для случая, когда сохранённое ранее предпочтение отличается от исполнения в ссылке. Практичное требование для ссылки на конкретный товар — показывать указанное в ней исполнение, а изменение объяснять. Если вариант больше не существует, магазин должен сообщить об этом и предложить осознанный выбор. Молчаливая подстановка похожего товара затрудняет проверку того, что покупатель собирался добавить.
Отдельно выберите два цвета быстро один за другим. После завершения обновления сравните отмеченную опцию, изображение, цену, доступность и результат добавления. Цель — найти ситуацию, когда запоздавшее обновление первого выбора перезаписало второй. Разработчик определяет техническую причину; в журнал достаточно внести последовательность действий и получившееся расхождение.
Состояние загрузки тоже нужно согласовать. Если данные ещё меняются, кнопка не должна незаметно отправлять прежний товар под новыми подписями. Возможное решение — временно остановить добавление и понятно показать ожидание. Проверяйте результат при обычной работе и в согласованных условиях замедления, не меняя настройки действующего магазина ради эксперимента.
Пример Ankobags: вариант сохранился, название требует отдельного внимания
Ankobags входит в нашу сеть проектов. 22 сентября 2026 года мы проверили один сценарий на карточке Lili Oldlace: выбрали black и добавили рюкзак в первоначально пустую гостевую корзину. Это наблюдение работы интерфейса, а не оценка продаж магазина.
После выбора обновились крупная фотография, адрес страницы и показанный артикул. В корзине оказались вариант black, его чёрное изображение и количество 1. При этом общее название товара продолжало содержать Oldlace — и в карточке, и в записи корзины.
Этот пример показывает, зачем проверять отдельно модель и подпись исполнения. Технически нужный вариант может попасть в корзину, но название всё равно оставит человеку вопрос о цвете. При таком устройстве каталога полезно согласовать общее имя модели и явно отделить выбранный цвет. По одному названию нельзя утверждать, что покупателю отправят неправильный товар.
Покупку не оформляли; тестовую позицию удалили. Остальные варианты, устройства, наличие на складе и обработку заказов в этой проверке не оценивали.
Сверьте запись в корзине, а не только уведомление о добавлении
Сообщение «Товар добавлен» подтверждает лишь один видимый этап. Откройте корзину и сопоставьте её строку с таблицей вариантов. Проверьте модель, выбранные характеристики, изображение, количество и цену единицы. Общая сумма строки может отличаться из-за количества или применённых условий — сначала выясните, какое значение показывает интерфейс.
Добавьте два разных исполнения одной модели. Они должны оставаться различимыми, чтобы покупатель мог изменить количество одного и удалить другое. Затем добавьте тот же вариант повторно и сравните результат с согласованным правилом: увеличение количества или отдельная строка. Наличие персонализации может менять это правило, поэтому одинакового цвета недостаточно для вывода, что позиции обязаны объединиться.
Откройте карточку по ссылке из строки корзины. Проверьте, можно ли восстановить именно выбранное исполнение и понять, что уже находится в корзине. Если после возврата карточка показывает вариант по умолчанию, зафиксируйте это отдельно от правильности самой корзины. Здесь два разных результата: сохранность записи и удобство её повторной проверки.
Мини-корзина и полная страница корзины могут показывать разные наборы полей. Проверьте обе, если они есть в магазине. Быстрое добавление из каталога тоже получает отдельный сценарий: посетителю должно быть понятно, какое исполнение добавляется без открытия карточки. Результат одного пути не подтверждает автоматически остальные.
Для этой проверки достаточно дойти до корзины. Перед тестовым заказом отдельно согласуйте среду, оплату и обработку уведомлений. Не создавайте реальные заказы для каждого цвета только ради проверки переключателя. После работы удалите свои тестовые позиции, сохранив записи, которые были в корзине до начала.
Пройдите сценарии приёмки на одной показательной модели
Следующая таблица — рабочий набор сценариев, который нужно адаптировать к функциям магазина. Для каждой строки запишите дату, адрес, устройство или ширину экрана, исходное состояние и фактический результат. Проверки отсутствующих функций, например переключения языка, отметьте как неприменимые, а не как успешно пройденные.
| Сценарий | Действие | Что сверить |
|---|---|---|
| Другой цвет | Выбрать цвет, отличный от начального, и добавить товар | Подпись, основное фото и строка корзины относятся к выбранному варианту |
| Комбинация опций | Изменить размер после выбора цвета | Получено существующее сочетание; непредложенный вариант нельзя добавить |
| Временно недоступный вариант | Выбрать известный вариант без остатка | Статус и разрешённое действие соответствуют подтверждённым правилам магазина |
| Прямая ссылка | Открыть адрес варианта в новом окне и обновить страницу | Воспроизводится указанное исполнение либо явно объяснено, почему оно недоступно |
| Быстрая смена | Последовательно выбрать два разных исполнения | После обновления все поля и добавление соответствуют последнему выбору |
| Два варианта в корзине | Добавить разные исполнения; изменить количество одного | Характеристики различимы; изменение не затронуло соседнюю позицию |
| Возврат к карточке | Перейти по ссылке конкретной строки корзины | Поведение согласовано; выбранное исполнение можно однозначно определить |
| Телефон и клавиатура | Повторить выбор на узком экране и без мыши | Подписи и состояние доступны; элементы позволяют завершить действие |
| Дополнительные пути | Проверить язык, быстрый просмотр и мини-корзину, если они есть | В каждом используемом пути сохранено соответствие конкретному варианту |
Не ограничивайтесь самым первым цветом в списке. Он часто совпадает с исходными значениями карточки, поэтому ошибка переключения остаётся незаметной. Если на одной модели нашли расхождение, определите с разработчиком его область: конкретная запись каталога, общий шаблон или отдельный способ добавления. От этого зависит, какие ещё товары нужно проверить.
Такая выборочная проверка не подтверждает весь ассортимент. Её результат — понятный перечень пройденных сценариев и обнаруженных проблем. После исправления общей причины повторите затронутые пути, а для ошибки одной записи проверьте также источник импорта. Общий порядок фиксации замечаний и передачи сайта разобран в отдельной инструкции.
Опишите ошибку так, чтобы её можно было повторить
Фразы «путаются цвета» недостаточно для исправления. Ниже — вымышленный дефект на учебной модели Luma. Он не описывает результат проверки Ankobags. В своём журнале подставьте реальные адреса, значения и наблюдения; предположение о технической причине храните отдельно от подтверждённого факта.
| Поле | Пример записи |
|---|---|
| Среда и начало | Тестовый магазин; версия браузера и дата записаны; корзина пуста; выбран бежевый S |
| Действия | Выбрать чёрный S → дождаться обновления → нажать «В корзину» → открыть корзину |
| Ожидание | Одна позиция Luma, чёрный S, артикул LUMA-BLK-S |
| Наблюдение | Фото в карточке чёрное; запись корзины обозначена как бежевый S, LUMA-BGE-S |
| Подтверждение | Адрес карточки, последовательные снимки выбора и строки корзины; результат повторной попытки |
| Закрытие | Повторить тот же путь после правки и проверить другой переход между вариантами |
В первую очередь разбирайте подтверждённую подмену варианта, количества или цены. Неясное имя при правильной записи корзины — другой тип замечания: оно тоже требует внимания, но не доказывает подмену товара. Такая классификация помогает поручить работу подходящему человеку: исправить каталожную подпись, изображение или механизм добавления.
К записи приложите только необходимое для воспроизведения. Личные данные покупателя и содержимое чужого заказа здесь обычно не нужны. Если ошибка возникает нестабильно, укажите число попыток и условия, при которых она появилась. Не превращайте один успешный повтор в утверждение, что проблема устранена для всех способов входа.
Закрепите правила и повторяйте проверку после изменений
У результата должны быть два ответственных: тот, кто подтверждает товарные сведения, и тот, кто отвечает за их передачу через интерфейс. В небольшой команде роли могут совмещаться. Важно, чтобы фотографию неверного исполнения не пытались исправить только программно, а ошибку отправляемого варианта — переименованием картинки.
Повторяйте затронутые сценарии после смены темы, установки приложения для вариантов, изменения импорта, перевода каталога или подключения быстрого добавления. Для новой фотографии достаточно проверить её привязку и отображение в нужных местах; для нового механизма корзины потребуется пройти путь добавления снова. Объём проверки должен следовать за изменением.
Завершённая приёмка оставляет таблицу реальных вариантов, согласованные правила выбора и журнал результатов. По ним другой сотрудник сможет понять, что именно проверено, какие исключения остаются и кто должен устранить замечания. Красивые переключатели или отсутствие сообщения об ошибке сами по себе такого подтверждения не дают.
Если нужно доработать выбор товара или принять новый интернет-магазин, передайте Salestudia несколько показательных карточек, таблицу реально продаваемых исполнений и ожидаемое поведение корзины. На этой основе можно определить задачи для каталога, оформления и разработки, а затем согласовать объём работ.
Официальные и профильные ссылки
Эти материалы дают контекст для данных, правил и рекомендаций на странице.
- Shopify — варианты товара в теме магазина Источник проверен: 22.09.2026
- Shopify — изображения вариантов Источник проверен: 22.09.2026
- W3C WAI — Use of Color Источник проверен: 22.09.2026
- Ankobags — карточка Lili, проверенный вариант black Источник проверен: 22.09.2026
Удобнее написать напрямую?
Коротко укажите компанию, рынок и задачу — так разговор будет предметнее.