Как создать собственную панель объявлений для вашего интернет-магазина

Опубликовано: 2021-08-15
Примечание. Прежде чем вносить какие-либо изменения в код вашего магазина, всегда делайте резервную копию своего сайта.

Я уверен, что вы видели подобные баннеры раньше. Обычно они находятся в верхней части веб-сайтов:

Примеры панели объявлений на веб-сайте

Бьюсь об заклад, вы видите их все время, и не зря. Панель объявлений - это простой, но очень эффективный способ передачи важной, своевременной и / или важной информации вашим клиентам.

Это отличное место для объявлений о таких вещах, как распродажи, ссылки на ваши учетные записи в социальных сетях, рекламные акции по доставке (например, бесплатная доставка), задержки производства, объявления о новых публикациях в блогах и многое другое. Иногда продавцы даже используют их для захвата электронной почты.

Как только вы научитесь создавать свой собственный, вы сможете настроить его так, чтобы делать что угодно. Самое приятное, что вам не нужно устанавливать приложение, чтобы оно было в вашем магазине.

В этом уроке мы собираемся создать эту панель объявлений, используя настраиваемый раздел темы Shopify.

Как сделать панель объявлений Shopify
Однако, прежде чем мы сможем начать, нам нужно наметить все, что нам понадобится.

Давайте составим карту!

Какие функции мы хотим?

Важно уделить минуту тому, чтобы подумать обо всех функциях, которые вам нужны или которые вам нужны. Для целей этого руководства мы собираемся создать следующие редактируемые функции для нашего раздела панели объявлений:

  • Текст (возможность добавлять текст и ссылки с базовым стилем, например полужирным и курсивом)
  • Размер текста
  • Цвет текста
  • Фоновый цвет
  • Цвет границы
  • Размер границы
  • Обивка

Создайте свой файл раздела

Войдите в свою панель управления Shopify и перейдите в Интернет-магазин > Темы .

Учебник по настройке темы Shopify

Реклама

Щелкните раскрывающееся меню « Действия» и щелкните « Изменить код» .

Руководство по настройке панели объявлений Shopify

На панели файлового браузера найдите папку с именем Sections и разверните ее. Щелкните ссылку Добавить новый раздел .

Настройте панель объявлений в Shopify

Назовем нашу новую панель объявлений раздела темы.

Добавление панели объявлений

После создания файла вы увидите следующий предварительно заполненный шаблонный код раздела.

{% schema%}
 {
 «Name»: «Название раздела»,
 "настройки": []
 }
 {% endchema%}

 {% таблица стилей%}
 {% endstylesheet%}

 {% javascript%}
 {% endjavascript%}

Это может показаться запутанным, но к концу этого урока это станет более понятным. Тег схемы - это место, где вы собираетесь хранить всю информацию о вашем новом разделе.

Если вы хотите узнать больше о схеме контента, ознакомьтесь с исчерпывающей документацией Shopify.

Затем мы должны разместить ссылку на этот файл / код там, где мы хотим, чтобы наша панель объявлений отображалась на нашем веб-сайте. Разместим наши в самом верху сайта.

Откройте файл theme.liquid, который можно найти в браузере файлов в папке Layout .

Реклама

Руководство по настройке Shopify Liquid Theme

Найдите открывающий тег <body> и поместите его прямо под ним - вот так:

<body class = «template - {{template | расколоть: '.' | first}} ” >
 {% section 'announcement_bar'%}

Начиная

Затем в вашем файле раздела добавим div с классом объявления . Текст, который вы хотите отображать в панели объявлений, будет заключен в этот div.

<div class = «announcement» > {{section.settings.announcement_text}} </div>

Возможно, странный на вид код, который вы видите внутри div, называется «жидким тегом». Жидкие теги заключены в «фигурные» скобки. Он ссылается на идентификатор под названием announcement_text, о котором мы узнаем через минуту.

Но сначала настройки ввода

Параметры ввода используются продавцом для настройки параметров темы для своего магазина. Продавец получает доступ к настройкам на боковой панели редактора тем ». –Shopify

Настройки ввода потрясающие и мощные, если вы знаете, как их все использовать. К счастью, Shopify дает примеры каждого из них в своей документации, которую можно найти здесь.

Удалите все внутри вашего тега {% schema%} и замените его следующим. Ваш полный код должен выглядеть так:

<div class = «announcement» > {{section.settings.announcement_text}} </div>

{% schema%}
 {
 «Name»: «Панель объявлений»,
 "настройки": [
 {
 «Тип»: «флажок»,
 «Id»: «announcement_visibility»,
 «Label»: «Видимость (Вкл. / Выкл.)»,
 «По умолчанию»: true
 }
 ]
 }
 {% endchema%}

(Мы также удалили таблицу стилей и теги javascript, к сведению)

Реклама

Мы выбрали тип ввода флажка, потому что хотим отображать его в верхней части нашего раздела, чтобы мы могли включать и выключать панель.

Настройка панели объявлений

Теперь, когда у нас настроен флажок, нам нужно обернуть наш контейнер div (тот, который мы сделали несколько минут назад) внутри жидкого тега, основанного на нашей настройке видимости.

Заверните nnouncement DIV в «если» заявление:

{% if section.settings.announcement_visibility%}

<div class = «announcement» > {{section.settings.announcement_text}} </div>
 {% endif%}


 {% schema%}
 {
 «Name»: «Панель объявлений»,
 "настройки": [
 {
 «Тип»: «флажок»,
 «Id»: «announcement_visibility»,
 «Label»: «Видимость (Вкл. / Выкл.)»,
 «По умолчанию»: true
 }
 ]
 }
 {% endchema%}

Новый оператор «if», который мы добавили, проверяет настройки для соответствующего идентификатора announcement_visibility . Мы устанавливаем значение по умолчанию как true , поэтому полоса будет отображаться.

Добавим остальные настройки

Замените код между тегом схемы следующим:

{% schema%}
 {
 «Name»: «Панель объявлений»,
 "настройки": [
 {
 «Тип»: «флажок»,
 «Id»: «announcement_visibility»,
 «Label»: «Видимость (Вкл. / Выкл.)»,
 «По умолчанию»: true
 },
 {
 «Тип»: «форматированный текст»,
 «Id»: «текст_объявления»,
 «Label»: «Текст»,
 « Default »: « <p> По умолчанию <em> richtext </em> <a href= \ «https://example.com/\"> content </a> </p> »
 },
 {
 «Тип»: «диапазон»,
 «Id»: «announcement_text_size»,
 «Мин»: 12,
 «Макс»: 24,
 "шаг 1,
 «Единица измерения»: «пикс»,
 «Label»: «Размер шрифта»,
 «По умолчанию»: 16
 },
 {
 «Тип»: «цвет»,
 «Идентификатор»: «цвет_текста_объявления»,
 «Label»: «Цвет текста»,
 «По умолчанию»: «# 000000»
 },
 {
 «Тип»: «цвет»,
 «Id»: «announcement_bg_color»,
 «Label»: «Цвет фона»,
 «По умолчанию»: «#aaa»
 },
 {
 «Тип»: «диапазон»,
 «Id»: «announcement_border_size»,
 «Мин»: 0,
 «Макс»: 10,
 "шаг 1,
 «Единица измерения»: «пикс»,
 «Label»: «Размер границы»,
 «По умолчанию»: 4
 },
 {
 «Тип»: «цвет»,
 «Идентификатор»: «цвет_объявления_объявления»,
 «Label»: «Цвет границы»,
 «По умолчанию»: «# 333333»
 },
 {
 «Тип»: «диапазон»,
 «Id»: «announcement_padding»,
 «Мин»: 0,
 «Макс»: 20,
 "шаг 1,
 «Единица измерения»: «пикс»,
 «Label»: «Padding»,
 «По умолчанию»: 5
 },
 {
 «Тип»: «выбрать»,
 «Id»: «announcement_text_align»,
 «Label»: «Выравнивание текста»,
 "опции": [
 {«Значение»: «слева», «ярлык»: «слева»},
 {«Значение»: «центр», «ярлык»: «центр»},
 {«Value»: «right», «label»: «right»}
 ],
 «По умолчанию»: «по центру»
 }
 ]

}
 {% endchema%}

Здесь есть что распаковать, но как только вы освоитесь, это легко понять. Пойдем настройки путем настройки.

Реклама

Богатый текст

Richtext предоставляет достаточно форматирования, чтобы быть действительно полезным, как утверждает Shopify: «Вы можете использовать настройки Richtext , чтобы разрешить текстовое содержимое с базовым форматированием. Поддерживаемые параметры форматирования: жирный шрифт, курсив, подчеркивание, ссылки и абзацы ». (Источник)

Ползунки диапазона для размера шрифта, заполнения и размера границы

Я использовал ползунок диапазона для управления размером текста. Он позволяет выбрать минимальный и максимальный размер, а также значение по умолчанию. Я выбрал пиксель , но вы можете использовать их или что угодно. Этот же набор настроек затем повторно используется для управления размером нижней границы панели объявлений, а также отступом.

Цвет текста и фона

Я использовал тип настройки цвета, чтобы настроить цвет фона самой панели объявлений, а также цвет текста.

Раскрывающийся список

Завершая наши настройки, мы использовали выпадающий тип для выравнивания текста.

Предустановки (необязательно)

Если у вас есть предустановки, раздел автоматически отобразится в редакторе темы и станет динамическим разделом. Это означает, что вы сможете перемещать его местоположение (вверх или вниз) на домашней странице, если ваша тема включена для динамических разделов.

CSS

Последнее, что нам нужно сделать, это взять все выбранные нами конфигурации стилей и перевести их в CSS. Сразу после вашего начального оператора видимости «if» добавьте следующий тег стиля :

<стиль>
 .объявление {
 размер шрифта: {{section.settings.announcement_text_size}} пикселей;
 цвет фона: {{section.settings.announcement_bg_color}};
 нижняя граница: {{section.settings.announcement_border_size}} сплошной пиксель {{section.settings.announcement_border_color}};
 отступ: {{section.settings.announcement_padding}} пикселей;
 выравнивание текста: {{section.settings.announcement_text_align}};
 }
 .announcement p {color: {{section.settings.announcement_text_color}};}
 .announcement a {text-decoration: underline;}
 .announcement a: hover {text-decoration: none;}
 </style>

Здесь мы стилизуем элемент оболочки объявления, который мы создали в начале этого пути. Мы используем одни и те же жидкие теги для ссылки на идентификатор каждого типа настройки. Важно помнить, что когда мы ссылаемся на идентификатор в нашей схеме, нам нужно поставить перед ним section.settings .

Окончательные результаты

Настройки панели объявлений Shopify

Настройка панели объявлений Shopify

И вот так вы закодировали свой первый раздел темы. Теперь вы можете легко предупредить своих клиентов о следующей продаже!

Есть много других вещей, которые вы могли бы добавить к этому; условные операторы, на каких типах страниц он отображается (например, только домашняя страница, может быть?).

Реклама

Используя то, что вы узнали в этом руководстве, в сочетании с обширной документацией Shopify, вы можете создать раздел темы, чтобы делать что угодно: список избранных продуктов, избранный набор продуктов и так далее.

Вернитесь и прочтите это еще раз, ознакомьтесь с документацией и приступайте к работе! Вы можете сделать свою тему намного лучше самостоятельно, без участия разработчика.

Смотрите полный код здесь