Как добавить изображения вариантов и комбинаций опций на страницу товара

Если у товара есть несколько комбинаций опций, то при выборе варианта выбирается комбинация. Давайте сделаем так, чтобы покупатели могли выбирать вариант по нажатию на иконку этого варианта. Также мы будем подменять основное изображение товара на изображение комбинации, когда эта комбинация выбрана.

В итоге страница товара будет выглядеть как на картинке ниже:

Шаг 1. Иконки для вариантов опций

Добавим иконки для вариантов опций. При нажатии на эти иконки на витрине будут выбираться соответствующие варианты.

1.1. Откройте страницу Товары → Товары в панели администратора CS-Cart.

1.2. Нажмите на название товара, который нужно отредактировать.

1.3. Перейдите на вкладку Опции.

Примечание

В этой инструкции подразумевается, что у товара уже созданы опции и их варианты.

1.4. Нажмите на название опции, которую вы хотите отредактировать.

1.5. Перейдите на вкладку Варианты.

1.6. Добавьте иконки для вариантов опций. Не забудьте указать альтернативный текст, который появится, если иконки по каким-то причинам не отобразятся — наличие такого текста полезно для SEO.

1.7. Нажмите кнопку Сохранить.

Важно

Теперь иконки должны появиться на странице товара. Покупатели смогут выбрать нужный вариант нажатием на иконку. Но главное изображение товара при этом не изменится, пока вы не выполните шаг 2.

Шаг 2. Изображения для комбинаций опций

Сделаем так, чтобы главное изображение товара менялось при выборе комбинации опций.

2.1. Откройте страницу Товары → Товары в панели администратора CS-Cart.

2.2. Нажмите на название товара, который нужно отредактировать.

2.3. Перейдите на вкладку Опции и нажмите на кнопку Комбинации опций.

Примечание

В этой инструкции подразумевается, что у товара уже созданы комбинации опций. Если кнопка Комбинации опций не появляется, это значит, что у товара нет опций, которые могут быть частью комбинации.

2.4. Загрузите изображения для комбинаций опций. Не забудьте указать альтернативный текст, который появится, если изображения по каким-то причинам не отобразятся — наличие такого текста полезно для SEO.

2.5. Нажмите кнопку Сохранить.

Важно

Теперь если покупатель выберет комбинацию опций на витрине, то вместо главного изображение товара отобразится изображение этой комбинации.