Помощ
Влизане

Добавяне на код за бутон „Купуване“ в HTML

След като създадете бутон „Купуване“ във Вашия администраторски панел на Shopify, Вие сте готови да го добавите към собствения си уебсайт или блог.

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

На тази страница

Добавяне на код за вграждане в WordPress

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

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

  1. В Shopify създайте бутон „Купуване“ и копирайте неговия код за вграждане от диалоговия прозорец Код за вграждане (или щракнете върху Копиране на код за вграждане в клипборда).
  2. От Вашето табло за управление на WordPress отидете на Вашите публикации или страници.
  3. Създайте нова публикация или страница или редактирайте съществуваща такава.
  4. В блоковия редактор щракнете върху бутона +, потърсете Custom HTML и след това щракнете, за да вмъкнете блок за персонализиран HTML.
  5. Поставете кода за вграждане в текстовото поле, предоставено от блока за персонализиран HTML.
  6. Опционално: Преместете блока за персонализиран HTML или прегледайте как ще се показва Вашият бутон „Купуване“:
    • За да преместите блока за персонализиран HTML, щракнете върху бутоните със стрелки в лентата с инструменти на блока или го плъзнете на ново място.
    • За да прегледате бутона „Купуване“, щракнете върху Визуализация в лентата с инструменти на блока.
  7. Когато сте готови, щракнете върху бутона Запазване на чернова, Визуализация или Публикуване за Вашата публикация или страница.

Ако използвате плъгина Classic Editor на WordPress, тогава вместо да използвате блок за персонализиран HTML, променете текстовия редактор от режим Визуален на режим Текстов и поставете кода за вграждане в редактора.

Добавяне на код за вграждане към шаблон на WordPress

Ако Вашата тема на WordPress поддържа редактора на сайта, тогава можете да добавите вграден бутон „Купуване“ към всеки от шаблоните на Вашия сайт.

Стъпки:

  1. В Shopify създайте бутон „Купуване“ и копирайте неговия код за вграждане от диалоговия прозорец Код за вграждане (или щракнете върху Копиране на код за вграждане в клипборда).
  2. Във Вашето табло за управление на WordPress отидете на Редактор.
  3. Придвижете се до шаблона, който искате да редактирате.
  4. В блоковия редактор щракнете върху бутона +, потърсете Custom HTML и след това щракнете, за да вмъкнете блок за персонализиран HTML.
  5. Поставете кода за вграждане в текстовото поле, предоставено от блока за персонализиран HTML.
  6. Опционално: Преместете блока за персонализиран HTML или прегледайте как ще се показва Вашият бутон „Купуване“:
    • За да преместите блока за персонализиран HTML, щракнете върху бутоните със стрелки в лентата с инструменти на блока или го плъзнете на ново място.
    • За да прегледате бутона „Купуване“, щракнете върху Визуализация в лентата с инструменти на блока.
  7. Когато сте готови, щракнете върху бутона Визуализация или Запазване за шаблона.

Добавяне на код за вграждане във Вашия блог на Shopify

Бележка:

Стъпки:

Настолен компютър

  1. От Вашия администраторски панел на Shopify отидете на Съдържание > Публикации в блога.

  2. От страницата Публикации в блога щракнете върху заглавието на публикация в блога, която искате да редактирате, или щракнете върху Добавяне на публикация в блога, за да създадете нова.

  3. В секцията Напишете Вашата публикация в блога щракнете върху Показване на HTML в текстовия редактор с възможности за форматиране.

  4. Поставете Вашия код за вграждане в основното текстово поле.

  5. Щракнете върху Запазване.

Мобилно устройство

  1. От приложението Shopify докоснете иконата Меню.

  2. В менюто Съдържание докоснете иконата стрелка надолу, след което докоснете Публикации в блога.

  3. Докоснете публикацията в блога, която искате да редактирате.

  4. В секцията Съдържание докоснете …, след което докоснете иконата Редактиране на код.

  5. Поставете Вашия код за вграждане в текстовото поле.

  6. Докоснете Запазване или ✓.

Добавяне на код за вграждане в 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 създайте бутон „Купуване“ за продукт или колекция и след това копирайте неговия код за вграждане.
  1. От своя акаунт в Wix намерете сайта, който искате да редактирате, в секция „Моите сайтове“ и след това натиснете „Редактиране на сайт“.
  2. В инструмента за редактиране на уебсайтове на Wix натиснете бутона + и след това натиснете „Още“.
  3. Натиснете „HTML код“, за да добавите уиджет за HTML код към страницата.
  4. Натиснете „Въведете код“.
  5. В диалоговия прозорец „HTML настройки“ поставете кода за вграждане за своя бутон „Купуване“ или колекция в полето „Добавете кода си тук“ и след това натиснете „Актуализиране“.
  6. Преоразмерете уиджета за HTML код, за да пасне на съдържанието му. Ако създавате вграждане с количка, уверете се, че разделът на количката се показва на правилното място.
  7. Когато сте готови, натиснете „Запази“.

Вграждане на множество продукти или колекции

Стъпки:

  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>
  1. Отворете заглавката на страницата за уебсайта, където искате да вградите бутон „Купуване“.
  2. Поставете целия елемент <script> в заглавката на страницата.
  3. Запазете промените си.
  4. От оригиналния код за вграждане в своя администраторски панел на Shopify копирайте само елемента <div>. Например:
<div id='product-component-2dd3c8704e6'></div>
  1. Отворете страницата на своя уебсайт, където искате да вградите бутон „Купуване“.
  2. Поставете фрагмента с код <div> в страницата.
  3. Запазете промените си.