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

Sau khi tạo Nút Mua trong trang quản trị Shopify, bạn đã sẵn sàng thêm 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 hơi khác nhau tùy theo cách thức và vị trí bạn muốn hiển thị Nút Mua và giỏ hàng, tùy vào nền tảng đăng tải và đôi khi là chủ đề bạn đang sử dụng trên nền tảng đó.

Lưu ý

Nếu bạn cần trợ giúp để thêm mã nhúng vào các nền tảng đăng tải ngoài Shopify, ví dụ như Squarespace hoặc WordPress, hãy liên hệ trực tiếp với nhà cung cấp trang web hoặc nền tảng đăng tải để được hỗ trợ.

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

Bạn có thể thêm mã nhúng vào bài đăng, trang hoặc mẫu trên trang web WordPress của mình.

Lưu ý

Nút Mua nhúng tương thích với các trang web tự lưu trữ WordPress.org và một số gói nhất định do WordPress.com cung cấp. Tài liệu dưới đây được viết dựa theo các phiên bản WordPress gần đây. Phiên bản được cài đặt trên trang web của bạn có thể khác. Bạn có thể tìm hiểu thêm về các phiên bản WordPress trên trang web hỗ trợ của WordPress.

Thêm mã nhúng vào bài đăng hoặc trang WordPress

1. Trong Shopify, tạo Nút Mua và sao chép mã nhúng từ hộp thoại Embed Code (Mã nhúng) (hoặc nhấp vào Copy embed code to clipboard (Sao chép mã nhúng vào khay nhớ tạm).
2. Trên trang quản lý WordPress, chuyển đến bài đăng hoặc trang.
3. Tạo bài đăng/trang mới, hoặc chỉnh sửa bài đăng/trang hiện có.
4. Trong trình chỉnh sửa khối dựng, nhấp vào nút +, tìm và nhấp vào HTML tùy chỉnh để chèn khối HTML tùy chỉnh.
5. Dán mã nhúng vào trường văn bản do khối HTML tùy chỉnh cung cấp.

6. Không bắt buộc: Di chuyển khối HTML tùy chỉnh hoặc xem trước cách thức hiển thị của Nút Mua:

   • Để di chuyển khối HTML tùy chỉnh, nhấp vào nút mũi tên trong thanh công cụ của khối hoặc kéo khối đến một 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, hãy nhấp vào nút Lưu bản nháp, Xem trước hoặc Đăng của bài đăng hoặc trang.

Nếu bạn sử dụng Plugin Classic Editor của WordPress thì thay vì sử dụng khối HTML tùy chỉnh, hãy thay đổi trình biên tập văn bản từ chế độ Hình ảnh sang Văn bản và dán mã nhúng vào trình biên tập.

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

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

Các bước thực hiện:

1. Trong Shopify, tạo Nút Mua và sao chép mã nhúng từ hộp thoại Embed Code (Mã nhúng) (hoặc nhấp vào Copy embed code to clipboard (Sao chép mã nhúng vào khay nhớ tạm).
2. Trên trang quản lý WordPress, chuyển đến Trình chỉnh sửa.
3. Chuyển đến mẫu bạn muốn chỉnh sửa.
4. Trong trình chỉnh sửa khối dựng, nhấp vào nút +, tìm và nhấp vào HTML tùy chỉnh để chèn khối HTML tùy chỉnh.
5. Dán mã nhúng vào trường văn bản do khối HTML tùy chỉnh cung cấp.

6. Không bắt buộc: Di chuyển khối HTML tùy chỉnh hoặc xem trước cách thức hiển thị của Nút Mua:

   • Để di chuyển khối HTML tùy chỉnh, nhấp vào nút mũi tên trong thanh công cụ của khối hoặc kéo khối đến một 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, hãy nhấp vào nút Xem trước hoặc Lưu của mẫu.

Thêm mã nhúng vào blog Shopify của bạn

Lưu ý

Nút Mua sẽ tạo một giỏ hàng riêng. Nếu khách hàng chuyển đến một trang khác trong cửa hàng trực tuyến, mặt hàng đó sẽ không còn xuất hiện trong giỏ hàng. Bạn có thể chỉnh sửa Nút Mua để đến thẳng trang Thanh toán.

Lưu ý: #### Các bước thực hiện:

Máy tính để bàn

1. Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Bài đăng blog.
2. Trên trang Bài viết blog, nhấp vào tiêu đề bài viết blog bạn muốn sửa hoặc nhấp vào Thêm bài viết blog để tạo bài viết mới.
3. Trong mục Viết bài viết blog, nhấp vào Hiển thị HTML trong trình soạn thảo văn bản đa dạng thức.
4. Dán mã nhúng vào trường văn bản chính.
5. Nhấp vào Save (Lưu).

iPhone

1. Trong ứng dụng Shopify, chạm vào nút ….
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Chạm vào Bài đăng blog.

Android

1. Trong ứng dụng Shopify, chạm vào nút ….
2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
3. Chạm vào Bài đăng blog.

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

Cẩn trọng

Một số tùy chỉnh nâng cao trên Squarespace phụ thuộc vào chủ đề cụ thể. Shopify không hỗ trợ các tùy chỉnh này.

Bạn có thể thêm mã nhúng vào các bài đăng cá nhân trong Squarespace và vào menu trên trang chủ của bạn. Trong một số trường hợp, bạn có thể muốn thêm mã nhúng vào 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ừ Nút Mua mà bạn nhúng vào các bài đăng riêng lẻ.

Các bước thực hiện:

1. Trên trang quản lý Squarespace, mở trang web bạn muốn thêm mã nhúng.
2. Tìm yếu tố trên trang bạn muốn hiển thị Nút Mua hoặc giỏ hàng tích hợp, di chuyển con trỏ trên khu vực Nội dung trang rồi nhấp vào CHỈNH SỬA.
3. Nhấp vào điểm chèn mà bạn muốn thêm mã nhúng.
4. Trong mục More (Thêm) của hộp thoại Content Blocks (Khối nội dung), nhấp vào Code (Mã).
5. Trong trang quản trị Shopify, sao chép mã nhúng từ hộp thoại Embed Code (Mã nhúng).
6. Trên trang quản lý Squarespace, dán mã nhúng vào hộp thoại CODE (MÃ). Đảm bảo rằng trường văn bản được đặt để nhận HTML.
7. Nhấp vào APPLY (ÁP DỤNG) trên hộp thoại EDIT CODE (CHỈNH SỬA MÃ).
8. Nhấp vào LƯU một lần nữa trong trình chỉnh sửa trang. Do Squarespace vô hiệu hóa JavaScript trong trang quản lý, bạn cần xem trước riêng trang của mình để đảm bảo Nút Mua hoặc giỏ hàng tích hợp bạn đã thêm vào trang đang hoạt động.

Nếu bạn hoàn thành các bước và Nút Mua của bạn không tải được, bạn có thể cần tắt tính năng tải Ajax. Để xem thêm thông tin chi tiết, tham khảo Bật hoặc tắt Ajax.

Lưu ý

Nếu bạn thêm một giỏ hàng tích hợp vào menu trên trang chủ Squarespace, giỏ hàng đó sẽ nhận được đơn hàng từ Nút Mua mà bạn nhúng vào các bài đăng riêng lẻ.

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 cách sử dụng trình biên tập trang web Wix.

Cẩn trọng

Nếu bạn muốn nhúng Nút Mua vào nhiều sản phẩm hoặc bộ sưu tập, bạn cần chỉnh sửa mã nhúng trước khi thêm vào tiện ích mã HTML Wix. Nếu bạn nhúng nhiều Nút Mua vào trang web Wix mà không chỉnh sửa mã nhúng, khách hàng cố gắng mua nhiều hơn một sản phẩm sẽ có một giỏ hàng riêng cho từng sản phẩm.

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

Các bước thực hiện:

1. Trong 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.

Lưu ý

Khi bạn tạo Nút Mua cho trang web Wix, bạn không thể sử dụng tùy chọn Chuyển hướng trong cùng một tab do các hạn chế của Wix.

1. Từ tài khoản Wix, tìm trang web bạn muốn chỉnh sửa trong mục My Sites (Trang web của tôi), rồi nhấp vào Edit Site (Chỉnh sửa trang web).
2. Trong trình biên tập trang web Wix, nhấp vào nút +, rồi nhấp vào More (Thêm).
3. Nhấp vào HTML Code (Mã HTML) để thêm tiện ích mã HTML vào trang.
4. Nhấp vào Enter Code (Nhập mã).
5. Trên hộp thoại HTML Settings (Cài đặt HTML), dán mã nhúng cho Nút Mua hoặc bộ sưu tập trong trường Add your code here (Thêm mã của bạn ở đây), rồi nhấp vào Update (Cập nhật).
6. Thay đổi kích cỡ tiện ích mã HTML để phù hợp với nội dung. Nếu bạn đang tạo mã nhúng với giỏ hàng, hãy đảm bảo tab Giỏ hàng sẽ xuất hiện đúng chỗ.
7. Khi hoàn tất, nhấp vào Save (Lưu).

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

Các bước thực hiện:

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

Lưu ý

Bạn cần trợ giúp để sử dụng Wix Editor? Liên hệ với Bộ phận hỗ trợ của Wix.

Thêm thẻ tập lệnh riêng

Một số nền tảng (như Unbounce) yêu cầu bạn dán thẻ <script> của mã nhúng vào đầu trang 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 thực hiện:

1. Từ mã nhúng được tạo khi bạn tạo Nút Mua, sao chép cả yếu tố <div> và yếu 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ở đầu trang của trang web bạn muốn nhúng Nút Mua.
2. Dán toàn bộ yếu tố <script> vào đầu trang.
3. Lưu thay đổi.
4. Trong mã nhúng ban đầu trong trang quản trị Shopify, chỉ sao chép yếu tố <div>. Ví dụ:

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

1. Mở trang trên trang web bạn muốn nhúng Nút Mua.
2. Dán đoạn mã <div> vào trang.
3. Lưu thay đổi.