<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 ---------->
<div class="container">
<div class="row">
<h2>Shopify Schema</h2>
</div>
</div>
<pre>
<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 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>
{%- unless product == empty -%}
<script>
if (theme === undefined) {
var theme = {};
}
theme.product = {{ product | json }};
</script>
{%- endunless -%}
<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 %}
</pre>
<pre>
</pre>
</div>
svg {width:20px;}
.row h2{text-align:center;color:red;width:100%;border-bottom:1px solid;margin-bottom:50px;}
.main h1,.main h2,.main h3,div,body .main,.main p,.main span{font-size:14px;margin-left:100px;text-align:left;color:#000;}
//for checkout active on select option
<script>
$('#how-did-you-hear-about-us').change(function() {
var option =$(this).val();
//alert(option);
if(option !='') {
$('input[name="checkout"]').prop('disabled',false);
} else {
$('input[name="checkout"]').prop('disabled', true);
}
});
</script>
