HOW TO ADD TESTIMONIALS TO THEMES LIKE BOUNDLESS, ETC.

hasheleyc
Excursionist
12 0 19

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!

hasheleyc
Excursionist
12 0 19

Winded up deleting line 14

jaime138
Shopify Partner
27 0 6

Thanks for the help! It worked just fine (except for line 14 which I had to remove, as someone else mentioned). Kudos

0 Likes
libbyandsmee
Tourist
3 0 1

THANKS!

JuandeGracia
New Member
1 0 0

Thank you!

 

Have you guys found a way to do this section as a carousel?

0 Likes
BelleMone
New Member
1 0 0

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

0 Likes
ThomasHauer
Tourist
4 1 1

Any idea how change the code to add pictures?

0 Likes
DumisaniT
Tourist
3 0 0

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 

0 Likes
styleyourspaced
New Member
2 0 1

Thank you so much for sharing this, you are awesome. 

0 Likes
SpiralSpiralGal
New Member
1 0 0

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 %}

0 Likes