Несмотря на весь ажиотаж вокруг Beaver Builder 2.8 и нашего нового модуля Box, вы, возможно, пропустили анонс модуля North Commerce. Это дополнение открывает новые возможности для отображения элементов North Commerce в макетах Beaver Builder, обеспечивая удобство работы как для вас, так и для ваших клиентов.

Модуль North Commerce — это модуль Beaver Builder, который позволяет отображать элементы North Commerce на вашем веб-сайте. Модуль становится доступен в пользовательском интерфейсе Beaver Builder, когда у вас установлен плагин North Commerce.

В этой статье вы узнаете, как использовать модуль North Commerce для улучшения вашего сайта WordPress и обеспечения удобства покупок для ваших клиентов.

Что такое Северная торговля?

Прежде чем углубляться в детали модуля «Северная торговля», важно понять, что такое «Северная торговля» и как она может помочь вашей стратегии электронной коммерции:

North Commerce — это новый универсальный плагин электронной коммерции для WordPress, призванный помочь пользователям создавать высокоэффективные интернет-магазины и воронки продаж.

Он предоставляет ряд функций для создания, управления и оптимизации интернет-магазинов, уделяя особое внимание скорости, простоте использования и настройке.

Ключевые особенности Северной коммерции:

• Пользовательские формы оформления заказа . Улучшите процесс оформления заказа с помощью настраиваемых форм, включающих опции для дополнительных продаж до или после заказа, что повысит ваш потенциал продаж.
• Универсальное решение : North Commerce предоставляет основные функции электронной коммерции, такие как продукты по подписке, планы платежей, расширенные купоны и сбор отзывов, без необходимости использования дополнительных плагинов.
• Оптимизирован для скорости : плагин разработан для скорости, обеспечивая быструю загрузку и удобство работы с пользователем, что имеет решающее значение для удержания клиентов и повышения коэффициентов конверсии.

North Commerce стремится обеспечить удобный и мощный опыт электронной коммерции в WordPress. Он упрощает создание, управление и оптимизацию интернет-магазинов.

Представляем модуль North Commerce для Beaver Builder

Добавление модуля North Commerce позволяет отображать элементы North Commerce непосредственно в макетах Beaver Builder, предлагая более интуитивный способ создания страниц электронной коммерции:

Благодаря этому модулю вам больше не нужно полагаться на шорткоды для отображения продуктов. Просто перетащите модуль North Commerce на свою страницу и настройте его с помощью знакомого интерфейса Beaver Builder.

Преимущества модуля «Северная торговля»:

• Бесшовная интеграция : модуль работает с существующими макетами Beaver Builder, что позволяет легко добавлять на ваш сайт функции электронной коммерции без изучения новых инструментов.
• Расширенный контроль : получите больше контроля над внешним видом и функциональностью страниц электронной коммерции, что позволит сделать покупки более персонализированными.
• Улучшенный рабочий процесс . Ускорьте процесс проектирования с помощью готовых макетов и настраиваемых параметров, которые устраняют необходимость сложного кодирования.

Как использовать модуль Beaver Builder North Commerce

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

Шаг 1. Установите необходимые плагины

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

• Beaver Builder Page Builder : гибкий конструктор страниц для WordPress с возможностью перетаскивания, который позволяет пользователям создавать собственные макеты и дизайны без программирования.
• Плагин North Commerce : универсальный плагин для электронной коммерции WordPress, разработанный, чтобы помочь пользователям создавать высокопроизводительные интернет-магазины с упором на скорость и простоту использования.
• Beaver Themer (необязательно) : конструктор тем для Beaver Builder, который позволяет пользователям создавать собственные верхние и нижние колонтитулы, страницы продуктов и макеты динамического контента для всего своего сайта WordPress.

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

Шаг 2. Добавьте модуль North Commerce на свою страницу

Перейдите на страницу, на которую вы хотите добавить функции электронной коммерции, и щелкните, чтобы открыть редактор Beaver Builder. Затем нажмите значок « + » в правом верхнем углу, чтобы получить доступ к панели модулей.

В строке поиска введите « North Commerce », чтобы быстро найти модуль. Найдя его, просто перетащите модуль North Commerce в нужное место на странице:

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

Шаг 3. Настройте модуль North Commerce

Модуль North Commerce предлагает ряд настроек, которые помогут вам настроить элементы электронной коммерции на вашем сайте в соответствии с вашим брендом и оптимизировать взаимодействие с пользователем.

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

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

Далее мы рассмотрим каждый вариант макета и предоставим рекомендации по их настройке для вашего магазина.

Страница продукта

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

Выберите «Страница продукта» в раскрывающемся списке «Макет», затем введите ярлык продукта , чтобы продемонстрировать конкретный элемент:

Маркировка продукта — это уникальный идентификатор каждого продукта, который обеспечивает отображение правильной информации о продукте.

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

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

Галерея продуктов

Чтобы продемонстрировать несколько продуктов на одной странице, используйте опцию «Галерея продуктов» в модуле North Commerce. Эта функция идеально подходит для создания визуально привлекательных страниц категорий или обзоров продуктов.

Выберите «Галерея продуктов» в поле «Макет» :

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

Макет «Галерея продуктов» привлекает клиентов, отображая несколько продуктов одновременно. Это облегчает им поиск того, что они ищут.

Слайдер продукта

Опция «Слайдер продуктов» позволяет вам продемонстрировать выбор ваших продуктов North Commerce в динамическом интерактивном слайдере. Эта функция идеально подходит для того, чтобы сделать ваши продукты более заметными и привлекательными для посетителей вашего сайта.

Чтобы создать слайдер продукта, выберите «Слайдер продукта» в раскрывающемся меню поля «Макет» :

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

Проверить

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

Чтобы использовать эту функцию, просто выберите «Оформить заказ» в поле «Макет» :

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

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

Корзина

Наконец, модуль North Commerce позволяет отображать содержимое корзины пользователя. Эта функция особенно полезна при создании страниц и воронок продаж, поскольку она позволяет клиентам легко просматривать свой выбор перед оформлением заказа.

Чтобы использовать эту функцию, выберите «Корзина» в поле «Макет» . Вы увидите экран, похожий на пример снимка экрана ниже:

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

Шаг 4. Настройте свой макет

После выбора макета вы можете дополнительно персонализировать внешний вид элементов электронной коммерции.

Во всплывающем окне настроек нажмите вкладку «Стиль» :

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

Стиль кнопки

• Стиль по умолчанию : установка внешнего вида кнопки в обычном состоянии.
• Стиль наведения : настройте внешний вид кнопки при наведении на нее.

Варианты цвета

• Цвет текста : выберите цвет текста кнопки.
• Цвет значка : установите цвет значка кнопки.
• Цвет фона : выберите цвет фона кнопки.

Граница кнопки

• Стиль границы : настройка границы кнопки.
• Граница при наведении : стиль границы кнопки для состояния наведения.

Далее перейдите на вкладку «Дополнительно» :

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

Заключение

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