featured-collection-custom.liquid
<section class="container">
<h2>Featured Collection</h2>
<div>{{ collections[section.settings.featured_collection].products }}</div>
<div style="font-size: 2rem">Count: {{ collections[section.settings.featured_collection].products | size }}</div>
{% for product in section.settings.featured_collection.products %}
<div>{{ product.title }}</div>
{% endfor %}
</section>
{% schema %}
{
"name": "Featured Collection",
"class": "featured-collection-schema",
"settings": [
{
"type": "collection",
"id": "featured_collection",
"label": "Collection"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection"
}
],
"presets": [
{
"category": "Collection",
"name":"Featured Collection Custom"
}
]
}
{% endschema %}
Output:
Collection
I am new to the Liquid. I have created a Collection (Test Collection) with 5 products inside it and select 'Test Collection' as the value of collection, and why the size of the collection is 0, instead of 5?
Related
Thanks for having a look.
What I have so far is I loop thru blocks created in admin and render each as a button. I set an x-data boolean which does render the collections but it toggles all on and off because the boolean is not unique. This is where I am struggling. Not sure how to create a unique selector.
<div x-data="{ selected: false }" class="tw-container tw-mx-auto tw-pt-20" x-cloak>
<div class="tw-flex lg:tw-justify-center tw-space-x-4 tw-overflow-x-auto">
{% for block in section.blocks %}
<button
type="button"
#click="selected = !selected"
class="tw-cursor-pointer"
>
// renders Image & title
</button>
{% endfor %}
</div>
{% for block in section.blocks %}
<div class="tw-container">
<div
x-show="selected"
>
<div class="tw-mt-12 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
{% assign coll_name = block.settings['menu-collection-name'] | handleize %}
{%- if coll_name != '' -%}
// This renders all collections & toggles on/off
{% for product in collections[coll_name].products %}
{%- render 'restaurant-menu-item', item: product -%}
{% endfor %}
{%- endif -%}
</div>
</div>
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Restaurant Menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Menu Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Menu"
}
],
"blocks": [
{
"type": "menu-link",
"name": " Menu-link",
"settings": [
{
"type": "image_picker",
"id": "link-image",
"label": "Link Image"
},
{
"type": "text",
"id": "link-title",
"label": "Link Title",
"default": "Menu Title"
},
{
"type": "text",
"id": "menu-collection-name",
"label": "Menu Collection Name (required)",
"info": "It should match name of collection used for menu items. Use name when collection is first set"
}
]
}
]
}
{% endschema %}
Edit here is a refactor using a getter in Alpine x-data at the moment still can't figure out how to just render the collection for button clicked I tried to assign the collection name in each loop & compare but that does not work even though the collection name renders correctly in loop see comment in code below
<div
x-data="
{open: false,
get isOpen() { return this.open },
toggle() { this.open = ! this.open },
}
"
class="tw-container tw-mx-auto tw-pt-20"
x-cloak
>
<div class="tw-flex lg:tw-justify-center tw-space-x-4 tw-overflow-x-auto">
{% for block in section.blocks %}
{%- comment -%}
This below outputs the collection name for correct collection But if you assign or capture it only renders once &
does not change
{%- endcomment -%}
{{ block.settings['menu-collection-name'] }}
<button
type="button"
#click="toggle()"
class="tw-cursor-pointer"
>
<div class="tw-min-w-[300px] sm:tw-max-w-sm tw-rounded-lg tw-p-6 tw-mb-6 tw-overflow-hidden tw-shadow">
Renders image buton to be selected
</div>
</button>
{% endfor %}
</div>
<div class="tw-container">
{% for block in section.blocks %}
{%- comment -%}
This below outputs the collection name for correct collection, But if you assign or capture it only renders once &
does not change
{%- endcomment -%}
{{ block.settings['menu-collection-name'] }}
<div
x-show="isOpen"
>
<div class="tw-mt-12 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
{% assign coll_name = block.settings['menu-collection-name'] | handleize %}
{%- if coll_name != '' -%}
{% for product in collections[coll_name].products %}
{%- render 'restaurant-menu-item', item: product -%}
{% endfor %}
{%- else -%}
<p>No menu here check the name of collection</p>
{%- endif -%}
</div>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Restaurant Menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Menu Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Menu"
}
],
"blocks": [
{
"type": "menu-link",
"name": " Menu-link",
"settings": [
{
"type": "image_picker",
"id": "link-image",
"label": "Link Image"
},
{
"type": "text",
"id": "title",
"label": "Link Title",
"default": "Menu Title"
},
{
"type": "text",
"id": "menu-collection-name",
"label": "Menu Collection Name (required)",
"info": "It should match name of collection used for menu items. Use name when collection is first set"
}
]
}
]
}
{% endschema %}
I got some help on the Shopify partner slack and wanted to share my result incase it’s helpful to others.
Maybe I was trying to kill a mosquito with a sledge hammer. From the beginning I kinda went against current dawn theme conventions mainly because I did not want to navigate to another page to view and toggle between collections.
I think a stumbling block from the beginning for me was I had this vision that no menu’s would be open until a button was clicked. Actually the way that was suggested to me resulted in a better user experience in that an initial open menu and ability to toggle between menus is quite nice for the user.
Here is what solved my problem.
In using Alpine.js to manage the state of what is rendered on the page. I initially thought all menu’s initial state should be closed, turns out.
1 menu being open is a better user experience. To accomplish this x-data is set to x-data=“{ activeTab: 1 }” x- data Alpine Docs
2 Set the click handler in button to #click=“activeTab = {{ forloop.index }}” x-on Alpine Docs
3 Set x-show to render selected menu to x-show=“activeTab == {{ forloop.index }}” x-show Alpine Docs
I've tried using "type": "url:". and apparently that only works for collections. I want to make a dynamic external link. I tried text input. Why is this one task not easy to do?
<a class="section-tiktok__card" href="{{block.settings.url}}">
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% schema %}
{
"name": "TikTok Feed",
"presets": [{
"name": "TikTok Section"
}],
"blocks": [{
"type": "html",
"limit": 5,
"name": "TikTok and Instagram Feed",
"settings": [
{
"type": "image_picker",
"id": "tiktok_bg",
"label": "Image Background"
},
{
"type": "url",
"id": "tiktok_url",
"label": "Tiktok or Instagram URL"
}
]
}]
}
{% endschema %}```
You're attempting to get a setting from a block but you haven't accessed your section blocks or assigned anything to block. Furthermore, your setting is named tiktok_url while you're using url to display it.
{% for block in section.blocks %}
<a class="section-tiktok__card" href="{{ block.settings.tiktok_url }}" {{ block.shopify_attributes }}>
<img src="{{ 'tik-play-btn.svg' | asset_url }}" alt="play video">
</a>
{% endfor %}
I am building a new page for team members. made new section for it, and try to add a team member on the panel, but can't add more than 16.
You can't, 16 is a hard limit set by Shopify. The only way around it is to utilise the same section multiple times on the page.
EDIT: Shopify last week increased the limit from 16 to 50 blocks per section and increased 20 sections to 25 sections per page.
As I have seen, you could add more than 16 blocks in one section but do not know exactly how many limited blocks. I have not found related document yet.
Yes we can add more than 16 blocks in shopify by providing max_blocks . please use this code into your section liquid file you want add these block.
{%- if section.blocks.size > 0 -%}
<ul class="brand-carousel section-padding ">
{%- for block in section.blocks -%}
<li class="item ">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url| img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{% schema %}
{
"name": "Custom image list",
"class": "index-section",
"max_blocks": 16,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
}
],
"blocks": [
{
"type": "logo_image",
"name": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Custom image list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}
i have created a component in section and write name bottom.liquid and copied code from collection-template both have same schema and created in section folder but i am only getting error in bottom.liquid
and here is my bottom.liquid code
{% paginate collection.products by 12 %}
{% assign productCount = collection.all_products_count | minus: paginate.current_offset %}
<div class=" container-fluid lemon-con ">
<div class="column-title">
<h3 class="h3 main-lemo-heading text-center">
DIRTYLEMON
</h3>
</div>
<div class="row">
<div class="col-md">
{% if section.settings.collection_nav %}
{% assign sidebarNav = section.settings.collection_nav %}
<div class="list-card mb-4">
<div class="card-header product-hidden">
<strong>{{ linklists[sidebarNav].title }}</strong>
</div>
<ul class="list-group list-group-flush">
{% for link in linklists[sidebarNav].links %}
<li class="list-group-itm">
{{ link.title }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if collection.all_tags.size > 0 and section.settings.hide_tags != true %}
<div class="list-card mb-4">
<div>
<strong>Tags</strong>
</div>
<ul class="list-group list-group-flush">
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
<li class="list-group-itm bg-primary">
{{ tag | link_to_remove_tag: tag }}
</li>
{% else %}
<li class="list-group-itm side-bar">
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
{% endpaginate %}
{% schema %}
{
"name": "bottom",
"settings": [
{
"type": "header",
"content": "Collection header"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "slider title"
},
{
"type": "checkbox",
"id": "is_full_width",
"label": "Full width",
"default": false
},
{
"type": "select",
"id": "header_align",
"options": [
{
"value": "right",
"label": "Text right"
},
{
"value": "center",
"label": "Text center"
},
{
"value": "left",
"label": "Text left"
}
],
"label": "Header alignment",
"default": "left"
},
{
"type": "range",
"id": "header_height",
"min": 50,
"max": 500,
"step": 5,
"unit": "px",
"label": "Header height",
"default": 120
},
{
"type": "header",
"content": "Sidebar"
},
{
"type": "link_list",
"id": "collection_nav",
"label": "Navigation",
"info": "Select custom menu nav for sidebar"
},
{
"type": "checkbox",
"id": "hide_tags",
"label": "Hide tags",
"default": false,
"info": "Hide tags from sidebar"
},
{
"type": "header",
"content": "Others"
},
{
"type": "paragraph",
"content": "You can add more settings here :) "
}
],
"presets": [
{
"name": "bottom",
"category": "Image"
}
]
}
{% endschema %}
both have same code but I am getting error in bottom.liquid in bottom.liquid i have copied same code on above image collection.template but i am only facing error in bottom.liquid
For why it is not working, the Shopify Docs for Global objects does not mention collection as a global object. So your code only works on Collection pages where collection object in Liquid refers to collection being viewed.
So what you can do is, use collections global object and then paginate the required collection using collection handle.
{% paginate collections['my-handle'].products by 12 %}
{% endpaginate %}
If you want to select Collection using theme Customizer, you can use setting type of Collection.
{
"type": "collection",
"id": "feature_collection",
"label": "Feature collection"
}
I am new to shopify and I am trying to show the products from a collection.
I made a section in sections and used shopify schema to display this setting.
Only the header and description is showing in the page.
How can I display all the products from the chosen collection in the page ? I've search the web all day for an answer.
This is the schema I have.
Hope someone can help me ,thank you.
<h3>{{ section.settings.title }}</h3>
<p>{{ section.settings.column_richtext }}</p>
{{ section.settings.collection | products}}
{% schema %}
{
"name": "Collection list 2",
"class": "index-section",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collection list 2"
},
{
"type": "richtext",
"id": "column_richtext",
"label": "Short Description",
"default": "<p></p>"
},
{
"id": "collection",
"type": "collection",
"label": "Chose a collection"
},
{
"type": "range",
"id": "grid",
"label": "Collections per row",
"min": 2,
"max": 4,
"step": 1,
"default": 3
}
],
"blocks": [
{
"type": "collection",
"name": "Collection 2",
"settings": [
{
"type": "collection",
"id": "collection2",
"label": "Collection 2"
}
]
}
],
"presets": [
{
"name": "Collection list 2",
"category": "Collection",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
Use this to access products:
{%- assign collection = collections[section.settings.collection] -%}
{%- for product in collection.products -%}
{{ product.title }}
{%- endfor -%}
You cannot paginate the collection object unless you're on the collection page. Using for loop as per the example above I think you can get only 50 products.
here is section code add create new section and add into related template
<div class="page-width">
{%- comment -%} {% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}
{%- endcomment -%}
{%- assign collection = collections[section.settings.collection] -%}
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}
<div class="grid grid--uniform grid--view-items">
{% for product in collection.products limit: product_limit %}
<div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height %}
</div>
{% else %}
{% for i in (1..product_limit) %}
<div class="grid__item .grid__item--{{section.id}} {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
{% include 'product-price' %}
</div>
</a>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
{% if section.settings.show_view_all %}
<hr class="hr--invisible"></hr>
<div class="text-center">
<a href="{{ collection.url }}" class="btn">
{{ 'collections.general.view_all' | t }}
</a>
</div>
{% endif %}
</div>
{% schema %}
{
"name": "Featured collection",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"id": "collection",
"type": "collection",
"label": "Collection",
},
{
"type": "range",
"id": "grid",
"label": "Products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "rows",
"label": "Rows",
"min": 1,
"max": 5,
"step": 1,
"default": 2
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show product vendors",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show 'View all' button",
"default": false
}
],
"presets": [
{
"name": "Featured collection",
"category": "Collection"
}
]
}
{% endschema %}