Cách sửa kích thước ảnh trong menu Shopify (Mega Menu và Menu Drawer mobile)

Quick answer

Để sửa kích thước ảnh trong menu, hãy ép mọi ảnh menu về cùng một hình dạng bằng thuộc tính CSS aspect-ratio, sau đó chọn object-fit: cover để lấp kín khung (mép ảnh có thể bị cắt bớt) hoặc contain để hiển thị trọn vẹn bức ảnh. Tải ảnh nguồn tối thiểu bằng kích thước hiển thị và kiểm tra riêng menu drawer trên mobile.

1. Chuẩn hóa ảnh nguồn: Chọn một tỉ lệ khung hình thống nhất cho cả hàng ảnh trong menu.
2. Ép đều khung bằng CSS: Dùng aspect-ratio và object-fit cho selector ảnh của theme.
3. Chống cắt ảnh trong Dawn: Chuyển ảnh nền mega menu sang chế độ contain trên desktop.
4. Xử lý ảnh mờ: Tải ảnh nguồn đủ lớn cho màn hình mật độ cao và kiểm tra đường dẫn file.
5. Kiểm tra drawer mobile: Rà soát selector của menu trượt và các cấp con trên điện thoại.

Why menu images end up uneven, cropped or blurry

Trước khi sửa CSS, bạn cần xác định thanh điều hướng của mình được tạo bởi chính theme Shopify hay bởi một ứng dụng menu cài thêm. Theme và app dựng cấu trúc HTML khác nhau, do đó dán CSS vào sai class sẽ không mang lại bất kỳ thay đổi nào.

Ảnh trong menu thường gặp lỗi vì 3 nguyên nhân chính sau:

Khi khung chứa ảnh không có tỉ lệ rõ ràng, trình duyệt sẽ hiển thị từng ảnh theo chiều cao tự nhiên của file. Một bức ảnh dọc đặt cạnh một ảnh vuông sẽ làm hàng menu giật cấp khấp khểnh. Ngược lại, những theme ép sẵn ô ngang sẽ tự động cắt mép trên dưới nếu bạn tải lên ảnh vuông. Xác định đúng triệu chứng sẽ giúp bạn chọn đúng giải pháp cấu trúc.

Video này cho thấy cách thêm ảnh vào dropdown mega menu; hãy xem để nắm bối cảnh nơi vấn đề kích thước bắt đầu.

Step 1: Standardize your source images

Cách xử lý triệt để nhất là chuẩn hóa tỉ lệ ảnh nguồn trước khi tải lên Shopify. Theo tài liệu hình ảnh giao diện của Shopify, “bạn cần sử dụng đúng tỉ lệ khung hình” để hình ảnh hiển thị đồng đều trên các bố cục giao diện.

Hãy chọn một tỉ lệ cố định cho mọi hình ảnh nằm trên cùng một hàng menu:

• Vuông (1:1): Phù hợp cho danh mục bộ sưu tập, ảnh sản phẩm và lưới menu đối xứng.
• Ngang (như 3:2 hoặc 16:9): Thích hợp cho các banner khuyến mãi hoặc thẻ hình ảnh phong cách tạp chí.

Xuất mọi hình ảnh trong hàng menu đó theo đúng tỉ lệ đã chọn. Hãy tải lên ảnh có kích thước điểm ảnh ít nhất bằng kích thước khung hiển thị trên màn hình máy tính. Đối với màn hình có mật độ điểm ảnh cao (như Retina), hãy chuẩn bị file ảnh có kích thước gấp đôi kích thước khung hiển thị.

Không nên áp dụng các con số kích thước cố định trôi nổi trên diễn đàn. Chiều rộng cột mega menu thay đổi tùy theo theme và số lượng cột, nên không có một kích thước pixel chuẩn chung cho mọi cửa hàng. Hơn nữa, theo tài liệu bộ lọc Liquid image_url của Shopify, “một hình ảnh không bao giờ có thể được phóng to vượt quá kích thước gốc của nó.” Tải ảnh gốc nhỏ chắc chắn sẽ khiến ảnh bị mờ khi co giãn.

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration: cùng các ảnh menu với object-fit cover và contain.

Nếu cửa hàng đang có sẵn nhiều ảnh khác tỉ lệ mà bạn chưa thể xuất lại ngay, hãy dùng CSS để ép tất cả về cùng một kích thước. Thuộc tính CSS hiện đại aspect-ratio, được ghi nhận bởi MDN Web Docs, “cho phép bạn xác định tỉ lệ giữa chiều rộng và chiều cao mong muốn của hộp phần tử.”

Thêm đoạn mã sau vào phần Custom CSS của theme hoặc file stylesheet chính:

/* Thay thế .your-menu-selector img bằng selector chính xác của theme bạn */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Lưu ý: Thay thế .your-menu-selector img bằng class thực tế được sử dụng trong theme của bạn.

Trong đoạn mã này, width: 100% chiếm trọn chiều rộng cột, aspect-ratio: 1 / 1 khóa khung thành hình vuông và object-fit: cover lấp đầy khung ảnh. Hành vi của object-fit quy định cách bức ảnh hiển thị khi tỉ lệ của nó khác với khung chứa, theo chuẩn của MDN Web Docs:

Cách tìm đúng selector trong theme của bạn

Vì mỗi theme Shopify dùng các class CSS khác nhau, bạn cần xác định đúng class của menu:

1. Mở cửa hàng trực tuyến của bạn trên trình duyệt máy tính.
2. Rê chuột vào menu để bảng mega menu mở ra.
3. Nhấp chuột phải trực tiếp vào ảnh menu bị lệch rồi chọn Kiểm tra (Inspect).
4. Trong DevTools, tìm thẻ <img> hoặc thẻ bao ngoài nó rồi đọc tên class. Tên class khác nhau tùy theo theme.
5. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Giao diện, chọn Thao tác > Nhân bản để sao lưu dự phòng, sau đó nhấn Tùy chỉnh.
6. Dán CSS vào mục Custom CSS của theme nếu theme có mục này, hoặc thêm vào cuối file stylesheet chính của theme (ví dụ base.css trong Dawn).

Step 3: Stop cropping in the Dawn mega menu

Theme Dawn của Shopify dễ gây bối rối vì trong thảo luận cộng đồng bên dưới, ảnh mega menu được vẽ bằng CSS background-image thay vì thẻ <img>. Khi đó quy tắc object-fit ở Step 2 không tác động tới chúng.

Trong thảo luận cộng đồng Shopify về kích thước ảnh mega menu của Dawn, cách sửa được đề xuất là đổi nền sang background-size: contain để thấy trọn bức ảnh thay vì bị cắt. Đây chỉ là ví dụ từ cộng đồng, không phải hướng dẫn chính thức của Shopify, và thread không xác nhận cách này đã giải quyết được vấn đề.

Để thử cách tương tự cho mega menu desktop của Dawn, thread đề xuất thêm đoạn mã này vào cuối file base.css:

/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
  #MegaMenu-Content-2 li:before {
    /* contain shows the whole image; empty bands may appear */
    background-size: contain !important;
    background-position: center;
  }
}

Hãy lưu ý hai điểm kỹ thuật quan trọng:

1. ID riêng của từng cửa hàng: Selector #MegaMenu-Content-2 là ID riêng của một liên kết menu cụ thể. Cửa hàng của bạn có thể mang số hiệu ID khác tùy theo vị trí mục menu. Luôn kiểm tra lại ID chính xác trên cửa hàng của bạn.
2. Phạm vi media query: Đoạn mã nằm trong @media screen and (min-width: 767px), nên chỉ áp dụng cho màn hình rộng và không sửa được menu drawer trên điện thoại (xem Step 5).

Video này minh họa cách thiết lập mega menu có ảnh trong theme Dawn; hãy xem để nắm bối cảnh cấu trúc trước khi chỉnh kích thước.

Step 4: Fix blurry menu images

Một bức ảnh hiển thị rõ trên máy tính có thể bị mờ nhòe rõ rệt trên màn hình điện thoại hoặc màn hình độ phân giải cao. Trong chuỗi hỗ trợ cộng đồng Shopify về xử lý ảnh mega menu mờ, tình trạng mờ ảnh thường bắt nguồn từ hai nguyên nhân kỹ thuật chính:

Nguyên nhân 1: Kích thước ảnh nguồn nhỏ hơn khung hiển thị

Khi ảnh nguồn có ít điểm ảnh hơn khung hiển thị, trình duyệt phải kéo giãn ảnh để lấp đầy khung. Theo tài liệu bộ lọc hình ảnh Liquid của Shopify, “một hình ảnh không bao giờ có thể được phóng to vượt quá kích thước gốc của nó.” Màn hình điện thoại có mật độ điểm ảnh cao làm lỗi này lộ rõ hơn. Theo web.dev của Google, “Density descriptors dùng để phục vụ các ảnh khác nhau tùy theo mật độ điểm ảnh của thiết bị.” Nguyên tắc chung: tải ảnh nguồn lớn gấp khoảng hai lần kích thước hiển thị.

[!WARNING] Không dùng object-fit: none để sửa ảnh mờ. Trong thread cộng đồng, nó khiến ảnh menu giữ nguyên kích thước gốc và mất hình dạng thay vì giải quyết được vấn đề.

Nguyên nhân 2: Menu vẫn đang trỏ tới file ảnh cũ

Khi thay ảnh, menu có thể vẫn dùng ảnh cũ. Trong cùng thread cộng đồng, nguyên nhân được nêu là ảnh mới là .png nhưng ảnh .gif cũ vẫn đang được dùng. Nhấp chuột phải vào ảnh, chọn Mở hình ảnh trong tab mới và kiểm tra URL trên thanh địa chỉ. Nếu thấy tên file cũ, hãy cập nhật ảnh tại nguồn để menu trỏ tới file mới.

Step 5: Check mobile and the menu drawer

Concept illustration: cách sửa mega menu desktop bên cạnh menu drawer di động vẫn cần kiểm tra riêng.

Một thiếu sót phổ biến khi sửa ảnh menu là chỉ kiểm tra trên màn hình máy tính. Các đoạn CSS đặt trong media query chỉ dành cho desktop sẽ không chạm tới bảng menu trượt trên di động. Ngoài ra, các theme thường dùng cấu trúc HTML và class hoàn toàn riêng cho menu drawer.

Ví dụ trong theme Dawn, menu drawer trên di động dùng .menu-drawer__menu. Selector có thể khác nhau giữa các phiên bản theme, nên hãy luôn kiểm tra theme của bạn. Nếu chỉ nhắm vào class của desktop, drawer mobile sẽ tiếp tục bị lệch hàng hoặc cắt ảnh.

Để đảm bảo hiển thị đồng đều trên thiết bị di động:

• Kiểm tra các cấp menu con: Mở drawer trên điện thoại và mở rộng menu cấp 2 để chắc chắn thumbnail con không bị kéo tràn màn hình.
• Thử nhiều chiều rộng màn hình: Dùng Device Mode trong DevTools để thử các màn hình điện thoại hẹp, hoặc kiểm tra trực tiếp trên điện thoại thật.
• Tách biệt cấu hình menu: Nếu menu drawer cần bố cục khác với thanh header desktop, hãy thiết lập menu riêng cho máy tính và điện thoại để các tinh chỉnh không làm xáo trộn lẫn nhau.

Common mistakes (fixed widths, wrapped labels)

Khi tìm cách ép ảnh menu về cùng một kích cỡ, người dùng rất dễ mắc phải 4 lỗi bố cục sau:

1. Đặt cứng chiều rộng bằng pixel hoặc phần trăm cố định

Trong thảo luận cộng đồng Shopify về chỉnh kích thước ảnh menu, một cách sửa được đề xuất đặt chiều rộng cố định 18% cho mỗi mục menu — giá trị gắn với theme của riêng shop đó. Chiều rộng cố định có thể làm vỡ cách xuống hàng của cột khi số mục menu thay đổi. Hãy dùng width: 100% cho ảnh và để container của cột tự chia chiều rộng.

2. Bỏ qua tình trạng nhãn văn bản xuống dòng

Dù tất cả hình ảnh đều có chung khung vuông, hàng menu vẫn bị lệch nếu tiêu đề chữ bị rớt xuống dòng thứ hai. Nếu một ô có nhãn 2 dòng trong khi ô bên cạnh chỉ có 1 dòng, chân của các ô sẽ lệch nhau. Để giữ hàng lối ngay ngắn, hãy thay đổi kiểu dáng menu điều hướng bằng cách đồng bộ khoảng đệm và kích thước font chữ.

3. Lạm dụng câu lệnh !important

Thêm !important vào quy tắc ảnh có thể vô hiệu hóa các class responsive của theme, khiến menu drawer trên thiết bị cầm tay không thể co giãn linh hoạt. Nếu bạn cần tinh chỉnh kích thước tổng thể, hãy điều chỉnh kích thước của toàn bộ menu thông qua cài đặt khung chứa thay vì dùng !important ép từng thẻ ảnh.

4. Sửa mã giao diện mà không sao lưu

Sửa trực tiếp file base.css trên theme đang hoạt động tiềm ẩn nhiều rủi ro. Một lỗi cú pháp nhỏ có thể làm vỡ bố cục toàn trang. Luôn nhân bản theme để tạo bản lưu dự phòng trước khi can thiệp vào stylesheet.

Trade-offs: cover vs contain vs re-uploading

Mỗi phương pháp xử lý tỉ lệ ảnh menu đều đi kèm những đánh đổi thực tế riêng:

Ngoài ra, các đoạn mã CSS tùy chỉnh viết thủ công vào theme có thể bị ghi đè hoặc biến mất khi bạn cập nhật theme lên phiên bản lớn hơn. Khi lên kế hoạch xây dựng hệ thống menu phức tạp, hãy chọn loại menu phù hợp để bố cục nâng đỡ trọn vẹn danh mục sản phẩm.

When to stop hand-writing CSS: setting image ratio in a menu app

Nếu không muốn phải duy trì và kiểm tra các selector CSS mỗi khi giao diện cập nhật, một ứng dụng menu chuyên dụng có sẵn cài đặt tỉ lệ ảnh sẽ giúp bạn làm điều này qua giao diện trực quan.

Trong Navi+, cài đặt Image ratio (auto-crop) cho phép bạn áp dụng tỉ lệ đồng nhất cho ảnh menu mà không cần viết code. Bạn có thể lựa chọn giữa 4 tùy chọn hiển thị:

• Unchanged (Mặc định): Giữ nguyên tỉ lệ tự nhiên của từng ảnh tải lên.
• 1:1 square: Ép mọi ô ảnh về khung vuông đều tăm tắp.
• 3:2 landscape: Tạo khung chữ nhật nằm ngang cân đối.
• 2:3 portrait: Tạo bố cục thẻ ảnh dọc phong cách biên tập.

Cài đặt này hoạt động linh hoạt theo từng cấp: bạn có thể đặt tỉ lệ chung cho cả menu, đặt riêng cho cấp con (cấp 2 hoặc 3), hoặc chọn Unchanged ở một mục riêng lẻ để bỏ qua tỉ lệ kế thừa.

Hệ thống sẽ tự động áp dụng các quy tắc CSS chuẩn aspect-ratio và object-fit: cover cho các phần tử chỉ định mà không yêu cầu tải lại ảnh. Ngoài ra, ứng dụng còn cung cấp công cụ cắt ảnh thủ công khi tải lên nếu bạn muốn chủ động chỉnh lại vùng tiêu điểm của bức ảnh.

[!NOTE] Cài đặt Image ratio tự động chỉ áp dụng riêng cho các mục Ảnh lớn (Big image) và Banner hình ảnh (Image banner) trong Mega Menu desktop, Mega Menu mobile và Menu Drawer mobile. Các icon menu nhỏ được chủ ý giữ nguyên hình dạng để không bị cắt. Cài đặt này không làm ảnh nguồn có độ phân giải thấp trở nên nét hơn; ảnh nguồn vẫn cần đảm bảo tiêu chuẩn kích thước nêu ở Step 4.

Nếu bạn muốn dựng lại thiết kế menu từ một ảnh mẫu, các điều khiển tỉ lệ có sẵn giúp bạn bớt phải vá CSS thủ công. Trong Navi+, bạn chọn 1:1 vuông hoặc 3:2 ngang một lần và mọi ảnh lớn trong menu sẽ theo tỉ lệ đó — hãy thử trên bản sao menu trước.

Action checklist

Sử dụng danh sách kiểm tra 7 bước sau để rà soát và điều chỉnh kích thước ảnh menu trên cửa hàng của bạn:

• Xác định nguồn menu: Kiểm tra xem menu được dựng từ theme Shopify hay ứng dụng menu cài thêm.
• Chọn một tỉ lệ mục tiêu: Thống nhất một tỉ lệ (như 1:1 vuông hoặc 3:2 ngang) cho cả hàng ảnh.
• Chuẩn hóa ảnh nguồn: Xuất ảnh ở tỉ lệ đã chọn, kích thước tối thiểu bằng khung hiển thị (gấp đôi cho màn hình mật độ cao).
• Tìm selector CSS: Dùng công cụ Inspect của trình duyệt để xác định đúng class áp dụng cho ảnh menu.
• Áp dụng aspect-ratio và object-fit: Thêm quy tắc định hình vào Custom CSS hoặc stylesheet của theme.
• Kiểm tra URL file ảnh: Xác nhận menu đang tải đúng file ảnh độ phân giải cao thay vì file cũ lưu đệm.
• Kiểm tra drawer mobile: Đảm bảo ảnh trong menu trượt và các cấp con hiển thị ngay ngắn trên điện thoại.

FAQ

Tại sao các hình ảnh trong mega menu của tôi lại có kích thước khác nhau?

Ảnh trong mega menu có kích thước khác nhau khi các ảnh nguồn có tỉ lệ khung hình không đồng nhất và theme đang để chiều cao khung ở chế độ tự động. Khi không có tỉ lệ hoặc chiều cao cố định, mỗi khung chứa sẽ tự co giãn theo chiều cao của bức ảnh tải lên.

Tại sao ảnh trong menu của tôi lại bị cắt mép?

Ảnh menu bị cắt mép khi khung chứa có tỉ lệ khác với bức ảnh gốc và áp dụng thuộc tính object-fit: cover hoặc ảnh nền cover. Thuộc tính cover sẽ lấp đầy toàn bộ khung và xén bớt phần ảnh thừa ra ngoài; chuyển sang contain sẽ giúp hiển thị trọn vẹn ảnh mà không bị cắt.

Tại sao ảnh menu trông sắc nét trên máy tính nhưng lại bị mờ trên điện thoại?

Ảnh menu bị mờ trên điện thoại khi khung hiển thị thực tế lớn hơn kích thước ảnh gốc hoặc theme đang gọi một thumbnail cũ độ phân giải thấp. Do bộ lọc CDN của Shopify không phóng to ảnh vượt kích thước gốc, những file ảnh nhỏ sẽ bị vỡ hạt trên màn hình điện thoại có mật độ điểm ảnh cao.

Tôi nên tải lên ảnh có kích thước bao nhiêu?

Bạn nên tải ảnh nguồn có kích thước tối thiểu bằng khung hiển thị thực tế trên màn hình máy tính của cửa hàng. Để ảnh đạt độ sắc nét tối ưu trên màn hình mật độ cao hiện đại, hãy xuất ảnh với kích thước điểm ảnh gấp khoảng hai lần khung hiển thị.

Tôi có thể làm cho tất cả ảnh menu thành hình vuông mà không cần sửa mã theme không?

Có, nếu menu của bạn được dựng bằng app có cài đặt tỉ lệ ảnh. Ví dụ, Navi+ có cài đặt Image ratio áp tỉ lệ 1:1 vuông cho ảnh lớn và banner ảnh trong menu bằng CSS, không cần sửa code theme hay tải lại ảnh.

Sources

• MDN Web Docs: Tài liệu CSS object-fit (Tiêu chuẩn kỹ thuật về căn chỉnh phần tử trong hộp chứa)
• MDN Web Docs: Tài liệu CSS aspect-ratio (Tiêu chuẩn kỹ thuật kiểm soát tỉ lệ rộng/cao của phần tử)
• Tài liệu lập trình viên Shopify: Bộ lọc Liquid image_url (Giới hạn nền tảng về việc phóng to kích thước hình ảnh)
• Trung tâm trợ giúp Shopify: Hình ảnh giao diện và tỉ lệ khung hình (Hướng dẫn chính thức về đồng bộ tỉ lệ hình ảnh)
• Google Web Developers: Phục vụ hình ảnh thích ứng (Tiêu chuẩn mật độ điểm ảnh thiết bị và bộ mô tả responsive)
• Cộng đồng Shopify: Thảo luận sửa ảnh mờ trong mega menu (Thread 363359) (Ví dụ thực tế từ cộng đồng; thảo luận không chính thức)
• Cộng đồng Shopify: Tùy chỉnh kích thước ảnh mega menu trong theme Dawn (Thread 255590) (Ví dụ thực tế từ cộng đồng; thảo luận không chính thức)
• Cộng đồng Shopify: Thay đổi kích thước và vị trí ảnh trong mega menu (Thread 182414) (Ví dụ thực tế từ cộng đồng; thảo luận không chính thức)
• Cộng đồng Shopify: Căn chỉnh và kích thước ảnh trong mega menu website (Thread 146397) (Ví dụ thực tế từ cộng đồng; thảo luận không chính thức)