Liquid, JavaScript, themes, sales channels
How can I create a section just like this please that I can embed three times in my about page:
Thanks a million
Solved! Go to the solution
This is an accepted solution.
Hii
this is a simple Block code you can add an extra field as your requirements
{%for block in section.blocks%}
<div>
<div class="card">
<div class="card-body text-center">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" />
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p class="card-text">{{block.settings.testi-text}}</p>
</div>
</div>
</div>
{%endfor%}
{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}
{% endschema %}
This is an accepted solution.
{%for block in section.blocks%}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="inline">
<div class="one">
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p>{{block.settings.testi-text}}</p>
</div>
<div class="two">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" class="img"/>
</div>
</div>
{%endfor%}
{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}
{% endschema %}
<style>
#inline{
width:100%;
height:auto;
padding: 0px 12% 0px 12%;
display:flex;
}
.one {
width:50%;
height:auto;
background-color:#eee;
padding:20px;
}
.two{
width:50%;
height:auto;
background-color:#eee;
padding:20px;
}
.img {
width:inherit;
height: auto;
}
</style>
This is an accepted solution.
Hii
this is a simple Block code you can add an extra field as your requirements
{%for block in section.blocks%}
<div>
<div class="card">
<div class="card-body text-center">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" />
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p class="card-text">{{block.settings.testi-text}}</p>
</div>
</div>
</div>
{%endfor%}
{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}
{% endschema %}
hi,
Many thanks for your answer but the outcome is completely different from what I wanted as you can see below from the screenshot:
I need to divide a block in two where 50% is text and the other picture all responsive as shown by the 1st picture above.
Cheers
This is an accepted solution.
{%for block in section.blocks%}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="inline">
<div class="one">
<h3 class="card-title py-2">{{block.settings.testi-title}}</h3>
<p>{{block.settings.testi-text}}</p>
</div>
<div class="two">
<img src="{{ block.settings.testi-img | img_url: 'small' }}" class="img"/>
</div>
</div>
{%endfor%}
{% schema %}
{
"name":"Custom Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Testimonial Title",
"default":"Testimonial"
}
],
"blocks":[
{
"type":"quote",
"name":"Testimonial",
"settings":[
{
"type":"text",
"id":"testi-title",
"label":"Author",
"default":"mycodemagic"
},
{
"type":"richtext",
"id":"testi-text",
"label":"Text",
"default":"<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type":"image_picker",
"id":"testi-img",
"label":"Logo image"
}
]
}
],
"presets":[
{
"name":"New Testimonials",
"category":"Text",
"blocks":[
{
"type":"quote"
},
{
"type":"quote"
},
{
"type":"quote"
}
]
}
]
}
{% endschema %}
<style>
#inline{
width:100%;
height:auto;
padding: 0px 12% 0px 12%;
display:flex;
}
.one {
width:50%;
height:auto;
background-color:#eee;
padding:20px;
}
.two{
width:50%;
height:auto;
background-color:#eee;
padding:20px;
}
.img {
width:inherit;
height: auto;
}
</style>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024