Shopify Documentation
Настройка Секций
Перейдите к разделу Online Store > Themes.Определитесь с темой, которую хотите изменить.
При клике на кнопку Customize theme откроется страница редактора настроек, с помощью которого вы можете изменять внешний вид и содержимое шаблона.
Перейдите во вкладку Sections.
Это Live editor: вы можете отслеживать изменения внешнего вида вашего магазина без перезагрузки страницы.
Для установленной темы будут доступны следующее настройки:
Blog Articles
Возможности этой секции позволяют отображать заданное количество статей с определенной категории (коллекции) блога на вашем сайте. Статьи блога отображаются с главным изображением статьи, заголовком, частью текста, именем автора, датой публикации и с кнопкой READ MORE.
Более подробно рассмотрим настройки секции Blog Articles:
- Heading — опция позволяет задать заголовок для данной секции;
- Blog — выберите коллекцию (категорию) статьи(статью) которой ходите отобразить на странице вашего сайта;
- Show posts — выберите количество статей для отображения (3/6/9);
- Images size — выберите наиболее подходящий размер главного изображения блога (Small/Medium/Large);
- Images alignment — выберите наиболее подходящее выравнивания для изображений блога (Top/Middle/Bottom);
-
Text position — выберите положения текста: под изображением или с наложением текста поверх изображения (Normal/Overlay);
- Show author — отметьте поле галочкой, чтобы отображать автора статьи;
- Show 'View all' button — отметьте поле галочкой, чтобы отображать кнопку "View all".
- Heading — Featured posts;
- Blog — Blog;
- Show posts — 3;
- Images size — Small (370x208);
- Images alignment — Bottom;
- Text position — Normal;
- Show author — Yes;
- Show 'View all' button — No.
- Heading — Our Blog;
- Blog — Blog;
- Show posts — 3;
- Images size — Medium (370x370);
- Images alignment — Bottom;
- Text position — Overlay;
- Show author — No;
- Show 'View all' button — Yes.
Collection List
Возможности этой секции позволяют отображать заданное количество категорий в сетке с изображением категории, количеством товарных единиц в категории и кнопкой VIEW ALL.
Более подробно рассмотрим настройки секции Collection List:
- Heading — опция позволяет задать заголовок для данной секции;
- Images size — выберите наиболее подходящий размер главного изображения коллекции (Small/Medium/Large);
- Images alignment — выберите наиболее подходящее выравнивания для изображений коллекций (Top/Middle/Bottom);
- Text position — выберите положения текста: под изображением или с наложением текста поверх изображения (Normal/Overlay);
- Show 'View all' button — отметьте поле галочкой, чтобы отображать кнопку View all;
- Collection — выберите коллекцию, которую хотите отображать.
Для того, чтобы добавить коллекцию нажмите кнопку Add collection.
Перейдите в секцию настройки отображения коллекции (Collection).
Выберите коллекцию, которую хотите отображать.
Вы можете отображать 12 коллекций максимум.
Пример:
- Heading — Collections;
- Images size — Small (370x208);
- Images alignment — Top;
- Text position — Normal;
- Show 'View all' button — No.
- Heading — New Collections;
- Images size — Medium (370x370);
- Images alignment — Middle;
- Text position — Overlay;
- Show 'View all' button — Yes.
Gallery
С помощью секции Gallery, добавьте галерею изображений или лукбук на страницу вашего сайта.
Более подробно рассмотрим настройки секции Gallery:
- Section Hight — выберите наиболее подходящею высоту секции галереи (Small/Medium/Large);
Content:
-
Image — выберите изображение для галереи. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений; для лучшего качества изображений рекомендуется загружать изображения шире 2048 пикселей;
-
Images alignment — выберите наиболее подходящее выравнивание для изображений галереи (Top/Middle/Bottom);
-
Link — задайте ссылку для изображения на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога);
- Caption (optional) — введите текст надписи (текст, который будет наложен на изображение).
Для того, чтобы добавить новое изображение для галереи, нажмите кнопку Add image. В галерею вы можете включать 4 изображения максимум.
Перейдите к секции настройки изображения (Image).
Загрузите желаемое изображение с вашего компьютера (для этого, нажмите кнопку Upload image) или же выберите изображение из библиотеки изображений (нажмите "select from the library").
Задайте нужное значение выравнивания изображения (Image alignment: Top, Middle or Bottom).
Определите ссылку изображения на определенную коллекцию (Collection), товар (Product), страницу (Pages), категорию блога (Blogs) или же статью блога (Blog Post).
Введите текст для надписи (Caption); текст, который будет отображаться поверх изображения.
В случае необходимости вы сможете удалить добавленное изображение. Для этого нажмите кнопку Delete.
Пример:
-
Image — 2 images;
- Images alignment
- Picture #1 — Bottom;
- Picture #2 — Bottom;
- Link — no;
- Caption — no.
-
Image — 4 images;
- Images alignment
- Picture #1 — Middle;
- Picture #2 — Middle;
- Picture #3 — Middle;
- Picture #4 — Middle;
- Link
- Picture #1 — Collection;
- Picture #2 — Blog;
- Picture #3 — Pages;
- Picture #4 — Product;
- Caption
- Picture #1 — New Collection;
- Picture #2 — Our Blog;
- Picture #3 — About Us;
- Picture #4 — Super Price.
Image with Text
С помощью этой секции вы сможете добавить блок с изображением и текстом на страницу вашего сайта.
Более подробно рассмотрим настройки секции Image with Text:
-
Image — выберите изображение для данной секции. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений;
-
Layout — выберите наиболее подходящий макет для данной секции: изображение слева (Image on left), изображение справа (Image on Right);
- Images size — выберите наиболее подходящий размер для изображения (Small/Medium/Large);
- Image alignment — выберите наиболее подходящее выравнивание изображения (Top/Middle/Bottom);
- Heading — опция позволяет задать заголовок для данной секции;
- Text — введите текст, который ходите отображать в данной секции;
- Button label — задайте текст кнопки;
-
Button Link — задайте ссылку кнопки на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Пример:
-
Image — no;
- Layout — Image on left;
- Heading — Image with text;
- Text — Pair large text with an image to give focus/.../;
- Button label — disabled;
- Button Link — disabled.
-
Image — Yes;
- Layout — Image on Right;
- Images size — Medium;
- Images alignment — Middle;
- Heading — THE FUTURE OF MOBILITY. TODAY;
- Text — We represent a holistic and /.../;
- Button label — READ MORE;
- Button Link — Blog Post.
Image with Text Overlay
С помощью этой секции вы сможете добавить блок с изображением и текстом поверх изображения на страницу вашего сайта.
Более подробно рассмотрим настройки секции Image with Text Overlay:
-
Image height — выберите наиболее подходящею высоту изображения: меленькое (2048x256), среднее (2048x512), большое(2048x682);
-
Image — выберите изображение для данной секции. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений; для лучшего качества изображений рекомендуется загружать изображения шире 2048 пикселей;
- Images alignment — выберите наиболее подходящее выравнивание изображения (Top/Middle/Bottom);
- Parallax — примените эффект параллакса для изображения. Для этого поставьте галочку напротив опции;
- Heading — опция позволяет задать заголовок для данной секции;
- Text — введите текст, который ходите отображать в данной секции;
- Button label — задайте текст для кнопки;
-
Button Link — задайте ссылку кнопки на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Пример:
-
Image — no;
- Heading — Image with text overlay;
- Text — Pair large text with an image to give focus/.../;
- Button label — disabled;
- Button Link — disabled.
-
Image height — Medium(2048x512);
-
Image — Yes;
- Images alignment — Middle;
- Parallax — enabled;
- Heading — THE FUTURE OF MOBILITY. TODAY;
- Text — We represent a holistic and /.../;
- Button label — READ MORE;
- Button Link — Blog Post.
Instagram Section
Let's review the Instagram section configuration:
- Heading — add the title of the section;
- Instagram user ID — specify the Instagram user ID. You can get user ID here;
- Instagram access token — enter your access token. Find out how to receive Instagram Access Token;
- Number of images — set a number of article to show. Note, the photos will autoupdate automatically. (6/12).
Remember to Save the settings.
To remove the section press the Delete Section button.
Logo List
С помощью этой секции вы сможете добавить секцию с изображением логотипов (Logos) со ссылкой на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Более подробно рассмотрим настройки секции Logo List:
- Heading — опция позволяет задать заголовок для данной секции;
- Images size — выберите наиболее подходящий размер изображений (Small/Medium/Large);
- Images alignment — выберите наиболее подходящее выравнивание изображений (Top/Middle/Bottom);
Content
-
Image — выберите изображение для логотипа. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений;
-
Link — задайте ссылку изображения на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Для того, чтобы добавить новый логотип, нажмите кнопку Add logo.
Перейдите к секции настройки логотипа (Logo).
Загрузите желаемое изображение с вашего компьютера (для этого, нажмите кнопку Upload image) или же выберите изображение из библиотеки изображений (нажмите "select from the library").
Определите ссылку изображения на определенную коллекцию (Collection), товар (Product), страницу (Pages), категорию блога (Blogs) или же статью блога (Blog Post).
В одной секции вы можете отображать только двадцать логотипов одновременно.
Slideshow
С помощью этой секции вы сможете отображать слайдер с кнопками и текстом на слайде на странице вашего сайта.
Более подробно рассмотрим настройки секции Slideshow:
-
Slideshow autoplay — включите или отключите опцию автоматического переключения слайдов;
- Autoplay transition duration — выберите значение задержки в секундах между переключением слайдов (от 5 до 10 сек.);
- Slide image size — выберите наиболее подходящий размер изображения слайда (Small/Medium/Large);
Content
-
Image — выберите изображение для данной секции. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений;
- Images alignment — выберите наиболее подходящее выравнивание изображения слайда (Top/Middle/Bottom);
- Heading — опция позволяет задать заголовок слайда;
- Subheading — введите подзаголовок, который будет отображаться на слайде;
- Button text — задайте текст кнопки;
-
Button Link — задайте ссылку слайда на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Для того, чтобы добавить новый слайд нажмите кнопку Add image slide. В слайдер вы можете добавить 5 слайдов максимум.
Перейдите в секцию настройки отображения слайда (Image slide).
Загрузите желаемое изображение с вашего компьютера (для этого, нажмите кнопку Upload image) или же выберите изображение из библиотеки изображений (нажмите "select from the library").
Задайте нужное значение выравнивания изображения (Image alignment: Top, Middle or Bottom).
Определите ссылку слайда на определенную коллекцию (Collection), товар (Product), страницу (Pages), категорию блога (Blogs) или же статью блога (Blog Post).
Введите текст для надписи (Caption); текст, который будет отображаться поверх изображения.
В случае необходимости вы сможете удалить слайд. Для этого нажмите кнопку Delete.
Featured Product
С помощью этой секции вы сможете добавить секцию "Featured products" на ваш сайт.
Более подробно рассмотрим настройки секции Featured Products:
- Heading — опция позволяет задать заголовок для данной секции;
- Collection — выберите коллекцию, продукты которой хотите отображать в данной секции;
- Show products — задайте колличество продуктов, которое хотите отображать в данной секции;
- Images size — выберите наиболее подходящий размер для изображения продукта (Small/Medium/Large);
-
Images alignment — выберите наиболее подходящее выравнивание для изображений продуктов (Top/Middle/Bottom).
Single Product
С помощью этой секции вы сможете отображать блок с одним товаром на странице вашего сайта.
Более подробно рассмотрим настройки секции Single Products:
- Product — выберите продукт, страницу описания которого ходите отображать в данной секции;
- Image size — выберите наиболее подходящий размер для изображения товара (Small/Medium/Large);
- Images alignment — выберите наиболее подходящее выравнивание изображения товара (Top/Middle/Bottom);
- Show weight — включите или отключите отображения поля с указанием веса товара;
- Show SKU — включите или отключите отображения блока с указанием артикула товара;
- Show barcode — включите или отключите отображения блока с указанием штрихкода товара;
- Show collections — включите или отключите отображения блока с указанием коллекции товара;
- Show product types — включите или отключите отображения блока с указанием типа товара;
- Show vendor — включите или отключите отображения блока с указанием поставщика товара;
- Show tags — включите или отключите отображения блока с указанием меток (тегов) данного товара;
- Show social sharing buttons — включите или отключите отображения кнопок "Поделиться";
- Show description — включите или отключите отображения блока описания товара.
С помощью этой секции вы сможете отображать Google карту на странице своего сайта.
Более подробно рассмотрим настройки секции Google Map:
- Section height — выберите наиболее подходящею высоту секции (Small/Medium/Large);
- Map address — введите адрес, который будет помещен маркером на карте. Сервис Google карты найдет точное местоположение на карте;
-
API key — Google Api Key важен для корректной работы карты. Вы можете получить и активировать свой Google Api Key по ссылке. Если ваш сайт обладает посещаемостью свыше 2,500 посетителей на день, то вам необходимо будет получить оба ключа — JavaScript и Geocoding API;
-
Map style — выберите наиболее подходящий, из предложенных, стиль карты (Default style/ Light/ Dark /Pale Down/ Apple maps/ Midnight);
- Marker color — выберите цвет для маркера. Вы можете выбрать нужный цвет из цветовой палитры;
- Show captions — включите или отключите показ заголовка, адреса и часов работы;
- Heading — опция позволяет задать заголовок для данной секции;
- Text address and hours — введите адрес, название организации и часы работы;
-
Show 'Get directions' button — опция позволяет отображать кнопку Get directions. Нажав на кнопку Get directions любой посетитель вашего сайта сможет получить карту маршрука (от места, которое определит посетитель до места помеченного на карте, как адрес вашей организации).
Testimonials
С помощью этой секции вы сможете отображать секцию с отзывами посетителей о вашем сайте.
Более подробно рассмотрим настройки секции Testimonials:
- Heading — опция позволяет задать заголовок для данной секции;
Content
- Quote Text — введите текст отзыва;
- Quote Author — введите имя автора отзыва.
Для того, чтобы добавить новый отзыв, нажмите отзыв Add quote.
Перейдите в секцию настройки отзыва (Quote).
Добавьте основной текст отзыва и автора отзыва.
В секцию вы можете добавить 9 отзывов максимум.
Text Columns with Images
С помощью этой секции вы сможете добавлять колонки с текстом и изображением на странице вашего сайта.
Более подробно рассмотрим настройки секции Text columns with images:
- Heading — опция позволяет задать заголовок для данной секции;
-
Image size — выберите наиболее подходящий размер для изображения: маленький(370x208), средний(370x370), большой(370x493);
-
Images alignment — выберите наиболее подходящее выравнивание для изображения (Top/Middle/Bottom);
- Text alignment — выберите наиболее подходящее выравнивание для текста (Top/Middle/Bottom);
Content
-
Image — выберите изображение для данной секции. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений;
- Heading — опция позволяет задать заголовок, который будет отображаться под изображением;
- Text — введите текст, который будет отображаться под изображением;
- Button label — задайте текст кнопки;
-
Button Link — задайте ссылку на определенную Collection (коллекцию), Products (товар), Pages (странице), Blogs (категорию блога) или же Blog Post (статью блога).
Для того, чтобы добавить новую колонку, нажмите кнопку Add column.
Перейдите в секцию настройки колонки (Add a title or tagline).
Загрузите желаемое изображение с вашего компьютера (для этого, нажмите кнопку Upload image) или же выберите изображение из библиотеки изображений (нажмите "select from the library").
Задайте заголовок (Heading) и текст (Text), который будет отображаться под изображением.
Задайте текст кнопки и определите ссылку изображения на определенную коллекцию (Collection), товар (Product), страницу (Pages), категорию блога (Blogs) или же статью блога (Blog Post).
В одной секции вы можете отображать 6 колонок одновременно.
Custom Content
С помощью этой секции вы сможете добавить пользовательский контент на ваш сайт.
На страницу вашего сайта вы можете добавить блок с Изображением (Image) или Текстом (Text).
Добавьте блок с Видео (Video) на страницу вашего сайта.
Вы можете отображать блок с определенным продуктом (product).
Добавьте на страницу вашего сайта блок с определенной коллекцией (collection).
Вы также можете добавить блок пользовательского HTML.
Более подробно рассмотрим настройки секции Custom Content:
- Heading — опция позволяет задать заголовок для данной секции;
Image (Изображение)
-
Image — выберите изображение для блока. Загрузите изображение со своего компьютера, либо выберите изображение из библиотеки изображений;
- Container width — выберите наиболее подходящею ширину контейнера для изображения (25/33/50/66/75/100%);
-
Images alignment — выберите наиболее подходящее выравнивание для изображения (Top/Middle/Bottom);
Text (Текст)
- Heading — опция позволяет задать заголовок для данного блока;
-
Text — задайте текст, который хотите отображать в этом блоке. Вы можете выделять текст курсивом (нажмите кнопку "I") или выделять жирным шрифтом (нажмите кнопку "B");
- Text alignment — выберите наиболее подходящее выравнивание для текста блока (Left/Centered/Right);
Video (Видео)
-
YouYube video url — в этом поле, задайте URL того YouTube видео, которое хотите добавить на ваш сайт;
- Container width — выберите наиболее подходящею ширину контейнера для видео (25/33/50/66/75/100%);
Product (Продукт)
- Product — выберите продукт, который хотите отображать в данном блоке;
- Container width — выберите наиболее подходящею ширину контейнера для продукта (25/33/50/66/75/100%);
Collection (Коллекция)
- Collection — выберите коллекцию, которую хотите отображать в данном блоке;
- Container width — выберите наиболее подходящею ширину контейнера для коллекции (25/33/50/66/75/100%);
Custom HTML (Блок с пользовательским HTML)
- HTML — введите пользовательский HTML в это поле;
- Container width — выберите наиболее подходящею ширину контейнера (25/33/50/66/75/100%).
Для того, чтобы добавить новый блок с пользовательским контентом, нажмите кнопку Add content.
Выберите тип контента, который хотите добавить на страницу вашего сайта (Image/ Text/ Video/ Product/ Collection/ Custom HTML).
Перейдите в секцию настройки выбранного контента (Image/Talk about your brand/Video/Product/Collection/Custom HTML), настройте параметры отображения блока.