hello! as I said, We need to add a small image of the costumers just below their name in the testimonial Section.
I’m using the Symmetry theme…
Is it possible? Can you help us?
this is my store link:
Topic summary
A Shopify store owner using the Symmetry theme wants to add small customer images below names in the testimonial section.\n\nInitial Responses:\n- Multiple community members offered to help, requesting the testimonial section code\n- One user shared a YouTube tutorial reference for adding images to testimonials\n- Another provided basic HTML/CSS structure for customer review images\n\nSolution Process:\n- The store owner located the testimonial section file in: Online Store > Themes > Actions > Edit Code\n- They shared the complete testimonial section code (Liquid template with styling)\n- A helper (ZestardTech) provided modified code incorporating image functionality\n\nResolution:\n- The solution worked successfully\n- The store owner confirmed: \
1 Like
HTML :
CSS:
customer-reviews {
width: 100%;
display: inline-block;
padding: 25px 0 0;
}
Hi @Mdb_Gioto ,
We do need to add the schema to add the image and add the custom code accordingly.
Let me know if you need assistance.
Thank you
Hi @Mdb_Gioto
Could you please send me the code for the testimonial section file? I will need to make changes to it.
I’m sorry, Where do I find it?
1 Like
Sorry, What is the schema?
Hello! I’m sorry, what is this code?
Hi @Mdb_Gioto ,
You can use the reference below.
https://www.youtube.com/watch?v=bJfThfRX21Y&ab_channel=AmazingLearning
Thank you
Hi @Mdb_Gioto
- In your Shopify Admin go to online store > themes > actions > edit code
- Find section > testimonial
Hi @Mdb_Gioto
Share this code with me.
{%- style -%}
{%- if section.settings.layout contains ‘image-’ and section.settings.image_shape != ‘natural’ -%}
{%- for block in section.blocks -%}
#section-id-{{ section.id }} .testimonial-{{ forloop.index }} .rimage__image {
object-position: {{ block.settings.image_alignment }};
}
{% endfor %}
{%- endif -%}
#section-id-{{ section.id }} .testimonial__blockquote {
font-size: {{ section.settings.quote_text_size_mobile }}px;
{%- if section.settings.quote_text_size_mobile >= 90 -%}
line-height: 1em;
{%- endif %}
}
@media (min-width: 768px) {
#section-id-{{ section.id }} .testimonial__blockquote {
{%- assign quote_text_size_medium = section.settings.quote_text_size | times: 0.7 | at_least: section.settings.quote_text_size_mobile -%}
font-size: {{ quote_text_size_medium }}px;
{%- if quote_text_size_medium >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
@media (min-width: 1100px) {
#section-id-{{ section.id }} .testimonial__blockquote {
font-size: {{ section.settings.quote_text_size }}px;
{%- if section.settings.quote_text_size >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
{%- endstyle -%}
{%- liquid
assign image_aspect_ratio = false
assign cover = false
if section.settings.image_shape == ‘landscape’
assign image_aspect_ratio = 1.25
assign cover = true
elsif section.settings.image_shape == ‘square’
assign image_aspect_ratio = 1.0
assign cover = true
elsif section.settings.image_shape == ‘portrait’
assign image_aspect_ratio = 0.8
assign cover = true
endif
-%}
{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}
{%- for block in section.blocks -%}
{%- endfor -%}
{% if section.settings.title != blank and section.settings.layout contains 'image-' %}
{{ section.settings.title | escape }}
{% endif %}
{%- if block.settings.star_rating > 0 -%}
{%- endif -%}
{%- for i in (1..block.settings.star_rating) -%}
{% render 'svg-star' %}
{%- endfor -%}
{%- endif -%}
{%- if block.settings.testimonial != blank -%}
{{ block.settings.testimonial | escape | newline_to_br }}
{%- if block.settings.author != blank -%}
— {{ block.settings.author | escape }}
{%- endif -%}
{% if section.settings.layout contains ‘image-’ %}
{%- if block.settings.link != blank -%}{%- endif -%}
{% endif %}
{% if block.settings.image != blank %}
{%- render 'responsive-image', image: block.settings.image, manual_image_load: true, aspect_ratio: image_aspect_ratio, cover: cover -%}
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
{% if block.settings.image_caption != blank %}
{{ block.settings.image_caption | escape }} {% endif %} {%- if block.settings.link != blank -%}{%- endif -%}{% schema %}
{
“name”: “Testimonials”,
“class”: “section-testimonials”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Customer reviews”
},
{
“type”: “select”,
“id”: “layout”,
“label”: “Layout”,
“options”: [
{
“value”: “image-left”,
“label”: “Image on left”
},
{
“value”: “image-right”,
“label”: “Image on right”
},
{
“value”: “no-image”,
“label”: “No image”
}
],
“default”: “image-right”
},
{
“type”: “checkbox”,
“id”: “text_caps”,
“label”: “Capitalize text”,
“default”: false
},
{
“type”: “range”,
“id”: “quote_text_size”,
“min”: 14,
“max”: 50,
“step”: 1,
“unit”: “px”,
“label”: “Desktop quote text size”,
“default”: 30
},
{
“type”: “range”,
“id”: “quote_text_size_mobile”,
“min”: 14,
“max”: 40,
“step”: 1,
“unit”: “px”,
“label”: “Mobile quote text size”,
“default”: 20
},
{
“type”: “select”,
“id”: “image_shape”,
“label”: “Image shape”,
“options”: [
{
“value”: “natural”,
“label”: “Natural”
},
{
“value”: “landscape”,
“label”: “Landscape (5:4)”
},
{
“value”: “square”,
“label”: “Square (1:1)”
},
{
“value”: “portrait”,
“label”: “Portrait (4:5)”
}
],
“default”: “square”
},
{
“type”: “checkbox”,
“id”: “use_alt_bg”,
“label”: “Use alternate section color”,
“default”: false
},
{
“id”: “autoplay”,
“type”: “checkbox”,
“label”: “Auto-rotate testimonials”,
“default”: true
},
{
“type”: “range”,
“id”: “autoplay_speed”,
“min”: 1,
“max”: 20,
“step”: 1,
“unit”: “s”,
“label”: “Change testimonials every”,
“default”: 5
}
],
“blocks”: [
{
“type”: “testimonial”,
“name”: “Testimonial”,
“settings”: [
{
“type”: “range”,
“id”: “star_rating”,
“min”: 0,
“max”: 5,
“step”: 1,
“label”: “Star rating”,
“default”: 5
},
{
“type”: “textarea”,
“id”: “testimonial”,
“label”: “Testimonial”,
“default”: “Add customer reviews and testimonials to showcase your store’s happy customers.”,
“info”: “For best results, keep the word count similar in each quote”
},
{
“type”: “text”,
“id”: “author”,
“label”: “Author”,
“default”: “Author’s name”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1000 x 800px recommended”
},
{
“type”: “select”,
“id”: “image_alignment”,
“label”: “Image alignment”,
“info”: “Used to keep the subject of your focus in view, if cropped to a fixed shape”,
“default”: “center center”,
“options”: [
{
“value”: “top left”,
“label”: “Top left”
},
{
“value”: “top center”,
“label”: “Top center”
},
{
“value”: “top right”,
“label”: “Top right”
},
{
“value”: “center left”,
“label”: “Middle left”
},
{
“value”: “center center”,
“label”: “Middle center”
},
{
“value”: “center right”,
“label”: “Middle right”
},
{
“value”: “bottom left”,
“label”: “Bottom left”
},
{
“value”: “bottom center”,
“label”: “Bottom center”
},
{
“value”: “bottom right”,
“label”: “Bottom right”
}
]
},
{
“type”: “text”,
“id”: “image_caption”,
“label”: “Image caption”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Image link”
}
]
}
],
“presets”: [
{
“name”: “Testimonials”,
“settings”: {},
“blocks”: [
{
“type”: “testimonial”,
“settings”: {
}
},
{
“type”: “testimonial”,
“settings”: {
}
}
]
}
]
}
{% endschema %}
1 Like
Hi @Mdb_Gioto
Take a backup of the old code, then add this code and check it.
{%- style -%}
{%- if section.settings.layout contains 'image-' and section.settings.image_shape != 'natural' -%}
{%- for block in section.blocks -%}
#section-id-{{ section.id }} .testimonial-{{ forloop.index }} .rimage__image {
object-position: {{ block.settings.image_alignment }};
}
{% endfor %}
{%- endif -%}
#section-id-{{ section.id }} .testimonial__blockquote {
font-size: {{ section.settings.quote_text_size_mobile }}px;
{%- if section.settings.quote_text_size_mobile >= 90 -%}
line-height: 1em;
{%- endif %}
}
@media (min-width: 768px) {
#section-id-{{ section.id }} .testimonial__blockquote {
{%- assign quote_text_size_medium = section.settings.quote_text_size | times: 0.7 | at_least: section.settings.quote_text_size_mobile -%}
font-size: {{ quote_text_size_medium }}px;
{%- if quote_text_size_medium >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
@media (min-width: 1100px) {
#section-id-{{ section.id }} .testimonial__blockquote {
font-size: {{ section.settings.quote_text_size }}px;
{%- if section.settings.quote_text_size >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
{%- endstyle -%}
{%- liquid
assign image_aspect_ratio = false
assign cover = false
if section.settings.image_shape == 'landscape'
assign image_aspect_ratio = 1.25
assign cover = true
elsif section.settings.image_shape == 'square'
assign image_aspect_ratio = 1.0
assign cover = true
elsif section.settings.image_shape == 'portrait'
assign image_aspect_ratio = 0.8
assign cover = true
endif
-%}
{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}
{%- for block in section.blocks -%}
{% if section.settings.title != blank and section.settings.layout contains 'image-' %}
{{ section.settings.title | escape }}
{% endif %}
{%- if block.settings.star_rating > 0 -%}
{%- for i in (1..block.settings.star_rating) -%}
{% render 'svg-star' %}
{%- endfor -%}
{%- endif -%}
{%- if block.settings.testimonial != blank -%}
> {{ block.settings.testimonial | escape | newline_to_br }}
{%- endif -%}
{%- if block.settings.author != blank -%}
— {{ block.settings.author | escape }}
{%- endif -%}
{%- if block.settings.author_image != blank -%}
{% endif %}
{% if section.settings.layout contains 'image-' %}
{% endif %}
{%- endfor -%}
{% schema %}
{
"name": "Testimonials",
"class": "section-testimonials",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Customer reviews"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"options": [
{
"value": "image-left",
"label": "Image on left"
},
{
"value": "image-right",
"label": "Image on right"
},
{
"value": "no-image",
"label": "No image"
}
],
"default": "image-right"
},
{
"type": "checkbox",
"id": "text_caps",
"label": "Capitalize text",
"default": false
},
{
"type": "range",
"id": "quote_text_size",
"min": 14,
"max": 50,
"step": 1,
"unit": "px",
"label": "Desktop quote text size",
"default": 30
},
{
"type": "range",
"id": "quote_text_size_mobile",
"min": 14,
"max": 40,
"step": 1,
"unit": "px",
"label": "Mobile quote text size",
"default": 20
},
{
"type": "select",
"id": "image_shape",
"label": "Image shape",
"options": [
{
"value": "natural",
"label": "Natural"
},
{
"value": "landscape",
"label": "Landscape (5:4)"
},
{
"value": "square",
"label": "Square (1:1)"
},
{
"value": "portrait",
"label": "Portrait (4:5)"
}
],
"default": "square"
},
{
"type": "checkbox",
"id": "use_alt_bg",
"label": "Use alternate section color",
"default": false
},
{
"id": "autoplay",
"type": "checkbox",
"label": "Auto-rotate testimonials",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Change testimonials every",
"default": 5
}
],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{
"type": "range",
"id": "star_rating",
"min": 0,
"max": 5,
"step": 1,
"label": "Star rating",
"default": 5
},
{
"type": "textarea",
"id": "testimonial",
"label": "Testimonial",
"default": "Add customer reviews and testimonials to showcase your store’s happy customers.",
"info": "For best results, keep the word count similar in each quote"
},
{
"type": "text",
"id": "author",
"label": "Author",
"default": "Author's name"
},
{
"type": "image_picker",
"id": "author_image",
"label": "Author image",
"info": "100 x 100px recommended"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1000 x 800px recommended"
},
{
"type": "select",
"id": "image_alignment",
"label": "Image alignment",
"info": "Used to keep the subject of your focus in view, if cropped to a fixed shape",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "text",
"id": "image_caption",
"label": "Image caption"
},
{
"type": "url",
"id": "link",
"label": "Image link"
}
]
}
],
"presets": [
{
"name": "Testimonials",
"settings": {},
"blocks": [
{
"type": "testimonial",
"settings": {
}
},
{
"type": "testimonial",
"settings": {
}
}
]
}
]
}
{% endschema %}
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > style.css and paste this at the bottom of the file:
.auther-wap {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
1.In your Shopify Admin, go to Online Store > Themes > Customize > Testimonials.
2.Add the image.
SS :- https://prnt.sc/q2EVkbkpQpdo , https://prnt.sc/2tsHkeGksaPq
Thank you soooo much! It’s perfect!
1 Like
Hi @Mdb_Gioto
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.