<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<pre></pre>
<div class="container-fluid">
<div class="row">
<h2 class="head_set">For Shopify developemnt</h2>
</div>
<h6>1)https://www.youtube.com/watch?v=oHQIkzkbDtw</h6>
<h6>2)https://shopify.github.io/liquid/basics/operators/</h6>
<ul class="side_fix">
<li>swatch.liquid</li>
<li>Schema</li>
<li>https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top</li>
</ul>
<hr/>
<b style="font-size:22px;background:#ccc;padding:25px;width:100%;display:block">Media query Format</b>
<hr/>
<p>
@media only screen and (max-width:1199px){
}</p>
<p> @media only screen and (max-width:1024px){
}</p>
<p> @media only screen and (max-width:992px){
}
<p> @media only screen and (max-width:767px){
}
</p>
<hr/>
<b style="font-size:22px;background:#ccc;padding:25px;width:100%;display:block">To assign ID through Jquery</b>
<p>$(".element").attr("id","SomeID");</p>
<hr/>
<hr/>
<b style="font-size:22px;background:#ccc;padding:25px;width:100%;display:block">On outside click menu close jquery</b>
<pre>
$(document).click(function() {
var container = $(".site-nav--has-dropdown");
if (!container.is(event.target) && !container.has(event.target).length) {
container.removeClass("site-nav--active-dropdown");
}
});
$(document).ready(function() {
$('.site-nav--has-dropdown').click(function() {
$('.site-nav--has-dropdown').removeClass("site-nav--active-dropdown");
$(this).toggleClass("site-nav--active-dropdown");
});
});
<hr/>
<b style="font-size:22px;background:#ccc;padding:25px;width:100%;display:block">Shopify Formate</b>
<hr/>
<div class=" page-width main">
<h1>{{ section.settings.heading01 }}</h1>
<div class="slider slider-nav">
{%- for block in section.blocks -%}
<div>
<img src="{{ block.settings.image | img_url:'200X200' }}"
alt="{{ block.settings.image.alt | escape }}"
>
{% comment %}<svg style="width:20px" aria-hidden="true" focusable="false" role="presentation" class="icon customicon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z" fill="#000" fill-rule="evenodd"></path></svg>
{% endcomment %}
<p>{{ block.settings.content | escape }}</p>
<span class="custom_auther">{{ block.settings.authername | escape }}</span>
</div>
{%- endfor -%}
</div>
</div>
<script>
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
{% schema %}
{
"name": "Testimonial",
"tag": "section",
"class": "spaced-section testimonial-custome",
"settings": [
{
"type": "text",
"id": "heading01",
"label": "heading"
}
],
"blocks": [
{
"type": "slide",
"name": "testimonial slider",
"limit": 1,
"settings": [
{
"type": "textarea",
"id": "content",
"label": "contents"
},
{
"type": "text",
"id": "authername",
"default": "auther name",
"label": "auther name"
},
{
"type": "image_picker",
"id": "image",
"label": "testimonialimg"
},
{
"type": "url",
"id": "link",
"label": "page link"
}
],
"limit": 5
}
],
"presets": [
{
"name": "slide",
"blocks": [
{
"type": "slide"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% schema %}
{
"name": "Text with background,
"tag":"section",
"class":"textbg123"
"settings": [
{
"type":"image_picker",
"id":"headset_image",
"label":"section logo"
},
{
"type":"url",
"id":"headset_imageurl",
"label":"section logo url"
},
{
"type":"text",
"id":"headingsection",
"label":"Add Heading"
}
],
"blocks": [
{
"type":"textbackground",
"name":"text and background",
"limit":1,
"settings": [
{
"type":"text",
"id":"perasection",
"label":"Add description"
}
],
"limit": 5
}
],
"presets": [
{
"name":"textbackground",
"blocks": [
{
"type":"textbackground"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
'
{% javascript %}
{% endjavascript %}
</pre>
</pre>
<hr/>
</div>
</body>
.head_set{display:flex;justify-content:center;margin:0 auto;border-bottom:1px solid #000;}
.side_fix{padding:25px;position:fixed;right:15px;top:0px;background:#000;height:100%;}
.side_fix li{color:yellow;font-weight:bold;text-transform:capitalize;width:300px;}
https://bootsnipp.com/user/snippets/Bxpzp#
