Перейти до основного вмісту

Правила використання перемикача варіантів продукту в EComposer

Вибір кольору продукту через кольорові Radiobutton​

Якщо змінити тип перемикача варіантів продукту на Color Picker, вибір кольору здійснюватиметься через випадаюче меню. У EComposer є extension, який дозволяє змінити цей вигляд на кольорові Radiobutton.

1. Змініть тип перемикача варіантів продукту на Color picker​

2. У полі Option show as swatch впишіть назву варіанту (як правило це Color)​

image

3. Натисніть на посилання here над полем Option show as swatch​

4. Установіть Custom Color Swatches​

5. Перейдіть в Settings та додайте необхідні кольори, якщо вони відсутні в списку​

image

6. Збережіть зміни та опублікуйте темплейт​

Вибір кольору продукту через мініатюри​

1. Змініть тип перемикача варіантів продукту на Image picker​

2. Збережіть зміни та опублікуйте темплейт​

3. Закрийте конструктор EComposer​

4. Перейдіть до Products > [потрібний продукт]​

5. У секції Variants для кожного варіанту додайте відповідне фото​

image

6. Збережіть зміни​

Більш детально про Variants

Зміна фото продукту в слайдері залежно від вибраного варіанту​

Для відображення конкретного фото в залежності від обраного варіанту використовуйте Alt text у фото продукту. Формат: ecomposer-[назва варіанту]-[значення-варіанту]

warning

Якщо Alt text пустий, фото не буде відображатись у слайдері.

Важливі правила для Alt text:​

  • Якщо назва варіанту має пробіл, то між словами ставиться пробіл, наприклад Alt text для назви варіанту second color буде ecomposer-second color-red
  • Якщо значення варіанту має пробіл, то між словами ставиться дефіс, наприклад Alt text для значення варіанту light blue буде ecomposer-color-light-blue
  • Якщо фото відповідає кільком варіантам, або їх комбінації, тоді вони ставляться через кому, наприклад Alt text для продукту, який містить вибір другого кольору та основного кольору буде ecomposer-second color-red, ecomposer-color-light-blue
Приклад

Наприклад, є пляшка з розприскувачем для олії, в якій є 2 варіанти кольору (білий і чорний) та 3 варіанти об'єму (200, 300 та 500 мл). До кожної комбінації цих варіантів є відповідні фото, а також фото які відображаються в усіх комбінаціях.

image

Увімкнення функції групування фото варіантів в слайдері​

1. Перейдіть до темплейту продукту​

2. Виберіть слайдер фото продукту​

3. Перейдіть на вкладку Variant images grouped​

4. Увімкніть перемикач On/Off і в полі Option name впишіть назви варіантів через кому, наприклад: `Color, Capacity`​

image

5. Збережіть та опублікуйте темплейт​

Додавання Alt text до фото варіанту продукту​

1. Перейдіть до Products > [потрібний продукт]​

2. Виберіть необхідне фото продукту (наприклад, фото для чорного кольору та об'єму 200мл)​

3. Додайте в поле Alt text значення ecomposer-color-black, ecomposer-capacity-200-ml​

image

4. Збережіть зміни​

Додавання Alt text до фото, що відображаються у всіх комбінаціях​

Щоб фото відображалося у всіх комбінаціях, додайте всі варіанти у Alt text через кому. Наприклад: ecomposer-color-white, ecomposer-color-black, ecomposer-capacity-200-ml, ecomposer-capacity-300-ml, ecomposer-capacity-500-ml

image

Додавання фото-прев'ю​

Для відображення необхідного фото-прев'ю в каталозі, а не варіантів продукту, розмістіть на початку два фото-прев'ю з порожнім Alt text. Такі фото не будуть відображатися в слайдері на сторінці продукту, але з'являться в каталозі.

image

Якщо не запрацювало
  • Якщо після виконання всіх кроків зміна фото в слайдері залежно від вибраного варіанту не працює, потрібно републікувати темплейт (unpublish > publish).
  • Якщо републікація темплейту не допомогла, змініть тему Shopify на іншу, а потім поверніть необхідну тему.

Більш детально про Ecomposer variant image grouped