Cách thêm bảng size vào Shopify cho cửa hàng thời trang

Khi khách vào trang sản phẩm trên Shopify và không thấy bảng size, họ thường đoán size, nhắn hỏi hoặc rời đi. Với shop quần áo online, bảng size không phải là tiện ích thêm cho đẹp; nó giúp khách tự trả lời câu hỏi “mình mặc size gì” ngay tại trang sản phẩm, giảm thời gian tư vấn lặp lại, giảm tỷ lệ đổi trả vì không vừa và cải thiện tỷ lệ chuyển đổi (conversion rate). Bài viết này hướng dẫn các cách thêm bảng size vào Shopify: tạo trang riêng rồi gắn link, dùng metafield hoặc metaobject để hiển thị theo từng sản phẩm/nhóm, làm pop-up hoặc tab, và dùng app. Cuối bài có phần câu hỏi thường gặp.

Trước khi thêm: chuẩn bị bảng size rõ ràng, đúng với sản phẩm

Trước khi lo chuyện kỹ thuật, shop cần có bảng size đáng tin. Một bảng size copy nguyên từ nhà cung cấp có thể sai lệch với số đo thực tế, nhất là khi bạn nhập nhiều nguồn. Hãy tự đo sản phẩm hoặc yêu cầu xưởng gửi thông số theo từng size, sau đó đối chiếu với một vài mẫu thật. Bạn có thể làm theo checklist trong bài Cách đo quần áo để làm bảng size chuẩn cho shop online.

Với sản phẩm thời trang, bảng size nên ghi rõ: áo thì ngang ngực, dài áo, dài tay; quần thì ngang eo, ngang mông, dài quần; váy đầm thì vòng ngực, eo, mông và chiều dài theo dáng. Nếu shop bán đồ ôm, vải co giãn, đồ oversize, hãy ghi thêm ghi chú về độ co giãn hoặc khuyên khách lên/xuống một size khi số đo nằm ở mốc giữa.

Trong Shopify, hãy đảm bảo sản phẩm đã khai báo đúng biến thể size. Vào Products, chọn sản phẩm, mục Variants, thêm tùy chọn Size với các giá trị như S, M, L, XL hoặc size số. Việc này giúp khách chọn đúng size lúc thêm vào giỏ, đồng thời là cơ sở để gán bảng size theo nhóm về sau.

Chuẩn bị file bảng size: ảnh PNG/JPG có chiều rộng khoảng 800–1.000 px, chữ dễ đọc trên điện thoại, nền sáng. Nếu dùng bảng HTML, nên kiểm tra trên màn hình nhỏ vì bảng nhiều cột rất dễ bị tràn ngang.

Hai người phụ nữ trong studio xem xét thiết kế với laptop cạnh giá treo quần áo. Ảnh: Thirdman / Pexels

Cách 1: Tạo trang bảng size rồi chèn link vào trang sản phẩm

Đây là cách nhanh và ít phụ thuộc vào theme nhất, phù hợp khi shop chỉ có một bảng size chung hoặc vài bảng gộp trên cùng một trang.

Bước 1: Tạo trang bảng size trong Shopify

Vào Online Store → Pages → Add page.
Đặt tiêu đề, ví dụ “Bảng size” hoặc “Hướng dẫn chọn size”.
Trong phần nội dung, tải ảnh bảng size lên hoặc dán bảng HTML. Shopify có trình soạn thảo rich text nên bạn có thể chèn ảnh trực tiếp.
Lưu ý phần URL and handle: đặt ngắn gọn, ví dụ bang-size để link dễ nhớ: /pages/bang-size.

Nếu có nhiều bảng size theo nhóm sản phẩm, bạn có thể đặt các tiêu đề phụ trên cùng một trang, ví dụ: “Áo”, “Quần”, “Váy đầm”. Cách này gọn nhưng khách phải tự tìm đúng mục, hơi mất thời gian trên điện thoại.

Bước 2: Chèn link vào trang sản phẩm

Với theme Shopify 2.0, vào Online Store → Themes → Customize, chọn mẫu Products → Default product. Tìm khu vực gần nút Add to cart, bấm Add block, chọn Custom liquid hoặc Collapsible tab.

Nếu dùng Custom liquid, bạn có thể dán đoạn sau để tạo một chữ “Bảng size” bấm mở trang mới:

<a href="/pages/bang-size" target="_blank" rel="noopener">
  Xem bảng size
</a>

Nếu muốn hiển thị ngay ảnh bảng size trong một tab xổ xuống, chọn block Collapsible tab, đặt tiêu đề là “Bảng size”, rồi chèn ảnh hoặc nội dung vào trong tab. Cách này giúp khách xem bảng size ngay tại trang sản phẩm mà không cần chuyển trang.

Với theme cũ chưa hỗ trợ block, bạn cần vào Online Store → Themes → Edit code, mở file product-template.liquid, tìm vị trí gần form thêm vào giỏ, chèn đoạn link tương tự rồi lưu. Nếu không quen sửa code, hãy dùng cách pop-up hoặc app ở phần sau để tránh làm hỏng theme.

Ưu điểm: làm nhanh, cập nhật bảng size ở một nơi. Nhược điểm: bảng size chung cho mọi sản phẩm nên có thể chưa đủ đúng với từng dáng đồ.

Cách 2: Dùng metafield hoặc metaobject để hiển thị bảng size theo sản phẩm hoặc nhóm

Khi shop có nhiều nhóm hàng, mỗi nhóm lại có số đo khác nhau, bạn nên gán bảng size riêng. Shopify có hai công cụ mạnh cho việc này: metafield và metaobject.

Metafield: mỗi sản phẩm một bảng size

Metafield là trường dữ liệu tùy chỉnh gắn với sản phẩm. Bạn có thể tạo một metafield dạng File hoặc Rich text tên size_chart rồi nhập ảnh hoặc nội dung bảng size cho từng sản phẩm.

Cách tạo:

Vào Settings → Custom data (Dữ liệu tùy chỉnh).
Chọn mục Products → Add definition.
Đặt tên hiển thị là Bảng size, namespace/key thường để dạng custom.size_chart.
Chọn loại dữ liệu: File nếu muốn tải ảnh, hoặc Rich text nếu muốn dán bảng HTML.

Sau khi lưu, mở từng sản phẩm, kéo xuống phần Metafields, bạn sẽ thấy ô để tải bảng size lên.

Để hiển thị ra trang sản phẩm, nếu theme hỗ trợ dynamic source, bạn có thể thêm một block ảnh rồi kết nối với metafield size_chart. Nếu không, thêm block Custom liquid và dán:

{% if product.metafields.custom.size_chart %}
  <img src="{{ product.metafields.custom.size_chart | image_url: 'master' }}" alt="Bảng size" width="100%">
{% endif %}

Đoạn trên sẽ hiển thị ảnh bảng size của đúng sản phẩm đang xem. Hãy kiểm tra kỹ trong theme trước khi cho chạy chính thức.

Metaobject: một bảng size dùng chung cho nhiều sản phẩm

Nếu bạn không muốn tải cùng một ảnh bảng size lên hàng chục sản phẩm áo thun, hãy dùng metaobject. Metaobject giống như một “bảng dữ liệu” trung tâm: bạn tạo các mục như Bảng size áo thun, Bảng size quần jean, Bảng size váy đầm, sau đó gán mục phù hợp cho từng sản phẩm. Khi cần cập nhật số đo, bạn chỉ sửa một mục, toàn bộ sản phẩm liên quan sẽ tự cập nhật.

Cách tạo:

Vào Settings → Custom data → Metaobjects → Add definition.
Đặt tên, ví dụ Bảng size nhóm, thêm trường dữ liệu: Tên nhóm và Ảnh bảng size.
Tạo từng mục cho các nhóm: áo thun, quần jean, váy đầm, áo khoác…
Vào Products → Add definition, tạo metafield dạng Metaobject, tham chiếu đến definition vừa tạo, đặt tên hiển thị là Bảng size nhóm.
Mở sản phẩm, ở mục metafield, chọn đúng metaobject tương ứng.

Khi hiển thị ra theme, bạn có thể đọc giá trị từ metafield metaobject bằng custom liquid tương tự, nhưng cấu trúc sẽ phức tạp hơn. Nếu không chắc chắn, nên nhờ lập trình viên hoặc dùng app hỗ trợ metaobject. Cách này phù hợp với shop có kỹ thuật, muốn dữ liệu sạch và cập nhật hàng loạt nhanh.

Cách 3: Làm pop-up hoặc tab bảng size ngay trên trang sản phẩm

Pop-up giúp trang sản phẩm gọn gàng, khách cần xem thì bấm nút “Bảng size” gần nút thêm vào giỏ. Cách làm không quá khó nếu bạn dùng block Custom liquid.

Bạn có thể dán đoạn HTML/CSS/JS đơn giản sau và thay LINK_ANH_BANG_SIZE bằng URL ảnh bảng size của shop:

<button type="button" onclick="document.getElementById('size-chart-modal').style.display='flex';" style="margin: 8px 0 16px; padding: 10px 16px; border: 1px solid #333; background: #fff; cursor: pointer;">
  Xem bảng size
</button>

<div id="size-chart-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:99; padding:16px;" onclick="if(event.target===this)this.style.display='none';">
  <div style="background:#fff; padding:16px; max-width:90%; position:relative; border-radius:8px;">
    <span onclick="document.getElementById('size-chart-modal').style.display='none';" style="position:absolute; top:8px; right:12px; cursor:pointer; font-size:28px; line-height:1;">×</span>
    <img src="LINK_ANH_BANG_SIZE" alt="Bảng size" style="width:100%; max-height:80vh; object-fit:contain; display:block;">
  </div>
</div>

Khi khách bấm nút, cửa sổ bảng size hiện lên; bấm nút × hoặc vùng nền tối để đóng. Đoạn này không cần cài thêm thư viện, chạy được trên mọi theme hỗ trợ custom liquid.

Nếu muốn nhẹ nhàng hơn, bạn có thể dùng Collapsible tab như đã nói ở Cách 1. Tab phù hợp khi bảng size không quá dài, còn pop-up phù hợp khi bảng size nhiều nhóm hoặc ảnh lớn, cần xem to.

Quần áo được xếp gọn gàng trên kệ, mỗi món bọc nilon bảo vệ trong cửa hàng thời trang. Ảnh: Onur Kaya / Pexels

Dùng app bảng size khi có nhiều sản phẩm và không muốn sửa code

Nếu shop có vài chục đến vài trăm sản phẩm, gán thủ công metafield cho từng sản phẩm sẽ tốn thời gian. Lúc này, app bảng size từ Shopify App Store là lựa chọn hợp lý.

Cách cài:

Vào Apps → Recommended apps hoặc mở Shopify App Store.
Tìm từ khóa size chart hoặc product size chart.
Chọn app có đánh giá tốt, có bản dùng thử hoặc gói miễn phí, rồi bấm Install.
Trong cài đặt app, thường có các tùy chọn: tạo bảng size theo nhóm, gán theo product type hoặc tag, hiển thị dạng nút, tab hoặc pop-up, và nhập CSV hàng loạt.
Lưu và kiểm tra một vài sản phẩm trên điện thoại.

Khi chọn app, hãy ưu tiên app không nhúng quá nhiều script làm chậm trang, hỗ trợ hiển thị responsive trên mobile, và cho phép bảng size hiển thị gần nút Add to cart thay vì chỉ nằm dưới mô tả. App có thể giúp shop không cần đụng tới code, nhưng bạn nên kiểm tra tốc độ tải trang trước và sau khi cài.

[[IMAGE_3]] already used? Wait we need place after roughly second third. I put [[IMAGE_3]] after section 4? Actually after section 3? Let’s see outline: after first third, [[IMAGE_2]] after section 1. After second third, [[IMAGE_3]] should be after section 4 maybe. I placed [[IMAGE_3]] after section 3? Let’s revisit: I have section 1 then [[IMAGE_2]], section 2, section 3, then I wrote section 4 (app) but need place [[IMAGE_3]] after section 4 maybe. In the text above I placed [[IMAGE_3]] before app section? I wrote after section 3 “Cách 3…” then before “## Dùng app bảng size…” I inserted [[IMAGE_3]]. That may be around 60-70%? Need roughly second third maybe okay. But we already used [[IMAGE_3]]. I need ensure only one [[IMAGE_3]], one [[IMAGE_2]]. We already have. Good. But maybe the image placement is before app section, but that’s okay.

Need continue after app section. Then section on per-product-type and mobile maybe 6, section sync maybe 7. Then CTA, FAQ.

Let’s write rest:

Bảng size theo nhóm sản phẩm và tối ưu trên mobile

Một bảng size chung cho mọi sản phẩm thường không đủ. Hãy tách theo nhóm:

Áo thun / áo kiểu: vòng ngực, chiều dài áo, dài tay.
Quần jean / quần tây: vòng eo, vòng mông, chiều dài quần, ống quần.
Váy đầm: vòng ngực, vòng eo, vòng mông, chiều dài váy theo dáng.
Đồ oversize: ghi chú rõ “dáng rộng, nên chọn theo chiều dài mong muốn”.
Đồ co giãn: ghi thêm “vải co giãn 2 chiều/4 chiều”.

Với mobile, đừng bắt khách phải xoay ngang màn hình để đọc bảng. Ảnh bảng size nên có chiều rộng đủ lớn nhưng co về 100% chiều rộng màn hình. Nếu dùng bảng HTML nhiều cột, hãy kiểm tra trên điện thoại; nếu bị tràn, tốt nhất chuyển thành ảnh hoặc đặt bảng trong khung cuộn ngang có ghi chú “vuốt sang phải để xem bảng”.

Vị trí hiển thị cũng quan trọng. Nút hoặc tab bảng size nên nằm gần khu vực chọn size và nút Add to cart, không nên giấu dưới mô tả dài. Nếu khách phải tìm, họ vẫn sẽ nhắn tin hỏi shop, hoặc bỏ qua. Bạn có thể xem thêm Tư vấn size cho khách khi bán online: kịch bản và checklist để xử lý phần tin nhắn khi khách vẫn còn phân vân.

Đồng bộ bảng size khi đổi nguồn hàng hoặc bán đa kênh

Bảng size không nên là dữ liệu “rải rác” mỗi nơi một kiểu. Hãy giữ một file gốc duy nhất trên Google Sheets hoặc Notion, trong đó ghi: nhóm sản phẩm, tên size, các số đo, ngày cập nhật và nguồn hàng. Khi nhập lô mới hoặc xưởng thay đổi thông số, bạn sửa trong file gốc, rồi cập nhật lên Shopify.

Nếu bạn đang dùng trang bảng size chung, chỉ cần sửa nội dung trang đó. Nếu dùng metaobject, sửa mục tương ứng là xong. Nếu dùng app, mở app và cập nhật bảng theo nhóm. Điều cần tránh là ghi cứng bảng size vào từng mô tả sản phẩm vì sau này thay đổi sẽ phải sửa từng sản phẩm, rất dễ sót.

Nếu shop bán trên nhiều kênh như Shopify, Haravan, Sapo, WooCommerce, Facebook, TikTok Shop và Zalo, hãy đặt tên size và số đo giống nhau ở tất cả các kênh để khách không bị rối. Với Haravan và Sapo, bạn có thể tạo một trang/bài viết bảng size rồi chèn link vào mô tả sản phẩm hoặc banner. Với WooCommerce, có thể dùng plugin tạo tab bảng size hoặc thêm hook vào theme. Cách hiển thị khác nhau, nhưng dữ liệu số đo phải đồng nhất.

Trước khi khách hỏi size, hãy cho họ một cách để thấy chính mình mặc sản phẩm. Macgi có widget thử đồ ảo trên trang sản phẩm, cài bằng một script tag và một thuộc tính nút; khách tải lên ảnh toàn thân và xem mình mặc áo/quần/váy trong khoảng 15–40 giây. Nút nằm cạnh nút Thêm vào giỏ, dùng ảnh sản phẩm sẵn có của shop. Bạn có thể dùng thử miễn phí trong bản beta tại đăng ký Macgi.

Câu hỏi thường gặp

Bảng size nên đặt ở vị trí nào trên trang sản phẩm?

Ưu tiên đặt gần nút Add to cart hoặc ngay trong khu vực chọn size, vì đây là lúc khách cần quyết định size. Có thể dùng nút bấm mở pop-up, tab xổ xuống hoặc link ngắn. Tránh để bảng size ở cuối bài mô tả dài.

Shopify có sẵn tính năng bảng size không?

Shopify không có block bảng size mặc định. Bạn phải tự tạo bằng cách dùng trang, metafield, metaobject, custom liquid hoặc app. Với theme 2.0, block Collapsible tab là cách dễ nhất để bắt đầu.

Nên dùng ảnh hay bảng HTML cho bảng size?

Ảnh thường ổn định giao diện hơn trên mobile, nhưng khi cần sửa số đo sẽ phải tạo lại ảnh. Bảng HTML dễ sửa và có thể SEO tốt hơn, nhưng dễ vỡ bố cục trên điện thoại nếu nhiều cột. Nếu không có người kỹ thuật, hãy bắt đầu bằng ảnh rồi nâng cấp dần.

Có nên dùng một bảng size chung cho tất cả sản phẩm không?

Chỉ nên dùng khi shop bán một nhóm sản phẩm có dáng tương tự. Nếu có áo, quần, váy, đồ oversize, hãy tách bảng theo nhóm để tránh khách chọn sai. Dùng metaobject hoặc app theo product type/tag sẽ giúp quản lý gọn hơn.

Làm sao biết bảng size có đang giúp ích không?

Theo dõi các tín hiệu: số tin nhắn hỏi size có giảm, tỷ lệ thêm vào giỏ từ khách xem bảng size, tỷ lệ đổi trả vì không vừa. Bạn có thể gắn sự kiện JavaScript vào nút bảng size để đo lượt mở trong Google Analytics, nhưng nhớ kiểm tra đúng theo nền tảng của shop.

Đội ngũ Macgi
Chúng tôi làm công cụ thử đồ AI cho người mua sắm ở Việt Nam.