Pop

Chủ đề tối giản, được thiết kế để đảm bảo dễ dàng truy cập nội dung. Chủ đề Pop là lựa chọn lý tưởng cho cửa hàng có kho hàng quy mô nhỏ đến trung bình, Pop được thiết kế xoay quanh việc điều hướng thanh bên lớn để đảm bảo dễ dàng truy cập nội dung.

Cửa hàng trực tuyến mẫu sử dụng chủ đề Pop

Trình biên tập chủ đề

Sử dụng trình biên tập chủ đề để tùy chỉnh chủ đề. Sử dụng trình biên tập chủ đề, bạn có thể biên tập nội dung hiển thị trong cửa hàng bằng cách thêm và chỉnh sửa mục chủ đề. Bạn cũng có thể thay đổi giao diện và chức năng của cửa hàng bằng cài đặt chủ đề.

Nội dung chủ đề được xây dựng bằng các mục. Mục là các khối nội dung tùy chỉnh xác định bố cục và giao diện của nhiều trang khác nhau trên cửa hàng trực tuyến.

Mục tĩnh là những mục xuất hiện ở các vị trí đã xác định trong cửa hàng trực tuyến. Không thể xóa hoặc sắp xếp lại những mục này. Mục tĩnh có thể bao gồm các mục đầu trang, chân trang, menu điều hướng hoặc mục nội dung trên các trang như trang sản phẩm và trang bộ sưu tập. Ví dụ, mục Sản phẩm xác định giao diện của từng trang sản phẩm trên cửa hàng trực tuyến.

Mục động là các mục tùy chọn có thể dùng để tùy chỉnh bố cục của trang chủ. Trên trang chủ của cửa hàng, bạn có thể thêm, sắp xếp lạixóa mục động để tạo bố cục trang. Bạn có thể có tối đa 25 mục động trên trang chủ của mình.

Bạn có thể tìm hiểu về lựa chọn mục độc đáo của Pop và cách tùy chỉnh để các mục đó phù hợp với công việc kinh doanh của mình.

Pop chứa những mục tĩnh sau:

  • Logo và menu
  • Thanh thông báo
  • Chân trang
  • Trang sản phẩm
  • Trang bộ sưu tập
  • Trang danh sách bộ sưu tập
  • Bài viết

Mục động

Bạn có thể thêm, sắp xếp lạixóa mục động để tùy chỉnh bố cục của trang chủ. Mỗi chủ đề có một bộ mục động duy nhất để lựa chọn.

Pop chứa những mục động sau:

  • Bài viết blog
  • Danh sách bộ sưu tập
  • Bộ sưu tập nổi bật
  • Hình ảnh có chữ
  • Bản trình chiếu
  • Sản phẩm nổi bật
  • Bản tin
  • Bản đồ
  • Văn bản đa dạng thức
  • Video
  • HTML tùy chỉnh

Trang sản phẩm

Trong mục Trang sản phẩm, bạn có thể thêm hoặc xóa những thành phần sau:

  • Thương hiệu hoặc nhà cung cấp sản phẩm
  • Thu phóng hình ảnh
  • Sản phẩm liên quan
  • Hộp chọn số lượng
  • Nút thanh toán nhanh
  • Biểu tượng chia sẻ qua mạng xã hội

Để chỉnh sửa cài đặt cho trang sản phẩm:

  1. Trong menu thả xuống ở thanh đầu trang, chọn Trang sản phẩm.

  2. Nhấp vào Sections (Mục).

  3. Nhấp vào Trang sản phẩm.

  4. Để hiển thị thương hiệu hoặc nhà cung cấp sản phẩm, đánh dấu vào Show product vendor (Hiển thị nhà cung cấp sản phẩm). Để hiển thị thương hiệu hoặc nhà cung cấp, bạn cần thêm nhà cung cấp cho sản phẩm.

  5. Để cho phép khách hàng phóng to bằng cách di chuột qua hình ảnh sản phẩm, chọn Enable image zoom (Bật thu phóng hình ảnh).

  6. Để hiển thị lựa chọn sản phẩm liên quan ở cuối trang, chọn Show related products (Hiển thị sản phẩm liên quan). Bộ sưu tập chứa sản phẩm sẽ xác định sản phẩm liên quan được hiển thị. Để hiển thị sản phẩm liên quan, bạn cần tạo bộ sưu tập cho sản phẩm hoặc thêm sản phẩm vào bộ sưu tập hiện có. Nếu sản phẩm không nằm trong bộ sưu tập nào, sản phẩm liên quan sẽ không hiển thị.

  7. Để hiển thị hộp chọn số lượng, đánh dấu vào Show quantity selector (Hiển thị hộp chọn số lượng).

  8. Để hiển thị nút thanh toán nhanh, chọn Hiển thị nút thanh toán nhanh.

  9. Để hiển thị biểu tượng chia sẻ qua mạng xã hội, đánh dấu vào Enable product sharing (Bật chia sẻ sản phẩm).

  10. Nhấp vào Save (Lưu).

Bản tin

Bạn có thể thêm mục đăng ký nhận bản tin vào trang chủ. Việc này cho phép bạn thu thập địa chỉ email của khách hàng để phục vụ cho các chiến dịch tiếp thị qua email. Bạn có thể tìm hiểu thêm về tiếp thị qua email trên blog của Shopify.

Để thêm mục đăng ký nhận bản tin vào trang chủ:

  1. Nhấp vào Sections (Mục).

  2. Nhấp vào Add section (Thêm mục) > Newsletter (Bản tin).

  3. Nhập tiêu đề cho mục đăng ký nhận bản tin vào trường Heading (Tiêu đề). Tiêu đề mặc định là "Đăng ký nhận bản tin".

  4. Nhập tiêu đề phụ cho mục đăng ký nhận bản tin vào trường*Subtext* (Văn bản phụ). Văn bản mặc định là "Khuyến mãi, sản phẩm mới và chương trình giảm giá. Trực tiếp gửi vào hộp thư đến của bạn."

  5. Chọn màu nền cho mục đăng ký nhận bản tin bằng cách nhấp vào bảng Background color (Màu nền) và chọn một màu.

  6. Nhấp vào Save (Lưu).

Video

Bạn có thể thêm video lưu trữ trên Youtube hoặc Vimeo vào trang chủ. Video có thể thu hút khách hàng và khiến họ quan tâm đến doanh nghiệp của bạn.

Để thêm video vào trang chủ:

  1. Nhấp vào Sections (Mục).

  2. Nhấp vào Add section (Thêm mục) > Video.

  3. Nhập tiêu đề cho video vào trường Heading (Tiêu đề).

  4. Nhập liên kết để chia sẻ video vào trường Video link (Liên kết video).

    Một liên kết chia sẻ Youtube có dạng: https://youtu.be/OTJXAUZY9t0. Bạn có thể tìm hiểu cách sao chép liên kết chia sẻ video Youtube trong bài viết này của Trợ giúp Youtube.

    Liên kết chia sẻ Vimeo có dạng: https://vimeo.com/281332510. Bạn có thể tìm hiểu cách sao chép liên kết chia sẻ video Vimeo trong bài viết này của Trung tâm trợ giúp Vimeo.

  5. Nhấp vào Save (Lưu).

HTML tùy chỉnh

Trong mục Custom HTML (HTML tùy chỉnh), bạn có thể sử dụng mã HTML để tạo nội dung tùy chỉnh cho trang chủ. Ví dụ: Bạn có thể sử dụng HTML để định dạng các khối văn bản, tạo bảng hoặc nhúng nội dung từ trang web của bên thứ ba.

Thêm mục HTML tùy chỉnh vào trang chủ

  1. Nhấp vào Thêm mục.

  2. Nhấp vào Custom HTML (HTML tùy chỉnh) rồi nhấp vào Chọn.

  3. Nhấp vào Custom HTML (HTML tùy chỉnh) và nhập mã HTML bạn muốn thêm vào trang chủ.

  4. Nhấp vào Save (Lưu).

Bạn có thể sử dụng cài đặt chủ đề để tùy chỉnh màu sắc và kiểu chữ trên cửa hàng trực tuyến. Bạn có thể thiết lập liên kết đến tài khoản truyền thông xã hội, chỉnh sửa cài đặt giỏ hàng và thêm favicon.

Pop chứa những cài đặt chủ đề sau:

  • Màu sắc
  • Kiểu chữ
  • Biểu tượng trang web
  • Trang giỏ hànghàng
  • Truyền thông xã hội
  • Thanh toán

Màu sắc

Bạn có thể chọn màu sắc cho các phần khác nhau của cửa hàng trực tuyến.

Tùy chỉnh cài đặt màu sắc

  1. Nhấp vào Theme settings (Cài đặt chủ đề).
  2. Nhấp vào Colors (Màu sắc).
  3. Để mở hộp chọn màu, hãy nhấp vào mẫu màu đối với màu của loại nội dung bạn muốn thay đổi. Vùng Đã chọn gần đây hiển thị màu sắc gần đây bạn đã chọn cho chủ đề. Vùng Đang sử dụng hiển thị màu sắc bạn đang dùng trong các phần khác của chủ đề.

    Để đặt mã màu hệ thập lục phân cụ thể, hãy nhấp vào trường văn bản để nhập màu.

    Để đặt màu trong suốt, xóa giá trị mã thập lục phân khỏi trường văn bản.

  4. Nhấp vào Save (Lưu).

Kiểu chữ

Bạn có thể đặt kiểu phông chữ và kích cỡ cho văn bản trên cửa hàng trực tuyến. Bạn có thể chọn phông chữ hệ thống hoặc phông chữ tùy chỉnh.

Bạn nên sử dụng phông chữ hệ thống trong cửa hàng. Khi sử dụng phông chữ hệ thống, khách hàng sẽ không phải tải phông chữ mới xuống máy tính của mình và ngăn ảnh hưởng xấu đến tốc độ tải cửa hàng. Phông chữ hiển thị trên máy tính của khách hàng phụ thuộc vào hệ điều hành. Tìm hiểu thêm về phông chữ hệ thống.

Tùy chỉnh cài đặt kiểu chữ

  1. Nhấp vào Theme settings (Cài đặt chủ đề).

  2. Nhấp vào Kiểu chữ.

  3. Đối với từng kiểu văn bản, nhấp vào Change (Thay đổi) để sử dụng hộp chọn phông chữ.

  4. Khám phá phông chữ bằng cách sử dụng trường tìm kiếm hoặc nhấp vào Tải thêm.

    Để xem tất cả các phông chữ có sẵn, hãy xem Bộ sưu tập phông chữ của Shopify.

  5. Nhấp vào tên của phông chữ bạn muốn sử dụng.

  6. Để thay đổi kiểu phông chữ, nhấp vào tên của kiểu phông chữ hiện tại, rồi chọn kiểu phông chữ mới từ menu thả xuống.

  7. Nhấp vào Chọn.

  8. Nhấp vào Save (Lưu).

Truyền thông xã hội

Bạn có thể thêm nút chia sẻ qua mạng xã hội cho sản phẩm và bài viết blog, cũng như liên kết đến tài khoản truyền thông xã hội.

Để tùy chỉnh cài đặt truyền thông xã hội:

  1. Nhấp vào Theme settings (Cài đặt chủ đề).

  2. Nhấp vào Truyền thông xã hội.

  3. Để tải lên hình ảnh chia sẻ trên mạng xã hội, trong vùng hình ảnh chia sẻ trên mạng xã hội, nhấp vào Select image (Chọn hình ảnh) hoặc Explore free images (Khám phá hình ảnh miễn phí).

  4. Để thêm liên kết đến tài khoản truyền thông xã hội, nhập liên kết đến tài khoản vào trường được cung cấp trong vùng Tài khoản mạng xã hội. Nhập liên kết đầy đủ, như https://instagram.com/shopify hoặc https://twitter.com/shopify.

    Liên kết đến tài khoản truyền thông xã hội hiển thị ở chân trang của cửa hàng trực tuyến.

  5. Để thêm nút chia sẻ qua mạng xã hội cho sản phẩm và bài viết blog, trong vùng Social sharing options (Tùy chọn chia sẻ qua mạng xã hội), đánh dấu vào một số hoặc tất cả hộp kiểm.

    Bạn có thể thêm những nút chia sẻ sau đây:

- Chia sẻ trên Facebook - Tweet trên Twitter - Ghim trên Pinterest (không dành cho chia sẻ bài viết blog)

  1. Nhấp vào Save (Lưu).

Thêm menu con vào thanh bên

Để thêm menu kéo xuống vào Menu chính, bạn cần tạo menu trên trang Navigation (Điều hướng). Bài viết này sẽ hướng dẫn bạn cách thực hiện quá trình đó.

Kích thước tối ưu cho logo cửa hàng

Logo nhỏ gọn cân đối trông sẽ đẹp nhất trong chủ đề Pop vì logo sẽ hiển thị trong thanh bên. Logo dạng biểu ngữ với chiều rộng lớn và chiều cao tương đối nhỏ sẽ không đẹp trong chủ đề này.

Chiều rộng tối đa của logo là 450 pixel và chiều cao tối đa là 200 pixel. Tệp logo tải lên sẽ được điều chỉnh kích thước để phù hợp với giới hạn đó.

Định dạng lý tưởng là PNG.

Giảm khoảng trắng xung quanh logo thanh bên

Trước khi bạn xóa khoảng đệm do chủ đề Pop thêm bên trên và bên dưới logo, bạn cần cắt bớt khoảng đệm có trong chính hình ảnh. Bạn cần cắt bớt không gian âm hoặc pixel trong suốt xung quanh đồ họa logo trước khi tải tệp logo lên Shopify.

Đây là logo có nhiều không gian âm xung quanh:

Đây là logo tương tự đã cắt bớt — không gian âm đã bị cắt khỏi logo đó:

Logo không được cắt bớt hiển thị như bên dưới trong chủ đề Pop:

Logo được cắt bớt hiển thị như bên dưới trong chủ đề Pop:

Khi bạn đã tải logo được cắt bớt lên phần tử chủ đề, bạn có thể điều chỉnh chiều rộng của thanh bên bằng cách chuyển đến trình biên tập chủ đề. Trong mục Header & Navigation (Đầu trang & Điều hướng), tùy ý chỉnh sửa giá trị "Sizing > Desktop Menu Width (Điều chỉnh kích thước > Chiều rộng menu trên máy tính)".

Cuối cùng là phương thức không được hỗ trợ, nếu bạn muốn giảm khoảng đệm bên trên và bên dưới logo, hãy thực hiện theo các bước sau:

  1. Trong mục Assets (Phần tử), nhấp vào timber.scss.liquid để mở bảng kiểu chủ đề trong trình chỉnh sửa mã trực tuyến hoặc chuyển đến liên kết URL này.

  2. Thêm vào cuối tệp:

```sass {% comment %} Hàm truy vấn phương tiện sau đây tạo ra: màn hình @media này và (min-width: 1025px) { ... } Thanh bên chỉ hiển thị khi chiều rộng > 1025 pixel. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Lưu tệp của bạn.

Chỉnh sửa cài đặt cho trang sản phẩm

Trong mục Trang sản phẩm, bạn có thể thêm hoặc xóa những thành phần sau:

  • Thương hiệu hoặc nhà cung cấp sản phẩm
  • Thu phóng hình ảnh
  • Sản phẩm liên quan
  • Hộp chọn số lượng
  • Nút thanh toán nhanh
  • Biểu tượng chia sẻ qua mạng xã hội

Để chỉnh sửa cài đặt cho trang sản phẩm:

  1. Trong menu thả xuống ở thanh đầu trang, chọn Trang sản phẩm.

  2. Nhấp vào Sections (Mục).

  3. Nhấp vào Trang sản phẩm.

  4. Để hiển thị thương hiệu hoặc nhà cung cấp sản phẩm, đánh dấu vào Show product vendor (Hiển thị nhà cung cấp sản phẩm). Để hiển thị thương hiệu hoặc nhà cung cấp, bạn cần thêm nhà cung cấp cho sản phẩm.

  5. Để cho phép khách hàng phóng to bằng cách di chuột qua hình ảnh sản phẩm, chọn Enable image zoom (Bật thu phóng hình ảnh).

  6. Để hiển thị lựa chọn sản phẩm liên quan ở cuối trang, chọn Show related products (Hiển thị sản phẩm liên quan). Bộ sưu tập chứa sản phẩm sẽ xác định sản phẩm liên quan được hiển thị. Để hiển thị sản phẩm liên quan, bạn cần tạo bộ sưu tập cho sản phẩm hoặc thêm sản phẩm vào bộ sưu tập hiện có. Nếu sản phẩm không nằm trong bộ sưu tập nào, sản phẩm liên quan sẽ không hiển thị.

  7. Để hiển thị hộp chọn số lượng, đánh dấu vào Show quantity selector (Hiển thị hộp chọn số lượng).

  8. Để hiển thị nút thanh toán nhanh, chọn Hiển thị nút thanh toán nhanh.

  9. Để hiển thị biểu tượng chia sẻ qua mạng xã hội, đánh dấu vào Enable product sharing (Bật chia sẻ sản phẩm).

  10. Nhấp vào Save (Lưu).

Loại hình ảnh sản phẩm phù hợp nhất cho chủ đề Pop

Hình ảnh có độ phân giải cao trông chau truốt và chuyên nghiệp hơn trong chủ đề Pop. Vì vậy, bạn nên chọn hình ảnh có chiều rộng và chiều cao tối thiểu là 1024 pixel. Hình ảnh sẽ được tự động thu nhỏ khi cần, vì vậy bạn nên sử dụng hình ảnh có chất lượng tốt nhất có thể.

Hình ảnh có độ phân giải cao đặc biệt quan trọng nếu bạn sử dụng tính năng Image Zoom (Thu phóng hình ảnh), đây là tính năng bạn có thể bật tại trình biên tập chủ đề trong mục Trang sản phẩm.

Lý tưởng nhất là hình ảnh nổi bật của các sản phẩm có cùng tỷ lệ chiều rộng trên chiều cao để hiển thị đẹp nhất trên trang bộ sưu tập.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí