I am very new to Liquid and I am trying to create an option where the user is able to enter a YouTube link and the video is not appearing when entering the link. Currently, I have another video embedded in the schema tag so that the video can appear.
Here is my current code:
<div>
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/J-sUpDMKWbc?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
Here is my code placement of the section:
<div >
{% section 'EmbedYoutube' %}
</div>
I think you got the answer for it after make some search into documentation, for future reference you can add the data dynamic like this below code.
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/{{section.settings.video_url.id}}?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
You can check more regarding the video_url here on Shopify documentation HERE
Add this code into your section liquid file and you have to enter only after embed code (eg:- J-sUpDMKWbc ) in your inputbox in admin panel
<div>
<iframe width="420" height="345" src="https://www.youtube.com/embed/{{section.settings.video_url}}">
</iframe>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "text",
"label": "Video URL",
"info": "Insert Youtube Embed URL eg:- ZY6RfVY-Zl0"
}
]
}
{% endschema %}
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 %}
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 am able to create an option in my theme to upload 2 images. These will be on a carousel as part of a homepage splash.
I have achieved this with the following code in my settings_scheme.json file:
[
{
"name": "Homepage Splash",
"settings": [
{
"type": "paragraph",
"content": "Choose images for homepage splash"
},
{
"type": "image",
"id": "slideshow_1.jpg",
"label": "Image 1"
},
{
"type": "image",
"id": "slideshow_2.jpg",
"label": "Image 2"
}
]
}
]
My question is, how do I now access these two images to display them as part of my 'homepage-splash.liquid'? Looking at other templates the code should be something like this:
{% for i in (1..2) %}
<img src='{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}'>
{% endfor %}
But this outputs nothing in html. I'm sure it is something very basic I am missing as I am new to Shopify. Please could someone advise, it will really help me develop further. Thanks, DB
Your code should look like this
{% for i in (1..2) %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
<img src="{{ image | asset_url }}"/>
{% endfor %}