Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Hi!
I've been trying to input a testimonial section in my home page but I'm having some issues adjusting the code:
To move the testimonials are all center align instead of left align,
I'm also trying to minimize the gap between the testimonial and the author or between testimonials so they don't take up so much space.
Any help will be appreciated!
Thank you!
This is my code on the liquid section:
<section data-section-id="{{ section.id }}" data-section-type="Testimonial">
<h2>{{ section.settings.title }}</h2>
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
<div class="huratips-testimonial-container">
{%- if block.settings.quote != blank -%}<p>{{ block.settings.quote }}</p>{%- endif -%}
<br>{%- if block.settings.author != blank -%}<p><span>{{ block.settings.author }}</span> {{ block.settings.position }}</p>{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</section>
<style>
.huratips-testimonial-container {
float: center;
border: 2px solid #FFFFFF;
background-color: #FFFFFF;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.huratips-testimonial-container::after {
content: "";
clear: both;
display: table;
}
.huratips-testimonial-container img {
float: center;
margin-right: 20px;
border-radius: 50%;
}
.huratips-testimonial-container span {
float: center;
font-size: 15px;
margin-right: 15px;
}
@media (max-width: 500px) {
.huratips-testimonial-container {
text-align: center;
}
.huratips-testimonial-container img {
margin: auto;
float: center;
display: block;
}
}
</style>
{% schema %}
{
"name": "Testimonials",
"class": "index-section",
"max_blocks": 25,
"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 %}
Solved! Go to the solution
This is an accepted solution.
hello @cupcakes
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-1626166698eaa96cc8{
text-align: center;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container br{
display: none;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container{
padding: 0;
margin: 0;
}
Hello There,
Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.
Please share your store URL.
This is an accepted solution.
hello @cupcakes
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-1626166698eaa96cc8{
text-align: center;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container br{
display: none;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container{
padding: 0;
margin: 0;
}
Thank you it worked! 🙂
Hi there, can you please help me solve a similar problem - I have set up a multicolumn section and want to centre the heading "The Problem" and play around with the padding between the heading and the images. URL is https://sustainedfun.com/
Thanks in advance!
User | RANK |
---|---|
135 | |
92 | |
77 | |
69 | |
47 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022