แสดงชุดย่อยของคอลเลกชันบนหน้า

หน้านี้พิมพ์ขึ้นเมื่อ Mar 25, 2023 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/feature-a-subset-of-collections

คุณสามารถแสดงชุดย่อยของคอลเลกชันในหน้าแบบกำหนดเองได้โดยแก้ไขโค้ดธีมของคุณ บทแนะนำการใช้งานนี้จะแสดงวิธีสร้างเทมเพลตหน้าใหม่และกําหนดคอลเลกชันที่จะแสดงโดยใช้เมนู

ร้านค้า Shopify ทั้งหมดมีหน้ารายการคอลเลกชันที่ URL www.mystore.com/collections ซึ่งแสดงคอลเลกชันทั้งหมดในร้านค้า ทางเลือกอื่นนอกเหนือจากในบทแนะนำการใช้งานนี้คือ คุณสามารถแก้ไขหน้ารายการคอลเลกชันของคุณเพื่อแสดงเฉพาะคอลเลกชันของคุณได้

สร้างเทมเพลตหน้าใหม่ของคุณ

จากส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกการดำเนินการ > แก้ไขโค้ด
ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่”
สร้างเทมเพลตใหม่ให้หน้าที่มีชื่อว่า 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 admin ให้ไปที่ ร้านค้าออนไลน์ > เพจ
คลิกเพิ่มหน้า
ในเครื่องมือแก้ไขหน้า ให้ป้อนชื่อในกล่องข้อความที่ให้ไว้ โดยคุณต้องใช้ชื่อเดียวกันนี้กับเมนูที่คุณจะสร้างขึ้นในขั้นตอนต่อๆ ไป
กําหนดเทมเพลตใหม่ของคุณไปยังหน้าโดยเลือกรายการ-คอลเลกชันจากเมนูดรอปดาวน์เทมเพลตธีมในส่วนร้านค้าออนไลน์
คลิกที่ “บันทึก”

หมายเหตุ: แม้ว่าเพจใหม่ของคุณจะสามารถมองเห็นได้ แต่เพจดังกล่าวจะไม่ปรากฏขึ้นในการนำทางของร้านค้าออนไลน์โดยอัตโนมัติ คุณจำเป็นต้องเพิ่มลิงก์ไปยังเว็บเพจดังกล่าวในเมนู

สร้างเมนูที่ควบคุมว่าจะแสดงคอลเลกชันใด

จากส่วน Shopify admin ให้ไปที่หน้าร้านค้าออนไลน์ > การนําทาง
คลิกปุ่ม “เพิ่มเมนู”
ตั้งชื่อเมนูให้เหมือนกับชื่อที่คุณตั้งให้กับหน้าซึ่งจะใช้แนะนำคอลเลกชันของคุณ ตัวอย่างเช่น หากหน้าที่คุณสร้างมีชื่อว่า Living Room ให้ตั้งชื่อเมนูของคุณว่า Living Room
เพิ่มลิงก์ไปยังเมนูของคุณสำหรับแต่ละคอลเลกชันที่คุณต้องการแนะนำโดยคลิกที่ “เพิ่มรายการเมนู” เลือกคอลเลกชันจากร้านค้าของคุณโดยคลิกที่ “คอลเลกชัน” ในเมนูดรอปดาวน์สำหรับกล่องข้อความลิงก์ ทำการลิงก์ไปยังคอลเลกชันของคุณด้วยวิธีนี้ แทนที่จะเพิ่ม URL ลงในกล่องข้อความ
คลิกบันทึกเมนู

แสดงชุดย่อยของคอลเลกชันบนหน้า

สร้างเทมเพลตหน้าใหม่ของคุณ

เลือกธีมของคุณ

โค้ดสำหรับธีม Boundless

รหัสสำหรับ Brooklyn

โค้ดสำหรับธีม Debut

รหัสสำหรับ Minimal

โค้ดสำหรับธีม Narrative

รหัสสำหรับ Simple

โค้ดสำหรับธีม Venture

สร้างหน้าซึ่งจะใช้แนะนำคอลเลกชันของคุณ

สร้างเมนูที่ควบคุมว่าจะแสดงคอลเลกชันใด

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง