Đặt tập hợp con của các bộ sưu tập làm nổi bật trên trang
Trang này được in vào May 04, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/feature-a-subset-of-collections?utm_campaign=Guru+Ask&utm_medium=Forum&utm_source=Social.
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.
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
Trong trang quản trị Shopify, chuyển đến Cửa hàng trực tuyến > Chủ đề .
Tìm chủ đề bạn muốn chỉnh sửa rồi nhấp vào nút ... > Chỉnh sửa mã .
Trong thư mục Mẫu , nhấp vào Thêm mẫu mới .
Tạo mẫu mới cho trang có tên list-collections .
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.
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:
Mã cho chủ đề Boundless
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>
Dán mã vào tệp page.list-collections
.
Mã dành cho chủ đề Brooklyn
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>
Dán mã vào tệp page.list-collections
.
Mã cho chủ đề Debut
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>
Dán mã vào tệp page.list-collections
.
Mã dành cho chủ đề Minimal
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>
Dán mã vào tệp page.list-collections
.
Mã cho chủ đề Narrative
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>
Dán mã vào tệp page.list-collections
.
Mã dành cho chủ đề Simple
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>
Dán mã vào tệp page.list-collections
.
Mã cho chủ đề Venture
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>
Dán mã vào tệp page.list-collections
.
Tạo trang để giới thiệu bộ sưu tập
Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Trang .
Nhấp vào Add page (Thêm trang).
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.
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 .
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ị
Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Điều hướng .
Nhấp vào nút Thêm menu .
Đặ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
.
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.
Nhấp vào Save menu (Lưu menu).