在頁面上顯示精選商品系列子集
此頁面列印時間為 Jul 27, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/feature-a-subset-of-collections。
您可以編輯佈景主題程式碼,以在自訂頁面上顯示精選商品系列子集。此教學課程會向您展示如何建立新頁面範本,並使用選單指派要顯示的商品系列。
所有 Shopify 商店都有一個商品系列清單頁面,其網址為 www.mystore.com/collections
,該頁面會顯示商店中的所有商品系列。若不採用教學課程,您也可以編輯商品系列清單頁面,只顯示您選取的一組商品系列。
建立新頁面範本
- 在 Shopify 管理介面 中,前往「線上商店 > 佈景主題」。
- 找到要編輯的佈景主題,然後依序點擊「…」按鈕和「編輯程式碼」。
在「範本」目錄中,點擊「新增範本」。
為稱為清單商品系列的頁面建立新範本。
提示:Supply 佈景主題隨附預建的
page.list-collections
檔案。
- 刪除新
page.list-collections
檔案中現有的程式碼。在下方找到您的佈景主題程式碼,然後將其複製並貼上至page.list-collections
檔案。 - 點擊「儲存」。
選擇佈景主題
此自訂程式碼因您的佈景主題而異。在將其複製並貼上至 page.list-collections
檔案之前,請先點擊該佈景主題的按鈕:
Boundless 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Brooklyn 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Debut 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Minimal 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Narrative 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Simple 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
Venture 程式碼
- 複製程式碼。
{% 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>
- 將程式碼貼上至
page.list-collections
檔案中。
建立頁面以顯示您的精選商品系列
- 在 Shopify 管理介面 ,前往「網路商店」 >「頁面」。
- 按一下「新增頁面」。
- 在頁面編輯器中,在提供的文字方塊中輸入標題。您必須為後續步驟中建立的功能表使用相同的標題。
從網路商店區段的「佈景主題範本」下拉式選單中選取「商品系列清單」,將新範本指派至頁面。
點擊「儲存」。
建立功能表,控制顯示的商品系列
- 在 Shopify 管理介面 中,前往「網路商店」>「導覽」。
- 點擊新增選單按鈕。
- 請為功能表使用與精選商品頁面相同的標題。舉例來說,如果您建立的頁面標題為
Living Room
,請為您的功能表使用Living Room
標題。 - 點擊「新增選單項目」,藉此在功能表中為每個精選商品系列新增連結。點擊下拉式選單的「商品系列」,新增連結文字方塊,藉此從商店中選擇商品系列。請透過這種方式取得商品系列的連結,請勿將網址新增至文字方塊中。
- 按一下「儲存選單」。