Trợ giúp
Đăng nhập

Thêm mã Nút Mua vào HTML

Sau khi tạo Nút Mua trong bảng điều khiển quản trị Shopify, bạn có thể thêm nút này vào trang web hoặc blog của mình.

Quá trình thêm mã nhúng vào HTML nguồn của trang web sẽ hơi khác nhau tùy thuộc vào cách thức và vị trí bạn muốn hiển thị Nút Mua và giỏ hàng, tùy thuộc vào nền tảng xuất bản và đôi khi là chủ đề bạn đang dùng trên nền tảng đó.

Trên trang này

Thêm mã nhúng vào WordPress

Bạn có thể thêm mã nhúng vào bài viết, trang hoặc mẫu trên trang web WordPress.

Thêm mã nhúng vào trang hoặc bài viết WordPress

  1. Trong Shopify, tạo Nút Mua và sao chép mã nhúng của nút từ hộp thoại Mã nhúng (hoặc nhấp vào Sao chép mã nhúng vào bộ nhớ tạm).
  2. Trong trang quản trị WordPress, đi tới phần bài viết hoặc trang.
  3. Tạo bài viết hoặc trang mới, hoặc chỉnh sửa bài viết/trang hiện có.
  4. Trong trình chỉnh sửa khối, nhấp vào nút +, tìm kiếm HTML tùy chỉnh, sau đó nhấp để chèn khối HTML tùy chỉnh.
  5. Dán mã nhúng vào trường văn bản của khối HTML tùy chỉnh.
  6. Tùy chọn: Di chuyển khối HTML tùy chỉnh hoặc xem trước Nút Mua sẽ hiển thị như thế nào:
    • Để di chuyển khối HTML tùy chỉnh, nhấp vào các nút mũi tên trên thanh công cụ của khối hoặc kéo khối đến vị trí mới.
    • Để xem trước Nút Mua, nhấp vào Xem trước trên thanh công cụ của khối.
  7. Khi hoàn tất, nhấp vào nút Save Draft, Preview hoặc Publish cho bài đăng hoặc trang.

Nếu dùng Classic Editor Plugin của WordPress, thay vì sử dụng khối Custom HTML, hãy đổi trình soạn thảo văn bản từ chế độ Visual sang Text rồi dán mã nhúng vào trình soạn thảo.

Thêm mã nhúng vào mẫu WordPress

Nếu chủ đề WordPress hỗ trợ trình chỉnh sửa trang web, bạn có thể thêm Nút Mua nhúng vào bất kỳ mẫu nào trên trang web.

Các bước:

  1. Trong Shopify, tạo Nút Mua và sao chép mã nhúng của nút từ hộp thoại Mã nhúng (hoặc nhấp vào Sao chép mã nhúng vào bộ nhớ tạm).
  2. Trong trang quản trị WordPress, đi tới Editor.
  3. Điều hướng đến mẫu bạn muốn chỉnh sửa.
  4. Trong trình chỉnh sửa khối, nhấp vào nút +, tìm kiếm HTML tùy chỉnh, sau đó nhấp để chèn khối HTML tùy chỉnh.
  5. Dán mã nhúng vào trường văn bản của khối HTML tùy chỉnh.
  6. Tùy chọn: Di chuyển khối HTML tùy chỉnh hoặc xem trước Nút Mua sẽ hiển thị như thế nào:
    • Để di chuyển khối HTML tùy chỉnh, nhấp vào các nút mũi tên trên thanh công cụ của khối hoặc kéo khối đến vị trí mới.
    • Để xem trước Nút Mua, nhấp vào Xem trước trên thanh công cụ của khối.
  7. Khi hoàn tất, nhấp vào nút Preview hoặc Save cho mẫu.

Thêm mã nhúng vào Blog Shopify

Lưu ý:

Các bước:

Máy tính để bàn

  1. Từ trang quản trị Shopify, đi tới Nội dung > Bài đăng trên blog.

  2. Trong trang Bài đăng trên blog, nhấp vào tiêu đề bài đăng trên blog muốn chỉnh sửa hoặc nhấp vào Thêm bài đăng trên blog để tạo bài đăng mới.

  3. Trong phần Viết bài đăng trên blog, nhấp vào Hiển thị HTML trong công cụ soạn thảo văn bản định dạng.

  4. Dán mã nhúng vào trường văn bản chính.

  5. Nhấp vào Lưu.

Thiết bị di động

  1. Từ ứng dụng Shopify, chạm vào biểu tượng Menu.

  2. Trong menu Nội dung, chạm vào biểu tượng arrow down, rồi chạm vào Bài đăng trên blog.

  3. Chạm vào bài đăng trên blog muốn chỉnh sửa.

  4. Trong phần Nội dung, chạm vào …, rồi chạm vào biểu tượng Edit code.

  5. Dán mã nhúng vào trường văn bản.

  6. Chạm vào Lưu hoặc ✓.

Thêm mã nhúng vào Squarespace

Bạn có thể thêm mã nhúng vào từng bài đăng trong Squarespace và vào các menu trên trang chủ. Trong một số trường hợp, bạn có thể muốn thực hiện cả hai. Ví dụ: bạn có thể nhúng một giỏ hàng trên trang chủ để nhận giao dịch mua từ các Nút Mua đã nhúng trên từng bài đăng.

Các bước:

  1. Từ trang quản trị Squarespace, mở trang web muốn thêm mã nhúng.
  2. Tìm phần tử trên trang nơi muốn hiển thị Nút Mua hoặc giỏ hàng nhúng, di con trỏ qua khu vực Page Content, rồi nhấp vào EDIT.
  3. Nhấp vào điểm chèn nơi muốn thêm mã nhúng.
  4. Trong phần More của hộp thoại Content Blocks, nhấp vào Code.
  5. Từ trang quản trị Shopify, sao chép mã nhúng từ hộp thoại Mã nhúng.
  6. Từ trang quản trị Squarespace, dán mã nhúng vào hộp thoại CODE. Đảm bảo trường văn bản được đặt để nhận HTML.
  7. Nhấp vào APPLY trong hộp thoại EDIT CODE.
  8. Nhấp lại vào SAVE trong trình biên tập trang. Vì Squarespace vô hiệu hóa JavaScript trong trang quản trị nên bạn cần xem trước riêng trang web để xác nhận Nút Mua hoặc giỏ hàng nhúng đang hoạt động.

Nếu đã hoàn thành các bước mà Nút Mua không tải, bạn có thể cần tắt chức năng tải Ajax. Để biết thêm chi tiết, tham khảo phần Bật hoặc vô hiệu hóa Ajax.

Thêm mã nhúng vào Wix

Sau khi tạo Nút Mua hoặc bộ sưu tập trong trang quản trị Shopify, bạn có thể thêm vào trang web Wix bằng trình biên tập trang web Wix.

Nếu muốn hiển thị nhiều sản phẩm trên trang web Wix mà không cần chỉnh sửa mã nhúng, bạn có thể nhúng một bộ sưu tập. Bạn có thể tạo bộ sưu tập mới trong trang quản trị Shopify cho các sản phẩm muốn hiển thị trên Wix.

Các bước:

  1. Từ trang quản trị Shopify, tạo Nút Mua cho sản phẩm hoặc bộ sưu tập, rồi sao chép mã nhúng.
  1. Từ tài khoản Wix, tìm trang web muốn chỉnh sửa trong phần My Sites, rồi nhấp vào Edit Site.
  2. Trong trình biên tập trang web Wix, nhấp vào nút +, rồi nhấp vào More.
  3. Nhấp vào HTML Code để thêm tiện ích mã HTML vào trang.
  4. Nhấp vào Enter Code.
  5. Trong hộp thoại HTML Settings, dán mã nhúng cho Nút Mua hoặc bộ sưu tập vào trường Add your code here rồi nhấp vào Update.
  6. Đổi kích thước tiện ích mã HTML cho vừa với nội dung. Nếu tạo mã nhúng cùng với giỏ hàng, hãy đảm bảo tab giỏ hàng hiển thị đúng vị trí.
  7. Khi hoàn tất, nhấp vào Save.

Nhúng nhiều sản phẩm hoặc bộ sưu tập

Các bước:

  1. Từ trang quản trị Shopify, tạo Nút Mua cho sản phẩm hoặc bộ sưu tập, rồi sao chép mã nhúng.
  2. Dán mã vào trình soạn thảo mã hoặc trình dựng trang web Wix. Lặp lại hai bước đầu tiên cho đến khi tạo xong các Nút Mua bạn cần.
  3. Chỉnh sửa các mã nhúng để đảm bảo hiển thị căn chỉnh phù hợp.
  4. Từ tài khoản Wix, tìm trang web muốn chỉnh sửa trong phần My Sites, rồi nhấp vào Edit Site.
  5. Trong trình biên tập trang web Wix, nhấp vào nút +, rồi nhấp vào More.
  6. Nhấp vào HTML Code để thêm tiện ích mã HTML vào trang.
  7. Nhấp vào Enter Code.
  8. Trong hộp thoại HTML Settings (Cài đặt HTML), hãy dán mã đã chỉnh sửa của Nút Mua vào trường Add your code here (Thêm mã của bạn vào đây), rồi nhấp vào Update (Cập nhật).
  9. Đổi kích thước tiện ích mã HTML cho vừa với nội dung. Nếu tạo mã nhúng cùng với giỏ hàng, hãy đảm bảo tab giỏ hàng hiển thị đúng vị trí.
  10. Khi hoàn tất, nhấp vào Save.

Thêm thẻ script riêng biệt

Một số nền tảng (như Unbounce) yêu cầu dán các thẻ <script> của mã nhúng vào phần đầu trang (header), và dán phần còn lại của mã nhúng vào trang bạn muốn hiển thị Nút Mua.

Các bước:

  1. Từ mã nhúng được tạo khi tạo Nút Mua, hãy sao chép cả phần tử <div> và phần tử <script>. Ví dụ:
<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. Mở phần đầu trang của trang web bạn muốn nhúng Nút Mua.
  2. Dán toàn bộ phần tử <script> vào đầu trang.
  3. Lưu thay đổi.
  4. Từ mã nhúng gốc trong bảng điều khiển quản trị Shopify, chỉ sao chép phần tử <div>. Ví dụ:
<div id='product-component-2dd3c8704e6'></div>
  1. Mở trang trên trang web mà bạn muốn nhúng Nút Mua.
  2. Dán đoạn mã <div> vào trang.
  3. Lưu thay đổi.