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

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

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

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

ร้านค้า 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>

     <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. วางโค้ดลงในไฟล์ 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 == '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. วางโค้ดลงในไฟล์ 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. คลิกบันทึกเมนู
ไม่พบคำตอบที่คุณต้องการงั้นหรือ เราพร้อมช่วยเหลือคุณ