Создание интерактивной кнопки с призывом к действию для вашей темы Shopify

1. Добавление кнопки призыва к действию на целевой странице
2. 1. Создайте новый раздел
3. 2. Добавьте HTML для кнопки
4. 3. Использование JSON для определения настроек
5. 4. Стилизация вашей кнопки
6. 5: Включая раздел с призывом к действию на целевой странице
7. 6. Делай свое дело!
8. Добавление динамической кнопки призыва к действию на вашей домашней странице
9. 1. Создание пресетов
10. 2. Просмотр раздела
11. 3. Визуализация в редакторе тем
12. Ответственный дизайн

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

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

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

Добавление кнопки призыва к действию на целевой странице

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

1. Создайте новый раздел

Первым шагом здесь является создание нового раздела под названием call-to-action.liquid, который вы позже сможете подключить к альтернативному шаблону страницы. При создании нового раздела в редакторе файлов темы автоматически создается «скаффолд» с тегами схемы, CSS и JavaScript. В теги схемы вы добавляете JSON, который определяет, как редактор тем «читает» наш контент.

HTML-код, который вы добавите в этот раздел, будет помещен над тегами схемы. Если вы используете текстовый редактор, как Атом чтобы создать новый раздел, вам нужно будет вручную добавить этот эшафот. Код для этого ниже:

2. Добавьте HTML для кнопки

В этом случае я хотел бы иметь заголовок над кнопкой призыва к действию, чтобы дать посетителям описание кнопки, а также было бы важно добавить текст внутри самой кнопки. Вы захотите заключить кнопку в контейнер и дать ей класс для стилизации позже. Здесь я назначаю класс кнопки этой кнопке, но вы можете использовать любой класс, который соответствует структуре вашей темы. Для заголовка над кнопкой призыва к действию я назначаю h3, и этот заголовок будет ссылаться на схему под HTML с помощью тега Liquid {{section.settings.text-box}}.

Мы также добавим атрибут href, чтобы указать место назначения ссылки, класс кнопки, который мы будем стилизовать позже, и текстовое поле для добавления текста к самой кнопке. Наконец, мы оборачиваем все это в теги hr, которые добавят горизонтальную линию выше и ниже кнопки для большего определения раздела. После добавления всех этих элементов HTML-код для этой кнопки призыва к действию будет выглядеть следующим образом:

3. Использование JSON для определения настроек

Затем вам нужно добавить JSON в теги схемы, чтобы элементы отображались в редакторе тем, и вы сможете назначать текст и ссылки.

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

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

Вам также может понравиться: Как создать свой первый раздел Shopify Theme ,

4. Стилизация вашей кнопки

Теперь мы можем перейти к захватывающей части - стайлингу! В файле page.landing.liquid я назначил класс кнопки кнопке призыва к действию, поэтому при добавлении CSS в таблицу стилей я буду использовать .button в качестве селектора. В основной таблице стилей вы можете назначить различные свойства и значения классу кнопки и настроить кнопку так, чтобы она выглядела именно так, как вам бы хотелось.

Такие свойства, как padding, font-size и border-radius, особенно важны, чтобы придать символ вашей кнопке, в то время как тщательно выбранный цвет поможет кнопке выделиться среди других элементов на странице. Вы также можете поэкспериментировать со свойствами, такими как курсор, чтобы изменить поведение мыши при взаимодействии с кнопкой.

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

Это выведет на кнопку, которая выглядит следующим образом:

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

Прежде всего, я хотел бы показать реакцию, когда посетитель наводит курсор на мою кнопку, показывая более светлый цвет. Я бы использовал селектор .button-click с псевдоклассом hover, чтобы назначить определенный цвет, когда курсор находится на кнопке, поэтому стиль будет выглядеть так:

Теперь вы увидите такой эффект:

Существует ряд других CSS-эффектов при наведении, которые вы можете использовать на нажимаемых кнопках призыва к действию, например, прозрачность, которая сделает кнопку немного прозрачной, когда клиент наводит курсор на кнопку.

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

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

В этом случае я бы добавил transform: translateY (0.25em); при нажатии кнопки кнопка будет выпадать вертикально на 0.25em. Использование translateY более производительно, чем перемещение с позиционированием в CSS, и вы можете узнать больше об этом процессе от Пола Айриша. Я также собираюсь уменьшить прямоугольник-тень вдвое и вернуть цвет кнопки более темному оттенку.

Теперь, когда вы наведите курсор мыши и нажмите на кнопку, вы увидите такой эффект:

5: Включая раздел с призывом к действию на целевой странице

Последний шаг - добавить раздел с призывом к действию в шаблон целевой страницы, чтобы он отображался в редакторе тем, и вы могли назначать текст и ссылки. Все, что вам нужно сделать, это вернуться к созданному вами альтернативному шаблону страницы и добавить код, чтобы включить раздел call-to-action.liquid на этой странице.

Мне бы хотелось, чтобы кнопка призыва к действию появлялась внизу целевой страницы, поэтому в моем page.landing.liquid я добавлю {% section 'призыв к действию'%}. Полный шаблон page.landing.liquid будет выглядеть так:

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

Теперь, когда вы зайдете в свой редактор тем и перейдете на целевую страницу, вы увидите это:

6. Делай свое дело!

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

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

Добавление динамической кнопки призыва к действию на вашей домашней странице

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

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

1. Создание пресетов

Основным структурным отличием статического сечения от динамического сечения является добавление «предустановок» в параметры схемы динамического сечения. Если эти предустановки включены, тема автоматически распознает, что этот раздел является динамическим разделом, который можно добавить на домашнюю страницу.

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

Например, если вы хотите придать динамические свойства ранее созданному разделу призыва к действию, вы можете добавить приведенный ниже код в теги схемы после существующих настроек:

2. Просмотр раздела

После того, как вы добавили пресеты в схему существующего раздела призыва к действию, полный файл Liquid будет выглядеть следующим образом:

В этом случае я доволен стилем кнопки, поэтому я могу сохранить CSS таким же. Но если вы хотите установить новые классы или идентификаторы для этой конкретной кнопки, вы можете сделать это и добавить новый стиль в таблицу стилей.

3. Визуализация в редакторе тем

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

Вы можете назначить URL и текст, но самое главное, вы можете изменить расположение раздела на странице.

Ответственный дизайн

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

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

Вы экспериментировали с различными стилями для разработки интерактивных и функциональных кнопок? Мы хотели бы услышать о вашем опыте в комментариях ниже.

Похожие

Комментарии