All things Shopify and commerce
Hey! Spent 20 minutes researching and finally figured it out! My store (www.missyave.com) uses the Boundless theme. I used the Debut theme before which has the testimonal section already pre-set when customizing the store, however I love Boundless and did not want to go back so I looked for a way to add the testimonials to my code.
Here's how:
Go to Online Store > Themes > Actions > Edit Code
Go to Sections > Add a new section > Name it "testimonials" > Create section
DELETE EVERYTHING that you see in you new section
Copy & Paste this:
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="quotes">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}
{% if section.blocks.size > 0 %}
<div class="quotes-wrapper">
<div class="quotes-slider" id="Quotes-{{ section.id }}" data-count="{{ section.blocks.size }}">
{% for block in section.blocks %}
<div class="quotes-slide--{{ block.id }}" {{ block.shopify_attributes }}>
<blockquote class="quotes-slider__text text-center">
<span class="quote-icon">{% include 'icon-quote' %}</span>
{% if block.settings.quote != blank %}
<div class="rte-setting">{{ block.settings.quote }}</div>
{% endif %}
{% if block.settings.author != blank %}
<cite>{{ block.settings.author | escape }}</cite>
{% endif %}
</blockquote>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
{% schema %}
{
"name": "Testimonials",
"class": "index-section",
"max_blocks": 9,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Testimonials"
}
],
"blocks": [
{
"type": "quote",
"name": "Testimonial",
"settings": [
{
"type": "richtext",
"id": "quote",
"label": "Text",
"default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type": "text",
"id": "author",
"label": "Author",
"default": "Author's name"
}
]
}
],
"presets": [
{
"name": "Testimonials",
"category": "Text",
"blocks": [
{
"type": "quote"
},
{
"type": "quote"
},
{
"type": "quote"
}
]
}
]
}
{% endschema %}
Save
Go to Online Store > Themes > Actions > Customize (you should now be on the screen where you customize your web site)
Scroll down > Add section > Where you see TEXT you should see "testimonials"
You're welcome (: hope this works for you too!
Shop www.missyave.com
Get 40% off for reading this article use code COMS40 thank you so much!
Winded up deleting line 14
Heyyy Hi I am still not able to do it.. I mean remove line 14, could you tell me how do I do that?
Thanks
When you are looking at that section of code you will see line numbers on the left side find line 14 and delete it like you would text, then save.
Hey, Thanks for that but every time I do this I am getting this error. I think I messed it up somewhere. Now as soon I add a section "Testimonials" I see this error
New schema is incompatible with the current setting value. Invalid value for type in block '1624944937e9c83428-0'. Type must be defined in schema..New schema is incompatible with the current setting value. Invalid value for type in block '1624944937e9c83428-1'. Type must be defined in schema..New schema is incompatible with the current setting value. Invalid value for type in block '1624944937e9c83428-2'. Type must be defined in schema.
Thanks.. I need to get rid of this first
Hello,
I followed the steps on adding the code to add the testimonials and It worked, but is there any way I can make them go automatic horizontally?
I found this at debut theme which i really like but anyone knows if we can copy the code from debut theme onto other theme? i like the small dot below.
Thanks for the help! It worked just fine (except for line 14 which I had to remove, as someone else mentioned). Kudos
THANKS!
Thank you!
Have you guys found a way to do this section as a carousel?
@JuandeGracia wrote:Thank you!
Have you guys found a way to do this section as a carousel?
Did anyone find this out?
Hi,
You said to DELETE EVERYTHING that you see in you new section. I’m lost can someone tell me where the new section is.
Thanks
Any idea how change the code to add pictures?
Worked like a charm on my Brooklyn theme. Well done!
Delete line 14 of code before even adding this section on your page on the front-end.
Thanks, @hasheleyc
Does "line 14" include the spaces? If not, it will be the second of these; if so, it will be the first. Thanks for your help!
<span class="quote-icon">{% include 'icon-quote' %}</span>
{% if block.settings.quote != blank %}
Thank you so much for sharing this, you are awesome.
I want to change the background of this section to black and text to white. Please can you guide me how to do it.
hey how can i change to body text size off this template. its like im able to change the <h2> but not the text size. what line of this template is it located on??
Hey I did it and it worked like a charm!
but do you know how to convert it to a slider ??
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023