В принципе работать с ними достаточно просто.
Открываете любую страницу, например категорию. И наполняете ее контентом путем добавления виджетов.
![](https://telegra.ph/file/11530beddb387dd25d418.png)
Выбираете виджет, добавляете на страницу.
Виджеты сразу адаптированы по мобильную версию. Можно посмотреть, как они выглядит и на пк и на мобилке.
![](https://telegra.ph/file/9640cbc1476644567afdd.png)
Думаю с этим все понятно.
Но бывают ситуации, когда нужно на пк версии отобразить одно размещение контента, а на моб. версии другое.
Например есть страница каталога и в ней под меню выводятся статьи.
![](https://telegra.ph/file/e76be8f9facb6c1942834.png)
В мобильной версии это будет выглядеть так
![](https://telegra.ph/file/1d6c5c5b193f39b9d6c31.png)
Сначала будет идти блок со статьями, а потом уже каталог с категориями.
Это не правильно т.к. нужно посетителю показать сначала каталог, а потом уже статьи.
Поэтому переходим в настройки виджета Статьи в сайтбаре.
Включаем Расширенный режим настроек.
Переходим в Виджет, и в самом низу включаем переключатель Скрыть на телефоне.
![](https://telegra.ph/file/f1948d29c025539dcb409.png)
Далее добавляем виджет Превью статей из блога в один ряд в категорию, в самый низ страницы.
![](https://telegra.ph/file/7b32f4ef734ae2d76c725.png)
Переходим в настройки виджета и включаем переключатель Скрыть на десктопе.
![](https://telegra.ph/file/ff6cbfa7376f6214f05c8.png)
Все.
Теперь на пк версии блок со статьями выводит слева в сайт баре. А в мобильной версии он теперь не сверху категорий, а под ними.
![](https://telegra.ph/file/bf17c4659b699f22950d3.png)
Скрывая виджет на пк версии и выводя его в другом месте в мобильной версии сайта, вы можете тонко настраивать дизайн своего магазина.