Bir sayfada koleksiyonların bir alt kümesini öne çıkarma
Tema kodunuzu düzenleyerek özel bir sayfada koleksiyonların bir alt kümesini öne çıkarabilirsiniz. Bu eğitim, yeni bir sayfa şablonunun nasıl oluşturulacağını ve bir menü kullanarak gösterilecek koleksiyonların nasıl atanacağını gösterir.

Tüm Shopify mağazalarının,www.mystore.com/collections
URL'sinde tüm koleksiyonlarını gösteren bir koleksiyon listesi sayfası vardır. Bu eğitime alternatif olarak, koleksiyonlarınızdan sadece bir seçkiyi göstermek için koleksiyon liste sayfanızı düzenleyebilirsiniz.
Bu sayfada
Yeni sayfa şablonunuzu oluşturma
- Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
- Düzenlemek istediğiniz temayı bulun ve ... düğmesi > Kodu düzenle'ye tıklayın.
Şablonlar dizininde Yeni şablon ekle öğesine tıklayın.
Liste koleksiyonları sayfası için yeni bir şablon oluşturun.
İpucu: Supply teması, önceden oluşturulmuş bir
page.list-collections
dosyasıyla birlikte gelir.
- Yeni
page.list-collections
dosyanızdaki var olan kodu silin. Tema kodunuzu aşağıda bulun ve kodu kopyalayıppage.list-collections
dosyanıza yapıştırın. - Kayıtyap ' a tıklayın.
Temanızı seçme
Bu özelleştirmenin kodu temanıza göre değişiklik gösterir. page.list-collections
dosyanıza kopyalayıp yapıştırmadan önce temanızın düğmesine tıklayın:
Boundless
Boundless için kod
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Brooklyn
Brooklyn temasının kodu
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Debut
Debut için kod
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Minimal
Minimal temasının kodu
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Narrative
Narrative için kod
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Simple
Simple temasının kod
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Venture
Venture için kod
- Kodu kopyalayın.
{% 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>
- Kodu
page.list-collections
dosyası içerisine yapıştırın.
Koleksiyonlarınızı öne çıkaracak bir sayfa oluşturun
- Shopify yöneticinizden Online Mağaza > Sayfalar'a gidin.
- Sayfa ekle'ye tıklayın.
- Sayfa düzenleyicisinde, sağlanan metin kutusuna bir Başlık girin. Yaklaşan adımlarda oluşturulacak menü için aynı başlığı kullanmalısınız.
Online mağaza bölümündeki Tema şablonu açılır menüsünden liste koleksiyonlarını seçerek yeni şablonlarınızı sayfaya atayın.
Kayıtyap ' a tıklayın.
Hangi koleksiyonların gösterileceğini kontrol eden menüyü oluşturma
- Shopify yöneticinizde İçerik > Menüler bölümüne gidin.
- Menü ekle düğmesine tıklayın.
- Menünüze, koleksiyonlarınızı öne çıkaracak sayfaya eklediğiniz Başlığın aynısını verin. Örneğin, oluşturduğunuz sayfanın başlığı
Living Room
ise menünüzeLiving Room
başlığını verin. - Menü öğesi ekle seçeneğine tıklayarak, öne çıkarmak istediğiniz her bir koleksiyon için menünüze bağlantı ekleyin. Bağlantı metin kutusuna ait açılır menüde Koleksiyonlar'a tıklayarak mağazanızdan koleksiyonları seçin. Metin kutusuna bir URL eklemek yerine koleksiyonlarınıza bu şekilde bağlantı verin.
- Menüyü kaydet'e tıklayın.