В папке /sites/default/files/js при галочке Объединить файлы JavaScript на /admin/config/development/performance создаётся и хранится кэш JavaScript. На сайте используются веб-формы, которые выводятся в модальном окне. Вот они и приводят к созданию кэша js. И почему-то этот кэш не очищается при нажатии на кнопку Очистить кэш /admin/config/development/performance , так же как и кэш CSS.

Получается, перед созданием бэкапа придется вручную удалять все файлы в папках:
../sites/default/files/css
../sites/default/files/js

Решение с переносом изображений тоже оказывается простое. Задал полю Image в Управлении отображением класс flexwraprow

Решение с отступами оказалось простым. В custom.css добавил вложенный класс

Скопировал сюда https://slexy.org/view/s21Vaj0CaJ часть кода со страницы, чтобы было легче понять.

Еще вопрос. Картинки не переносятся на новую строку при достижении определенного размера по ширине. Для изображений выбран стиль адаптивного изображения.

Решение получше - создать отдельное поле для миниатюр (вывести его через twig переменной {{ product.variation_field_images }}) и задать ему стиль
.field--name-field-images {
display: flex;
flex-wrap: wrap;
}
В Управлении отображением для полей Изображение и Изображения вырбать формат Colorbox.

В файле field--commerce-product-variation--field-image--default.html.twig всем <div> добавил style="float: left;"
Теперь миниатюры изображений варианта товара отображаются в строку, что и требовалось. Интеграция с PhotoSwipe (аналог Colorbox-a) работает, изображения вариантов меняются при смене вариантов товара.
Задача решена.

Установил модуль Flex Slider. Во вкладке "Управление отображением" (Типы вариаций товаров) для поля Image выбрал формат FlexSlider Option set: Default Стиль изображения: Большой (480×480). Теперь при смене вариантов товара картинка не меняется. Модуль не подходит.

К тому же Flex Slider не интегрируется с лайтбокс-плагинами, миниатюры также почему-то вывести не получилось, хотя соответствующие option set я тестировал.

isuvar wrote:

<div class="owl-carousel manual" id="productGalleryThumbs">

В шаблоне Porto упоминается слайдер Owl Carousel. Но https://www.drupal.org/project/owlcarousel среди установленных модулей на демосайте Porto нет.

Видимо имеется в виду это
http://flexslider.woothemes.com/thumbnail-slider.html
http://flexslider.woothemes.com/asnavfor-rtl.html
Если изображения еще будут выводиться и через лайтбокс-плагины, то будет то, что нужно.
Осталось разобраться как для переменной {{ item.content }} это прописать в шаблоне или на вкладке "Управление отображением", чтобы ее значения выводились в слайдере.

Создатели темы SShop видимо не стали заморачиваться вариантами товара и отображением нескольких изображений для одного товара. По крайней мере на их демосайте я этого не нашел https://sshop.optasy.com/product/aenean-ut-eros-et-nisl
Вот их commerce-product.html.twig https://slexy.org/view/s21r45YBcf

Если бы проблема решалась только через CSS, то это было бы супер . К сожалению первый {{ item.content }} должен выводиться по центру и иметь стиль Большой (480×480) , а все последующие {{ item.content }} должны выводиться под ним в строчку и иметь стиль Миниатюра (100×100). CSS здесь как поможет? Эту логику придется реализовывать с помощью twig через цикл. Других вариантов пока не вижу.

Здесь написано:

Букв много написал, что вопрос не сразу найдут. Поэтому продублирую вопрос:
Как сделать, чтобы миниатюры изображений варианта товара выводились не столбиком, а в строчку?
И если будет готовое решение - буду признателен. Эта проблема уже много раз многими решалась, т.к. магазинов на Drupal 8 уже много, вот только в Интернете подходящего решения не нашёл.

Это демо темы Porto https://www.refaktor.org/drupal/porto7/shop6/pink-dress
Продублирую код из файла commerce-product--default.html.twig темы Porto здесь. Модераторы если захотят могут удалить аналогичный код в сообщении выше
https://slexy.org/view/s2FkKTz41W

Кстати, темы демо-сайтов Urban Hipster, Porto, Belgrade сделаны на Bootstrap.

Вот мой код для файла commerce-product--full.html.twig

Здесь https://commerce.acromedia.com/product/adventure-begins-camping-mug в файле commerce-product.html.twig использовали такой код https://slexy.org/view/s2MGMN5RRE

а здесь https://demo.commercekickstart.com/product/black-headphones в файле commerce-product--full.html.twig такой код https://slexy.org/view/s2SjzD1vPh

Есть страница товара, на которой выведен один из ее вариантов с тремя изображениями.
Требуется изменить стиль первого и следующих изображений. У первого должен быть стиль Большой (480×480) , а у последующих Миниатюра (100×100). Затем надо будет подключить лайтбокс-плагин типа Colorbox. У всех найденных плагинов изображения также выводятся в столбик.

Информация по выводу полей в заданной структуре есть на сайте Назарова Дмитрия.

isuvar wrote:

twig-файл (шаблон) это всего лишь более продвинутый аналог вкладки Manage display

Видимо лучше сказать, что Manage display (включая функционал модулей типа DS и др., расширяющих возможности редактирования макета во вкладке Manage display) - это Drag-and-drop редактор, являющийся надстройкой над twig-файлом.

John Jennings в лекции Theming with Twig in Drupal 8 , если судить по слайдам (английский на слух не понимаю), видимо также говорит о Twig и Manage display.

Действительно, если создать дисплей Teaser и вывести через вьюс тизеры товаров на отдельную страницу, то в коде страницы вновь предлагается 6 вариантов и при этом используется commerce-product.html.twig , потому что именно для тизеров отдельного шаблона типа commerce-product--teaser.html.twig я не размещал в каталоге /themes/custom/bartik_commerce/templates/commerce, а в каталоге модуля
Commerce Product /modules/contrib/commerce/modules/product/templates шаблона с таким названием нет.

Кто знает объясните плиз почему mglaman для названия файла использовал вариант commerce-product--full.html.twig ?

В коде страницы предложено 6 вариантов названий. Почему он не воспользовался именем commerce-product.html.twig ? На что влияет выбор того или иного варианта?

isuvar wrote:

Выложил кастомную тему bartik_commerce

Заменил на исправленный вариант bartik_commerce-8.x , с подключённым drupal.ajax

На themeforest.net смотрел темы под Commerce 2.x и не нашел, которые бы поддерживали отображение картинок вариантов товара. В частности именно такой темой является Porto . В этой теме картинка добавляется только ко всему товару. Отдельных картинок к вариантам товара добавить уже не получится. Можно, конечно, добавить свое поле Image в Product variation types , но это не имеет смысла, т.к. все равно картинка не будет отображаться на карточке товара, поскольку в twig-файлах это не предусмотрено.

Вот код для небутстраповских тем типа bartik