Bir sayfada koleksiyonların bir alt kümesini öne çıkarma
Bu sayfanın yazdırılma zamanı: Apr 26, 2024. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/feature-a-subset-of-collections adresini ziyaret edin.
Dikkat
Vintage temalar Shopify Tema Mağazası'nda bulunmaz.Bu temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve güvenlik düzeltmelerinin dışında güncelleme almaz.
Not
Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.
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 .
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ıp page.list-collections
dosyanıza yapıştırın.
Kayıt yap ' 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 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 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 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 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 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 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 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ıt yap ' a tıklayın.
Not: Yeni sayfanız görünür olsa bile online mağazanızda gezinme sırasında otomatik olarak görüntülenmez. Sayfanın bağlantısını bir menüye eklemeniz gerekir.
Hangi koleksiyonların gösterileceğini kontrol eden menüyü oluşturma
Shopify yöneticinizden Online Mağaza > Gezinme 'ye 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üze Living 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.