Đặt tập hợp con của các bộ sưu tập làm nổi bật trên trang

Cẩn trọng

Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.

Lưu ý

Nếu bạn sử dụng chủ đề miễn phí từ Shopify, bạn có thể liên hệ với Bộ phận hỗ trợ của Shopify để được trợ giúp về hướng dẫn này. Thời gian thiết kế yêu cầu 15 phút. Để tìm hiểu thêm, tham khảo Support cho themes.

Lưu ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

Bạn có thể đặt tập hợp con của các bộ sưu tập làm nổi bật trên trang tùy chỉnh bằng cách chỉnh sửa mã chủ đề. Hướng dẫn này chỉ cho bạn cách tạo mẫu trang mới và chỉ định các bộ sưu tập cần hiển thị bằng cách sử dụng menu.

Tất cả cửa hàng Shopify đều có trang danh sách bộ sưu tập tại URL www.mystore.com/collections hiển thị tất cả các bộ sưu tập trong cửa hàng. Để thay thế hướng dẫn này, bạn có thể chỉnh sửa trang danh sách bộ sưu tập để chỉ hiển thị một số bộ sưu tập nhất định.

Tạo mẫu trang mới

1. Trong trang quản trị Shopify, chuyển đến Cửa hàng trực tuyến> Chủ đề.
2. Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào nút ... > Chỉnh sửa mã.

3. Trong thư mục Mẫu, nhấp vào Thêm mẫu mới.

4. Tạo mẫu mới cho trang có tên list-collections.

Mẹo

Chủ đề Supply đi kèm tệp page.list-collections dựng sẵn đã có.

1. Xóa mã hiện có trong tệp page.list-collections mới. Tìm mã chủ đề bên dưới, sao chép và dán mã vào tệp page.list-collections của bạn.
2. Nhấp vào Save (Lưu).

Chọn chủ đề

Mã của tùy chỉnh này khác nhau phụ thuộc vào chủ đề bạn chọn. Nhấp vào nút chủ đề của bạn trước khi sao chép và dán vào tệp page.list-collections của bạn:

Boundless

Mã cho chủ đề Boundless

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%}
{%- case linklists[page.handle].links.size -%}
{%- when 2 -%}
 {%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
 {%- assign grid_item_width = 'small--one-half medium-up--one-third' %}
{%- else -%}
 {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %}
{%- endcase -%}

<div class="page-width page-container">
  <header>
    <h1>{{ page.title }}</h1>
  </header>
  <div class="rte rte--indented-images">
    {{ page.content }}
  </div>

  <div class="grid grid--no-gutters collection-grid">
    {%- for link in linklists[page.handle].links -%}
      {%- if link.type == 'collection_link' -%}
        {%- assign featured = link.object.handle -%}
        {%- include 'collection-grid-item', collection: collections[featured] -%}
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

1. Dán mã vào tệp page.list-collections.

Brooklyn

Mã dành cho chủ đề Brooklyn

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{%- for link in linklists[page.handle].links -%}
 {%- if link.type == 'collection_link' -%}
 {%- assign collection_count = collection_count | plus: 1 -%}
 {%- endif -%}
{%- endfor -%}

{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}

<div class="grid">
 <div class="grid__item large--five-sixths push--large--one-twelfth">

   <header class="section-header text-center">
     <h1>{{ page.title }}</h1>
     <hr class="hr--small">
   </header>

   <div class="grid">
     <div class="grid__item large--four-fifths push--large--one-tenth">
       <div class="rte rte--nomargin rte--indented-images">
         {{ page.content }}
       </div>
     </div>
   </div>

 </div>
</div>

<div class="grid collection-grid">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection = collections[link.object.handle] -%}
     {%- assign collection_index = collection_index | plus: 1 -%}
     {%- assign collection_handle = collection.handle -%}
     {% include 'collection-grid-collage' %}
   {%- endif -%}
 {%- endfor -%}
</div>

1. Dán mã vào tệp page.list-collections.

Debut

Mã cho chủ đề Debut

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <div class="grid">
   <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
     <div class="section-header text-center">
       <h1>{{ page.title }}</h1>
     </div>

     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <ul class="grid grid--uniform">

   {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
   {%- assign image_size = '350x' -%}

   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign collection = collections[link.object.handle] -%}
       <li class="grid__item {{ grid_item_width }}">
         {% include 'collection-grid-item', collection_image_size: image_size %}
       </li>
     {%- endif -%}
   {%- endfor -%}

 </ul>
</div>

1. Dán mã vào tệp page.list-collections.

Minimal

Mã dành cho chủ đề Minimal

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="grid">

 <div class="grid__item post-large--two-thirds push--post-large--one-sixth">

   <div class="section-header">
     <h1 class="section-header--title">{{ page.title }}</h1>
   </div>

   <div class="rte">
     {{ page.content }}
   </div>

 </div>

</div>

{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}

<div class="grid-uniform">

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign featured = link.object.handle -%}
     <div class="grid__item {{collection_item_width}} text-center">
       {% include 'collection-grid-item' with collection_width: collection_width %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

1. Dán mã vào tệp page.list-collections.

Narrative

Mã cho chủ đề Narrative

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <header class="section-header text-center">
   <h1 class="section-header__title h2">{{ page.title }}</h1>
 </header>
 <div class="grid">
   <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <div class="list-collections-template" data-section-id="list-collections-template" data-section-type="list-collections-template">
   {%- assign desktopColumns = '3' -%}
   {%- assign mobileColumns = '1' -%}

   {%- capture gridClasses -%}
     {% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
     {% if mobileColumns == '2' %}small--one-half {% endif %}
   {%- endcapture -%}

   {% comment %}
     For Collage style replace grid_style = 'grid' with grid_style = 'collage' below
   {% endcomment %}

   {%- assign grid_style = 'grid' -%}

   <div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
     <div class="card-list__column grid grid__item {{ gridClasses }}">

       {%- for link in linklists[page.handle].links -%}
         {%- if link.type == 'collection_link' -%}
           {%- assign collection = collections[link.object.handle] -%}
           {% include 'collection-card', collection: collection, width: desktopColumns, grid_style: grid_style %}
         {%- endif -%}
       {%- endfor -%}

     </div>
   </div>
 </div>
</div>

1. Dán mã vào tệp page.list-collections.

Simple

Mã dành cho chủ đề Simple

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
 {{ page.content }}
</div>

{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

<div class="grid grid--uniform">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {% assign collection = collections[link.object.handle] %}
     <div class="grid__item {{ grid_item_width }}">
       {% include 'collection-grid-item' %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

1. Dán mã vào tệp page.list-collections.

Venture

Mã cho chủ đề Venture

1. Sao chép mã.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <h1 class="small--text-center">{{ page.title }}</h1>
 <div class="content-block">
   <div class="rte rte--indented-images">
     {{ page.content }}
   </div>
 </div>

 {%- assign collection_count = 0 -%}

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection_count = collection_count | plus: 1 -%}
   {%- endif -%}
 {%- endfor -%}

 {% assign number_rows = 1 %}

 {% case collection_count %}
   {% when 1 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 2 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 3 %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
   {% when 4 %}
     {% assign grid_item_width = 'medium-up--one-quarter' %}
     {% assign height = 235 %}
   {% else %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
 {% endcase %}

 <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
   {% assign row_number = 1 %}
   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign featured_collection = collections[link.object.handle] -%}
       {% if collection_count > 4 and forloop.index > 3 %}
         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
       {% endif %}
       {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
     {%- endif -%}
   {%- endfor -%}
 </div>

</div>

1. Dán mã vào tệp page.list-collections.

Tạo trang để giới thiệu bộ sưu tập

1. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Trang.
2. Nhấp vào Add page (Thêm trang).
3. Trong trình biên tập trang, nhập Tiêu đề vào hộp văn bản được cung cấp. Bạn phải sử dụng cùng tiêu đề cho menu mà bạn sẽ tạo trong các bước tiếp theo.

4. Chỉ định mẫu mới cho trang bằng cách chọn list-collections từ menu thả xuống Mẫu chủ đề trong mục Cửa hàng trực tuyến.

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

Lưu ý

Ngay cả khi hiển thị, trang mới của bạn cũng sẽ không tự động xuất hiện trong menu điều hướng của cửa hàng trực tuyến. Bạn sẽ cần thêm liên kết đến trang này trong menu.

Tạo menu kiểm soát bộ sưu tập sẽ hiển thị

1. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Điều hướng.
2. Nhấp vào nút Thêm menu.
3. Đặt Tiêu đề cho menu giống với tiêu đề bạn đã đặt cho trang sẽ giới thiệu các bộ sưu tập của bạn. Ví dụ: Nếu trang bạn đã tạo có tiêu đề là Living Room, hãy đặt tiêu đề cho menu là Living Room.
4. Thêm liên kết vào menu của từng bộ sưu tập bạn muốn giới thiệu bằng cách nhấp vào Thêm mục menu. Chọn bộ sưu tập từ cửa hàng của bạn bằng cách nhấp vào Bộ sưu tập trong menu thả xuống của hộp văn bản Liên kết. Hãy liên kết đến bộ sưu tập của bạn theo cách này, thay vì thêm URL vào hộp văn bản.
5. Nhấp vào Save menu (Lưu menu).