Кнопка «Купить» на Shopify: как добавить на любой сайт

С помощью Кнопки Shopify «Купить» вы можете полностью интегрировать инструменты электронной коммерции Shopify с любым веб-сайтом, независимо от того, построен ли он на WordPress, Squarespace, Wix или любом другом. конструктор веб-сайтов.

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

Но настройка интернет-магазина требует времени, а перенаправление веб-трафика усложняет процесс оформления заказа, что может негативно повлиять на ваши продажи. Кнопка «Купить» на Shopify — ваше решение!

1. Добавьте канал продаж кнопки «Купить» в свой магазин Shopify

Для начала войдите в свой магазин Shopify. Если вы видите кнопку «Купить» в разделе Каналы продаж в меню слева, значит, канал продаж уже добавлен, и вы можете перейти к шагу 2.

На компьютере

1. Перейти к продаже кнопки «Купить» страница канала в Shopify App Store (вы также можете перейти на эту страницу, перейдя в Настройки > Посетите Shopify App Store и выполнив поиск Кнопка «Купить»?).
2. Нажмите Добавить приложение, а затем Добавить канал продаж на следующем экране.

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

Если вы этого не сделали закрепите кнопку «Купить», и вы сможете найти ее снова, нажав Каналы продаж, а затем Кнопку «Купить» под установленными каналами.

На мобильных устройствах

1. Откройте приложение Shopify на своем мобильном устройстве и выберите Магазин в нижнем меню.
2. Рядом с Каналы продаж, выберите Добавить канал (на iPhone) или + (на Android).
3. Выберите Кнопка «Купить». Strong> в списке вариантов, затем нажмите Добавить кнопку «Купить».

2. Создайте кнопку «Купить»

После того как вы добавили канал продаж кнопки «Купить», вы готовы приступить к созданию кнопки «Купить». Перейдите на страницу кнопки «Купить», нажав Кнопка «Купить» (если вы закрепили ее в панели навигации) или перейдя в раздел Настройки > Приложения и каналы продаж > Кнопка «Купить».

Оттуда нажмите Создать кнопку «Купить».

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

Убедитесь, что флажок установлен, и нажмите Выбрать.

После того как вы сделаете свой выбор, вы попадете в редактор кнопки «Купить», где сможете настроить внешний вид кнопки «Купить».

Как настроить кнопку «Купить»

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

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

Вот список параметров, которые вы можете настроить:

• Вариант продукта: выберите, какие варианты продукта вы хотите приобрести с помощью кнопки «Купить». По умолчанию будут выбраны все варианты.
• Макет: выберите «Базовый», «Классический» и «Полный». Справа вы увидите предварительный просмотр каждого макета, выбрав его в раскрывающемся списке «Макет».
• Действие при нажатии: выберите «Добавить товар в корзину». », «Прямо к оформлению заказа» или «Открыть сведения о продукте». Опция «Добавить товар в корзину» создаст виджет корзины в правой части экрана. Опция «Прямо к оформлению заказа» создаст кнопку «Купить сейчас», которая приведет пользователя непосредственно к оформлению заказа (обратите внимание, что с помощью этой опции клиенты не смогут добавить в свою корзину более одного товара). Параметр «Открыть сведения о продукте» создаст кнопку «Просмотреть продукт», которая открывает всплывающее окно с информацией о продукте и кнопкой «Добавить в корзину».
• Стиль кнопки: здесь вы можете настройте цвета, шрифт, размер и форму углов кнопки «Купить».
• Макет. Меню «Макет» позволит вам более точно настроить макет кнопки.. Вы можете настроить цвета шрифта, текст кнопок и настройки оформления.
• Корзина: здесь вы сможете настроить параметры виджета корзины покупок, включая текст. и цвета. Обратите внимание, что эта опция будет неактивна, если вы используете макет «Прямо к оформлению заказа», поскольку виджет корзины отсутствует.
• Всплывающее окно с подробной информацией: если вы выберете «Открыть» сведения о продукте» в разделе «Действие при нажатии», в этом разделе вы сможете настроить текст, цвета и типографику всплывающего окна.
• Дополнительные настройки: Здесь вы можете настроить способ оформления заказа для вашего пользователя. Вы можете выбрать «Открыть всплывающее окно» (при этом будет создано всплывающее окно оформления заказа, которое закроется после завершения заказа) или «Перенаправить на ту же вкладку» (при этом пользователь будет отправлен на вашу страницу оформления заказа Shopify изнутри). в окне браузера и верните их на свою страницу после завершения транзакции).

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

Когда вы будете довольны своим дизайном, нажмите кнопку «Далее» в правом верхнем углу.

3. Добавьте код для встраивания кнопки «Купить» на свой HTML-сайт.

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

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

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

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

Добавьте код для встраивания в целевая страница или сообщение в блоге вашего магазина Shopify

В вашем магазине Shopify уже будут страницы товаров и встроенная корзина, но иногда могут возникнуть ситуации, когда вы захотите добавить кнопку «Купить» непосредственно на страницу. или сообщение в блоге для дополнительного удобства.

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

В подобных случаях вам следует выполнить следующие действия:

1. От вашего администратора Shopify перейдите в Интернет-магазин > Сообщения в блоге или Интернет-магазин > Страницы, в зависимости от того, добавляете ли вы их в сообщение блога или на страницу.
2. Выберите сообщение блога или страницу, на которую вы хотите добавить кнопку «Купить».
3. В окне Содержимое нажмите кнопку <>, чтобы переключиться с режима редактирования на режим HTML.

1. Вставьте скопированный ранее код внедрения в редактор HTML, где бы вы хотели, чтобы он отображался. Нажмите «Сохранить».

После того как вы сохраните свою страницу или сообщение в блоге, на страницу будет добавлена кнопка «Купить». Если вы хотите увидеть, как он выглядит, не публикуя его, выберите Предварительный просмотр (или Просмотреть страницу, если вы добавляете его на страницу) в правом верхнем углу страницы. редактор.

Добавить кнопку покупки на веб-сайт Squarespace

На Squarespace вы сможете добавить кнопку «Купить» в отдельные публикации или в меню на своей домашней странице. Чтобы добавить кнопку «Купить» на свой сайт Squarespace:

1. Войдите в свою панель управления Squarespace и откройте страницу, на которую вы хотите добавить кнопку «Купить».
2. Наведите курсор на значок Область Содержимое страницы элемента страницы, где должна появиться кнопка «Купить», и нажмите Изменить.
3. Выберите точку вставки, куда вы хотите добавить встроить код.
4. В меню Блоки контента в разделе Дополнительно выберите Код.
5. Убедитесь, что в раскрывающемся меню в правом верхнем углу выбран HTML, а затем вставьте код для внедрения кнопки «Купить» в поле Код.
6. Нажмите Применить.

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

Добавьте кнопку «Купить» в блог WordPress

Чтобы добавить кнопку «Купить» в сообщение на своем сайте WordPress.org:

1. На панели инструментов WordPress перейдите к своим сообщениям и выберите ту, к которой вы хотите добавить кнопку «Купить»..
2. В зависимости от используемой вами версии редактора WordPress выполните один из следующих шагов:
   • Если вы используете классический редактор для своего сайта WordPress, нажмите вкладку Текст в редакторе, чтобы переключиться с визуального представления на текстовый.
   • Если вы используете редактор блоков для своего сайта WordPress, нажмите +, затем выполните поиск и выберите Пользовательский HTML.
3. Вставьте код для встраивания кнопки «Купить» в то место, где вы хотите, чтобы он отображался..
4. Нажмите Сохранить черновик, Предварительный просмотр или Опубликовать в зависимости от того, какое действие вы хотите выполнить.&nbsp ;

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

1. На панели инструментов WordPress нажмите Внешний вид.
2. Выберите Настроить, чтобы открыть редактор тем, затем выберите Виджеты.
3. Выберите область, в которой вы хотите добавить кнопку «Купить».
4. Нажмите Добавить виджет, затем Текст?.
5. Вставьте кнопку «Купить». Код для внедрения кнопки.
6. Нажмите Сохранить & Опубликовать.

Обратите внимание, что кнопки покупки Shopify совместимы с платформой WordPress.org, но не с WordPress.com из-за ограничений настройки HTML.

Добавьте кнопку «Купить» на Wix

Чтобы добавить кнопку «Купить» Shopify на свой сайт Wix, выполните следующие действия:

1. 1. С вашего Wix панели управления, выберите сайт на странице Мои сайты, на который вы хотите добавить кнопку «Купить», а затем выберите Изменить сайт.
   2. В в редакторе веб-сайта Wix, нажмите +, затем Еще. Выберите HTML-код. На вашу страницу будет добавлен виджет HTML-кода.
   3. Нажмите Ввести код. Во всплывающем окне Настройки HTML вставьте код для внедрения кнопки «Купить» в поле Добавить код сюда.
   4. Нажмите Применить.>.
   5. Настройте размер виджета HTML-кода по своему вкусу. Не забудьте убедиться, что вкладка «Корзина» видна, если вы встроили кнопку «Купить» в корзину.
   6. Завершив настройку, нажмите Сохранить.

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

Добавление скриптовых тегов кнопки «Купить» на Shopify

В некоторых случаях Разработчики веб-сайтов (такие как Unbounce) потребуют, чтобы вы вставляли теги <script> отдельно в заголовок, а остальную часть кода вставляли в тело вашей страницы, где бы вы ни хотели купить. Появится кнопка.

Чтобы это сделать, вам нужно отделить элемент <script> от элемента <div> в коде внедрения кнопки «Купить». Вы увидите элемент <div> в верхней части кода. Выглядит это примерно так:

<div id="product-comComponent-1655929612938"></div>

Скрипт элемент (который намного длиннее) составляет остальную часть кода внедрения, начиная с <script type="text/javascript"> и заканчивая </script>.

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

1. Откройте заголовок страницы веб-сайта, на который вы хотите встроить кнопку «Купить».
2. Скопируйте и вставьте элемент <script> целиком в заголовок страницы вашего веб-сайта.
3. Сохраните изменения.
4. Сохраните изменения.
5. Теперь откройте редактор страниц для страницы, на которую вы хотите добавить кнопку покупки Shopify.
6. Скопируйте и вставьте элемент <div> на страницу, где бы вы ни находились. хотите, чтобы ваша кнопка «Купить» отображалась.
7. Сохраните изменения.

Добавьте электронную торговлю на любой веб-сайт с помощью кнопки «Купить» на Shopify

Справка по кнопкам «Купить на Shopify» продавцы встречают клиентов там, где они находятся – независимо от страницы или платформы. Удобство продажи напрямую покупателям без необходимости пересылать их на другую страницу снижает трения и помогает повысить продажи.

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

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

Благодаря настраиваемым стилям, цветам и функциям кнопки покупки Shopify позволяют вы превращаете любую страницу или веб-сайт в полноценный интернет-магазин.