เข้าสู่ระบบ
เริ่มทดลองใช้งานฟรี

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

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

ตัวอย่างชุดย่อยของคอลเลกชัน

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

ในหน้านี้

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

  1. จากส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

  2. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิกปุ่ม "..." > "แก้ไขรหัส"

  3. ในไดเรกทอรีเทมเพลต ให้คลิก “เพิ่มเทมเพลตใหม่”

  4. สร้างเทมเพลตใหม่ให้หน้าที่มีชื่อว่า list-collections

  1. ลบโค้ดที่มีอยู่ในไฟล์ page.list-collections ใหม่ของคุณ ค้นหาโค้ดธีมของคุณด้านล่างแล้วคัดลอกและวางโค้ดลงในไฟล์ page.list-collections
  2. แล้วคลิกที่บันทึก

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

โค้ดสำหรับการปรับแต่งนี้จะแตกต่างกันไปโดยขึ้นอยู่กับธีมของคุณ คลิกที่ปุ่มธีมของคุณก่อนคัดลอกและวางลงโค้ดในไฟล์ page.list-collections

Boundless

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

  1. คัดลอกโค้ด
{% 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. วางโค้ดลงในไฟล์ page.list-collections
Brooklyn

รหัสสำหรับ Brooklyn

  1. คัดลอกโค้ด
{% 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. วางโค้ดลงในไฟล์ page.list-collections
Debut

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

  1. คัดลอกโค้ด
{% 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>


&#x3C;div class=&#x22;rte&#x22;&#x3E;
   {{ page.content }}
 &#x3C;/div&#x3E;
   </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. วางโค้ดลงในไฟล์ page.list-collections
Minimal

รหัสสำหรับ Minimal

  1. คัดลอกโค้ด
{% 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. วางโค้ดลงในไฟล์ page.list-collections
Narrative

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

  1. คัดลอกโค้ด
{% 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 == &#x27;collection_link&#x27; -%}
       {%- assign collection = collections[link.object.handle] -%}
       {% include &#x27;collection-card&#x27;, collection: collection, width: desktopColumns, grid_style: grid_style %}
     {%- endif -%}
   {%- endfor -%}

 &#x3C;/div&#x3E;
   </div>
 </div>
</div>
  1. วางโค้ดลงในไฟล์ page.list-collections
Simple

รหัสสำหรับ Simple

  1. คัดลอกโค้ด
{% 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. วางโค้ดลงในไฟล์ page.list-collections
Venture

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

  1. คัดลอกโค้ด
{% 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. วางโค้ดลงในไฟล์ page.list-collections

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

  1. จากส่วนผู้ดูแล Shopify ให้ไปที่ ร้านค้าออนไลน์ > เพจ

  2. คลิกเพิ่มหน้า

  3. ในเครื่องมือแก้ไขหน้า ให้ป้อนชื่อในกล่องข้อความที่ให้ไว้ โดยคุณต้องใช้ชื่อเดียวกันนี้กับเมนูที่คุณจะสร้างขึ้นในขั้นตอนต่อๆ ไป

  4. กําหนดเทมเพลตใหม่ของคุณไปยังหน้าโดยเลือกรายการ-คอลเลกชันจากเมนูดรอปดาวน์เทมเพลตธีมในส่วนร้านค้าออนไลน์

  5. แล้วคลิกที่บันทึก

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

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