Solved

Adding a small image in testimonial Section

Mdb_Gioto
Excursionist
31 0 11

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:

https://gioto-1308.myshopify.com/

 

Screenshot 2024-05-17 at 12.22.14.png

Accepted Solution (1)
ZestardTech
Shopify Expert
5603 1019 1346

This is an accepted solution.

Hi @Mdb_Gioto 
Take a backup of the old code, then add this code and check it.

 

 

<div id="section-id-{{ section.id }}"
class="{% if section.settings.use_alt_bg %}use-alt-bg fully-padded-row--medium{% else %}fully-spaced-row--medium{% endif %}"
data-section-type="testimonials">

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

<div class="container" data-cc-animate="cc-fade-in-up" data-cc-animate-delay="0.2s">
<div class="testimonial-list testimonial-list--{{ section.settings.layout }} testimonial-list--{% if section.settings.layout contains 'image-' %}with-images{% else %}without-images{% endif %}"
data-testimonial-count="{{ section.blocks.size }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplay-speed="{{ section.settings.autoplay_speed }}000">
{% if section.settings.title != blank %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial-list__inner">
{%- for block in section.blocks -%}
<div class="testimonial testimonial-{{ forloop.index }}" {{ block.shopify_attributes }}>
<div class="testimonial__column testimonial__column--text">
{% if section.settings.title != blank and section.settings.layout contains 'image-' %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial__content">
{%- if block.settings.star_rating > 0 -%}
<div class="testimonial__star-rating heading-font">
{%- for i in (1..block.settings.star_rating) -%}
<span class="testimonial__star">{% render 'svg-star' %}</span>
{%- endfor -%}
</div>
{%- endif -%}

{%- if block.settings.testimonial != blank -%}
<div class="testimonial__text">
<blockquote class="testimonial__blockquote{% if section.settings.text_caps %} testimonial__blockquote--caps{% endif %} heading-font">{{ block.settings.testimonial | escape | newline_to_br }}</blockquote>
</div>
{%- endif -%}
<div class="auther-wap">
{%- if block.settings.author != blank -%}
<div class="testimonial__author">
&mdash; {{ block.settings.author | escape }}
</div>
{%- endif -%}
{%- if block.settings.author_image != blank -%}
<div class="author-image">
<img src="{{ block.settings.author_image | img_url: '50x50' }}" />
</div>
{% endif %}
</div>
</div>
</div>

{% if section.settings.layout contains 'image-' %}
<div class="testimonial__column testimonial__column--image">
<figure class="testimonial__image-with-caption">
{%- if block.settings.link != blank -%}<a class="testimonial__image-with-caption__link" href="{{ block.settings.link }}">{%- endif -%}
<div class="testimonial__image-wrapper">
{% if block.settings.image != blank %}
{%- render 'responsive-image', image: block.settings.image, manual_image_load: true, aspect_ratio: image_aspect_ratio, cover: cover -%}
{% else %}
<div class="placeholder-image" style="padding-top:{{ 100.0 | divided_by: image_aspect_ratio | round }}%">{{ 'image' | placeholder_svg_tag }}</div>
{% endif %}
</div>

{% if block.settings.image_caption != blank %}
<figcaption class="testimonial__image-with-caption__caption{% if block.settings.link != blank %} underline{% endif %}">
{{ block.settings.image_caption | escape }}
</figcaption>
{% endif %}
{%- if block.settings.link != blank -%}</a>{%- endif -%}
</figure>
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
<div class="testimonial-list__controls"></div>
</div>
</div>
</div>

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

 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. 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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 14 (14)

DeepVyas
Shopify Partner
730 6 6

HTML :
<div class="customer-reviews">
<img src="img/testimonial-client-image.jpg" alt="">

</div>

CSS: 
customer-reviews {
width: 100%; 
display: inline-block; 
padding: 25px 0 0;
}

 

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com
Mdb_Gioto
Excursionist
31 0 11

Hello! I'm sorry, what is this code?

LuffyOnePiece
Shopify Partner
603 86 103

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
Mdb_Gioto
Excursionist
31 0 11

Sorry, What is the schema?

ZestardTech
Shopify Expert
5603 1019 1346

Hi @Mdb_Gioto 

Could you please send me the code for the testimonial section file? I will need to make changes to it.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mdb_Gioto
Excursionist
31 0 11

I'm sorry, Where do I find it?

LuffyOnePiece
Shopify Partner
603 86 103

Hi @Mdb_Gioto ,

 

You can use the reference below.

 

https://www.youtube.com/watch?v=bJfThfRX21Y&ab_channel=AmazingLearning

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
ZestardTech
Shopify Expert
5603 1019 1346

Hi @Mdb_Gioto 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find section > testimonial

SS :- https://prnt.sc/6uK4aE8d9ePY

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mdb_Gioto
Excursionist
31 0 11

OK, I'm inside the testimonial section, where do I find the code?

Screenshot 2024-05-17 at 13.04.44.png

ZestardTech
Shopify Expert
5603 1019 1346

Hi @Mdb_Gioto 

Share this code with me.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mdb_Gioto
Excursionist
31 0 11

<div id="section-id-{{ section.id }}"
class="{% if section.settings.use_alt_bg %}use-alt-bg fully-padded-row--medium{% else %}fully-spaced-row--medium{% endif %}"
data-section-type="testimonials">

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

<div class="container" data-cc-animate="cc-fade-in-up" data-cc-animate-delay="0.2s">
<div class="testimonial-list testimonial-list--{{ section.settings.layout }} testimonial-list--{% if section.settings.layout contains 'image-' %}with-images{% else %}without-images{% endif %}"
data-testimonial-count="{{ section.blocks.size }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplay-speed="{{ section.settings.autoplay_speed }}000">
{% if section.settings.title != blank %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial-list__inner">
{%- for block in section.blocks -%}
<div class="testimonial testimonial-{{ forloop.index }}" {{ block.shopify_attributes }}>
<div class="testimonial__column testimonial__column--text">
{% if section.settings.title != blank and section.settings.layout contains 'image-' %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial__content">
{%- if block.settings.star_rating > 0 -%}
<div class="testimonial__star-rating heading-font">
{%- for i in (1..block.settings.star_rating) -%}
<span class="testimonial__star">{% render 'svg-star' %}</span>
{%- endfor -%}
</div>
{%- endif -%}

{%- if block.settings.testimonial != blank -%}
<div class="testimonial__text">
<blockquote class="testimonial__blockquote{% if section.settings.text_caps %} testimonial__blockquote--caps{% endif %} heading-font">{{ block.settings.testimonial | escape | newline_to_br }}</blockquote>
</div>
{%- endif -%}

{%- if block.settings.author != blank -%}
<div class="testimonial__author">
&mdash; {{ block.settings.author | escape }}
</div>
{%- endif -%}
</div>
</div>

{% if section.settings.layout contains 'image-' %}
<div class="testimonial__column testimonial__column--image">
<figure class="testimonial__image-with-caption">
{%- if block.settings.link != blank -%}<a class="testimonial__image-with-caption__link" href="{{ block.settings.link }}">{%- endif -%}
<div class="testimonial__image-wrapper">
{% if block.settings.image != blank %}
{%- render 'responsive-image', image: block.settings.image, manual_image_load: true, aspect_ratio: image_aspect_ratio, cover: cover -%}
{% else %}
<div class="placeholder-image" style="padding-top:{{ 100.0 | divided_by: image_aspect_ratio | round }}%">{{ 'image' | placeholder_svg_tag }}</div>
{% endif %}
</div>

{% if block.settings.image_caption != blank %}
<figcaption class="testimonial__image-with-caption__caption{% if block.settings.link != blank %} underline{% endif %}">
{{ block.settings.image_caption | escape }}
</figcaption>
{% endif %}
{%- if block.settings.link != blank -%}</a>{%- endif -%}
</figure>
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
<div class="testimonial-list__controls"></div>
</div>
</div>
</div>

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

ZestardTech
Shopify Expert
5603 1019 1346

This is an accepted solution.

Hi @Mdb_Gioto 
Take a backup of the old code, then add this code and check it.

 

 

<div id="section-id-{{ section.id }}"
class="{% if section.settings.use_alt_bg %}use-alt-bg fully-padded-row--medium{% else %}fully-spaced-row--medium{% endif %}"
data-section-type="testimonials">

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

<div class="container" data-cc-animate="cc-fade-in-up" data-cc-animate-delay="0.2s">
<div class="testimonial-list testimonial-list--{{ section.settings.layout }} testimonial-list--{% if section.settings.layout contains 'image-' %}with-images{% else %}without-images{% endif %}"
data-testimonial-count="{{ section.blocks.size }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplay-speed="{{ section.settings.autoplay_speed }}000">
{% if section.settings.title != blank %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial-list__inner">
{%- for block in section.blocks -%}
<div class="testimonial testimonial-{{ forloop.index }}" {{ block.shopify_attributes }}>
<div class="testimonial__column testimonial__column--text">
{% if section.settings.title != blank and section.settings.layout contains 'image-' %}
<div class="subheading">{{ section.settings.title | escape }}</div>
{% endif %}

<div class="testimonial__content">
{%- if block.settings.star_rating > 0 -%}
<div class="testimonial__star-rating heading-font">
{%- for i in (1..block.settings.star_rating) -%}
<span class="testimonial__star">{% render 'svg-star' %}</span>
{%- endfor -%}
</div>
{%- endif -%}

{%- if block.settings.testimonial != blank -%}
<div class="testimonial__text">
<blockquote class="testimonial__blockquote{% if section.settings.text_caps %} testimonial__blockquote--caps{% endif %} heading-font">{{ block.settings.testimonial | escape | newline_to_br }}</blockquote>
</div>
{%- endif -%}
<div class="auther-wap">
{%- if block.settings.author != blank -%}
<div class="testimonial__author">
&mdash; {{ block.settings.author | escape }}
</div>
{%- endif -%}
{%- if block.settings.author_image != blank -%}
<div class="author-image">
<img src="{{ block.settings.author_image | img_url: '50x50' }}" />
</div>
{% endif %}
</div>
</div>
</div>

{% if section.settings.layout contains 'image-' %}
<div class="testimonial__column testimonial__column--image">
<figure class="testimonial__image-with-caption">
{%- if block.settings.link != blank -%}<a class="testimonial__image-with-caption__link" href="{{ block.settings.link }}">{%- endif -%}
<div class="testimonial__image-wrapper">
{% if block.settings.image != blank %}
{%- render 'responsive-image', image: block.settings.image, manual_image_load: true, aspect_ratio: image_aspect_ratio, cover: cover -%}
{% else %}
<div class="placeholder-image" style="padding-top:{{ 100.0 | divided_by: image_aspect_ratio | round }}%">{{ 'image' | placeholder_svg_tag }}</div>
{% endif %}
</div>

{% if block.settings.image_caption != blank %}
<figcaption class="testimonial__image-with-caption__caption{% if block.settings.link != blank %} underline{% endif %}">
{{ block.settings.image_caption | escape }}
</figcaption>
{% endif %}
{%- if block.settings.link != blank -%}</a>{%- endif -%}
</figure>
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
<div class="testimonial-list__controls"></div>
</div>
</div>
</div>

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

 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. 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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Mdb_Gioto
Excursionist
31 0 11

Thank you soooo much! It's perfect!

ZestardTech
Shopify Expert
5603 1019 1346

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing