Articles on: Online Store

Add more testimonial slider

This article will guide you on how to to add more testimonial slider. By following the steps below, you can have as many testimonial slides based on your preferences. That way, it can helps in increasing potential customers' confidence on your brand and products.

In this article :

Add more testimonial slider
Rename testimonial title
Adjust the testimonial circular profile picture crop size

⚠️ Kindly take note :


The recommended image size for testimonial slider is 1280 x 600px
Above all code editing, you will need to re-edit the code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
We have added an option for you to display image with original quality. Therefore, your store will be using the image with original size and format.
You can enabled it at Channels > Online Store > Customize > General



1. Add more testimonial slider



By adding more slider for testimonial slider, there are 3 files need to be edited:
settings_schema.json
settings_data.json
testimonial-section.liquid ( For Candy theme )
img-text-section.liquid ( For Lucky, X-Force, Wave & Maker theme )

Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > config > settings_schema.json

Step 2 : Look for "testimonial_slide_6" and add below code below and replace the number

📌 Note:
Can add until 20 or more, just change the number will do
If you want to have 10 testimonial sliders, you may need to repeat the steps listed below for each testimonial slider.

, { "label": "Slide 1", "type": "heading_group", "options": [ { "type": "image", "id": "testimonial_slide_1_img" }, { "label": "Slide title", "type": "text", "id": "testimonial_slide_1_title" }, { "label": "Slide content", "type": "text", "id": "testimonial_slide_1_content" }, { "label": "Slide link text", "type": "text", "id": "testimonial_slide_1_text_link" }, { "label": "Slide link", "type": "text", "id": "testimonial_slide_1_link" } ] }



Step 3 : Save

Step 4 : Go to settings_data.json file > Look for "testimonial_slide_6_img“ and add the code below

📌 Note:
Can add until 20 or more, just change the number will do
If you want to have 10 testimonial sliders, you may need to repeat the steps listed below for each testimonial slider.

"testimonial_slide_6_img": "", "testimonial_slide_6_title": "", "testimonial_slide_6_content": "", "testimonial_slide_6_text_link": "", "testimonial_slide_6_link": "",



Step 5 : Save

Step 6 :

📌 Note:
Can add until 20 or more, just change the number will do
If you want to have 10 testimonial sliders, you may need to repeat the steps listed below for each testimonial slider.

For Candy theme, you may go to testimonial-section.liquid > change the number to add more testimonial slider



For Lucky, X-Force, Wave & Maker theme, you may go to img-text-section.liquid > change the number to add more testimonial slider



Step 7 : Save

2. Rename testimonial title



Step 1 :
For Candy theme, go to EasyStore Admin > Channels > Online Store > Edit source > snippets > testimonial-section.liquid
For Lucky, X-Force, Wave & Maker theme, you may select img-text-section.liquid

Step 2 : Add the code below on top of <div class="testimonial-section-wrapper">

## Title Text





Step 3 : Insert name testimonial name that you prefer in title text





Step 4 : Save and done

3. Adjust the testimonial circular profile picture crop size





Step 1: Go to EasyStore Admin > Channels > Online Store > Edit source > theme.scss

Step 2 : Look for .profile-img-circle and adjust both 100px to higher px based on your own preferences for width & height



Step 3 : Save

Updated on: 22/09/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!