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

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

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

Добавление кода для вставки в WordPress

Вы можете добавлять код для вставки в записи, на страницы или в шаблоны на вашем сайте WordPress.

Добавление кода для вставки в запись или на страницу WordPress

1. В Shopify создайте кнопку «Купить» и скопируйте её код для вставки из диалогового окна «Код для вставки» (или нажмите «Скопировать код для вставки в буфер обмена»).
2. В панели управления WordPress перейдите к своим записям или страницам.
3. Создайте новую запись или страницу либо отредактируйте существующую.
4. В редакторе блоков нажмите кнопку +, найдите Произвольный HTML и нажмите, чтобы вставить блок «Произвольный HTML».
5. Вставьте код для вставки в текстовое поле, предоставленное блоком «Произвольный HTML».
6. Необязательно: переместите блок «Произвольный HTML» или просмотрите, как будет отображаться ваша кнопка «Купить»:
   • Чтобы переместить блок «Произвольный HTML», нажмите кнопки со стрелками на панели инструментов блока или перетащите блок в новое место.
   • Чтобы просмотреть кнопку «Купить», нажмите «Просмотр» на панели инструментов блока.
7. Когда закончите, нажмите кнопку «Сохранить черновик», «Просмотр» или «Опубликовать» для вашей записи или страницы.

Если вы используете плагин классического редактора WordPress, то вместо блока «Произвольный HTML» переключите текстовый редактор из режима «Визуально» в режим «Текст» и вставьте код для вставки в редактор.

Добавление кода для вставки в шаблон WordPress

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

Действия:

1. В Shopify создайте кнопку «Купить» и скопируйте её код для вставки из диалогового окна «Код для вставки» (или нажмите «Скопировать код для вставки в буфер обмена»).
2. В панели управления WordPress перейдите в «Редактор».
3. Перейдите к шаблону, который хотите отредактировать.
4. В редакторе блоков нажмите кнопку +, найдите Произвольный HTML и нажмите, чтобы вставить блок «Произвольный HTML».
5. Вставьте код для вставки в текстовое поле, предоставленное блоком «Произвольный HTML».
6. Необязательно: переместите блок «Произвольный HTML» или просмотрите, как будет отображаться ваша кнопка «Купить»:
   • Чтобы переместить блок «Произвольный HTML», нажмите кнопки со стрелками на панели инструментов блока или перетащите блок в новое место.
   • Чтобы просмотреть кнопку «Купить», нажмите «Просмотр» на панели инструментов блока.
7. Когда закончите, нажмите кнопку «Просмотр» или «Сохранить» для шаблона.

Добавление кода для вставки в блог Shopify

Действия:

Добавление кода для вставки в Squarespace

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

Действия:

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

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

Добавление кода для вставки в Wix

После создания кнопки «Купить» или коллекции в панели администратора Shopify вы сможете добавить её на свой веб-сайт Wix с помощью редактора сайтов Wix.

Если вы хотите разместить на своем веб-сайте Wix несколько товаров без редактирования кода для вставки, вы можете встроить коллекцию. В панели администратора Shopify можно создать новую коллекцию из товаров, которые вы хотите разместить на Wix.

Действия:

1. В панели администратора Shopify создайте кнопку «Купить» для товара или коллекции, а затем скопируйте её код для вставки.

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

Встраивание нескольких товаров или коллекций

Действия:

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

Раздельное добавление тегов скрипта

Некоторые платформы (например, Unbounce) требуют, чтобы теги <script> из кода для вставки были размещены в шапке страницы, а остальная часть кода — на той странице, где должна отображаться кнопка «Купить».

Действия:

1. Из кода для вставки, сгенерированного при создании кнопки «Купить», скопируйте и элемент <div>, и элемент <script>. Например:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. Откройте шапку страницы веб-сайта, на который вы хотите встроить кнопку «Купить».
3. Вставьте весь элемент <script> в шапку страницы.
4. Сохраните изменения.
5. Из исходного кода для вставки в панели администратора Shopify скопируйте только элемент <div>. Например:

<div id='product-component-2dd3c8704e6'></div>

6. Откройте страницу на своем веб-сайте, на которую вы хотите встроить кнопку «Купить».
7. Вставьте фрагмент кода <div> на страницу.
8. Сохраните изменения.