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ủ đề. Thanh công cụ của trình biên tập chủ đề được chia thành các Sections (Mục) và Theme settings (Cài đặt chủ đề).

Bạn có thể sử dụng các mục để sửa đổi nội dung và bố cục của các trang khác nhau trên cửa hàng. Bạn có thể sử dụng cài đặt chủ đề để tùy chỉnh phông chữ cùng màu sắc của cửa hàng, và thay đổi liên kết truyền thông xã hội cùng cài đặt thanh toán.

Mục là các khối nội dung tùy chỉnh để xác định bố cục của các trang khác nhau trên cửa hàng trực tuyến.

  • Các mục trên Trang chủ bao gồm các tính năng như bản trình chiếu hoặc đăng ký nhận bản tin mà bạn có thể thêm, sắp xếp lại hoặc xóa. Bạn có thể để đến 25 mục trên trang chủ.

  • Mỗi loại trang lại có những mục riêng. Ví dụ: Mục trang sản phẩm xác định bố cục của từng trang sản phẩm trên cửa hàng trực tuyến.

  • Mục trang thường nằm ở vị trí cụ thể trên cửa hàng trực tuyến. Bạn có thể tùy chỉnh nhưng không thể sắp xếp lại hoặc xóa các mục đó.

  • Từng chủ đề bao gồm các phần cố định hiển thị trên tất cả các trang của cửa hàng trực tuyến, chẳng hạn như đầu trang và chân trang.

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, đánh dấu vào Show dynamic checkout button (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.

Mục bản tin trên trang web. Có trường cho khách hàng nhập địa chỉ email và nút ''Subscribe

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

  1. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

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

  4. 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".

  5. 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."

  6. 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.

  7. 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. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

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

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

  5. 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.

  6. 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 HTML tùy chỉnh vào trang chủ:

  1. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

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

  4. Trong vùng Bố cục nâng cao, nhấp vào HTML tùy chỉnh > Thêm.

  5. 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ủ.

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

Cài đặt chủ đề 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. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

  3. Nhấp vào Colors (Màu sắc).

  4. Đối với từng loại nội dung, nhấp vào mẫu màu để sử dụng hộp chọn màu. Khu vực Recently selected (Đã chọn gần đây) hiển thị màu sắc gần đây bạn chọn cho chủ đề. Khu vực Currently used (Đang sử dụng) hiển thị màu sắc bạn đang dùng cho các phần khác của chủ đề.

    Để đặt màu thành trong suốt, nhấp vào None (Không).

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

Kiểu chữ

Bạn có thể đặt kiểu chữ và cỡ chữ cho văn bản trên cửa hàng trực tuyến.

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

  1. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

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

  4. Đố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ữ.

  5. 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.

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

  7. Để thay đổi phông chữ sang một kiểu khác, chẳng hạn như in đậm hoặc in nghiêng, nhấp vào Regular (Phổ biến). Tiếp theo, nhấp vào kiểu bạn muốn sử dụng, rồi 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. Bên cạnh Pop, nhấp vào Customize (Tùy chỉnh).

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

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

  4. Để 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í).

  5. Để 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.

  6. Để 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).

Lưu ý: Để hiển thị nút chia sẻ qua mạng xã hội ở trang sản phẩm và bài viết blog, bạn cũng cần kích hoạt nút trong các mục với những trang này.

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.

Làm logo của bạn lớn hơn trên thiết bị di động

Trước hết, để logo lớn hơn trong bố cục bất kỳ, bạn phải cắt bớt toàn bộ 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ự khi đã cắt bớt — khi tất cả không gian âm đã bị cắt xén 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 biết rằng không thể làm logo nhỏ đi vì không gian âm của logo, bạn có thể điều chỉnh chiều cao của đầu trang trên thiết bị di động để tăng thêm không gian cho việc mở rộng logo. Nhờ đó, logo của bạn sẽ lớn hơn.

Chuyển đến trình biên tập chủ đề và trong mục Header & Navigation (Đầu trang & Điều hướng), tăng giá trị "Sizing > Mobile Menu Height (Kích thước > Chiều cao menu trên thiết bị di động)".

Làm logo của bạn lớn hơn trên thanh bên

Trước hết, để logo lớn hơn trong bố cục bất kỳ, bạn phải cắt bớt toàn bộ 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ự khi đã cắt bớt — khi tất cả không gian âm đã bị cắt xén khỏi logo đó:

Logo có không gian âm hiển thị như bên dưới khi được tải lên chủ đề Pop:

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

Khi bạn biết rằng không thể làm logo nhỏ đi vì không gian âm của logo, bạn có thể điều chỉnh chiều rộng của thanh bên để tăng thêm không gian cho việc mở rộng logo. Nhờ đó, logo của bạn sẽ lớn hơn.

Chuyển đến trình biên tập chủ đề và trong mục Header & Navigation (Đầu trang & Điều hướng), tăng 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)".

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 Show dynamic checkout button (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í