Для добавления и вывода картинки на страницу товара или дополнительную страницу нужно для начала загрузить картинку на какой нибудь "хостинг картинок" например популярный IMGUR

Нажмите кнопку "Изображение" в текстовом редакторе

Далее вам потребуется взять URL ссылку картинки с хостинга imgur

Далее добавляем URL ссылку картинки в поле "Ссылка", ставим замочек (чтобы параметры картинки применялись равномерно для сохранения ее оригинальных форм), выставляем ширину и высоту картинки (при включенном "замочке" нужно выставить максимальную ширину или высоту (одно из двух) ).

Результат: вставленные картинки в гайде или вот картинка из хостинга imgur


Это еще не всё.
Мы можем выставить дополнительные параметры для картинки.
Например чтобы картинка открывалась в новом окне браузера при редактировании картинки откройте вкладку "ссылка",
там будет поле ввода "Ссылка" и "Цель"
Вставляете ту же самую URL ссылку картинки в поле "Ссылка" и "Цель" выбираете "Новое окно (_blank)"

Пример на скриншоте: (Если нажать на картинку в примере, она откроется на новой странице в браузере)

НО и это еще не всё, если вы не хотите чтобы картинка открывалась в новом окне, а открытии было в рамках страницы магазина, то, вам потребуется открыть "Источник" в текстовом редакторе, найти код нужной картинки (у нее должна быть указана ссылка в примере выше ) и для этой ссылки добавить этот параметр: data-lightbox="roadtrip"

Вот как это должно выглядеть:

<a data-lightbox="roadtrip" href="Ваша ссылка картинки"><img alt="" src="Ваша ссылка картинки" /></a>

• Откройте редактор как "Источник"
• Пропишите теги details и summary

Разберем подробнее:

• Тег details отвечает за создание спойлер блока.
• Тег summary отвечает за название спойлера.
• Атрибут open если хотите чтобы спойрел был открыт сразу.

Пример:

<details open>
<summary>Название спойлера</summary>
 ваша информация для скрытия под спойлер 
</details>

Блоки DIV по дефолту оформлены для каждого шаблона магазина индивидуально, но всё же любой DIV и не только можно оформить по своему используя CSS 

Чтобы создать блок DIV нужно в редакторе нажать эту кнопку.

Далее в открывшем окне включить стиль "Special container"

далее перейдите во вкладку "Дополнительно" вы увидите настройки стиля создаваемого блока DIV

Вы можете менять стили тут, для этого потребуются знания CSS

• Свойство background - отвечает за цвет фона.
• Свойство color - отвечает за цвет текста и ссылок.
• Свойство font-size - отвечает за размер текста и ссылок.
• Свойство border - это граница
• Свойство border-radius - отвечает за закругление углов
• Свойство padding - это отступы внутри блока
• Свойство margin - это отступы снаружи блока

Теперь объясню как правильно прописывать все эти свойства:

Для свойства border нужно прописывать толщину границы на примере "2px" далее указываем цвет границы "#0b343a" и тип границы в данном случае "solid" (сплошной) еще можно пунктиром - "dashed".
Отступы для margin и padding пишутся как общие по кругу, так и можно указывать для каждой стороны в отдельности.
Подробнее:

• Когда указано одно значение, оно применяет одно и то же поле ко всем четырем сторонам.
• Когда заданы два значения, первое поле применяется к верхнему и нижнему элементам, второе - к левому и правому элементам.
• При указании трех значений первое поле применяется к верхнему, второе - к правому и левому краям, третье - к нижнему.
• При указании четырех значений поля применяются к верхнему, правому, нижнему и левому полям в указанном порядке (по часовой стрелке).

Это самые простые решения для стилизации блока DIV