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 %}
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 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 %}
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?
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'm trying to add a custom section in Shopify to allow the user to upload 2 promotional images. I'm a novice but I managed to create a custom section for 1 image but when I try it for two images in the same section the images won't display on the page after upload.
I found a few threads on here to get me to this point. See code below:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
{% schema %}
{
"name": "PromoTwo",
"blocks":[
{
"type": "block-1",
"name": "Block 1",
"settings": [
{
"type": "image_picker",
"id": "test_2",
"label": "Promo Image 1"
}
]
},
{
"type": "block-2",
"name": "Block 2",
"settings": [
{
"type": "image_picker",
"id": "test_3",
"label": "Promo Image 2"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
My goal for this section is to create a section with two side by side images that the user will be able to upload themselves.
My suspicion is that I'm doing something wrong here:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
You are trying to build something that is already present with the proper tools but the wrong way.
Sections
The main idea of a section is to provide an interactive way for the admin to update the content for a specific element.
A section has two ways to achieve this:
using the section settings
using the section blocks
Difference between section settings and blocks
The section settings are static fields that can be populated via the customize panel. Static in the sense that you can't dynamically add more without writing additional code.
On another hand blocks are the same as sections settings but they can by dynamic or you can add multiply blocks without writing additional code for each new one.
You can use both in the same section file if you like but you need to learn how to call them properly.
Syntax difference
Here is how a section settings looks like:
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
{% endschema %}
An here is how you call it:
{{ section.settings.slide_image | img_url: '1024x' | img_tag }}
Section is the main object and after that you pass the JSON objects, so it becomes section.settings.slide_image.
Here is how a block syntax looks:
{% schema %}
{
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
]
}
{% endschema %}
And here is the proper way to call it:
{% for block in section.blocks %}
{{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}
What's wrong with your code?
1) You are using section blocks but you are calling the section settings.
2) You are creating multiply block types with the same image field - there is no point to this.
3) Don't use img_url: 'medium' this deprecated. Use numbers instead. For example img_url: '1024x'.
How should your code look like
Here is how should your code look like:
{% for block in section.blocks %}
{{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}
{% schema %}
{
"name": "Promo",
"blocks": [
{
"type": "promo",
"name": "Puote",
"settings": [
{
"id": "promo_image",
"type": "image_picker",
"label": "Promo image"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
{% for block in section.blocks %}
<div class="image_box">
{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
</div>
{% endfor %}
{% schema %}
{
"name": "multi image",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "multi image"
}
],
"blocks": [
{
"type": "select",
"name": "Add Button",
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Add image"
}
]
}
],
"presets": [
{
"name": "multi image",
"category": "text"
}
]
}