Before you start this tweak, it's a good idea to run through our preparation checklist below:
- Read through the Getting Started to get a better sense of how the Control Panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
Step 1: Create a new content type
Create a new content type with the following details:
- Name: Testimonials
- Unique Code: testimonials (make sure it's all lowercase)
- Show in control panel menu: tick
- Fields visible in CPanel: untick all fields except for "Description 1" and rename to "Testimonial"
Step 2: Setup a testimonial
- Open the new content type you just created (Webstore > Testimonials) and create a new page.
- Enter in the customers name and testimonial and upload a photo using the "Main Image" field.
Step 3: Open the homepage template
The homepage template can be found here
Step 4: Add the code into template
Paste the following code into the template where you would like the element to appear.
[%thumb_list type:'content' content_type:'testimonials' filter_content:'' limit:'3'%] [%param *header%] <section class="row text-center my-3" aria-label="Testimonials"> <div class="col-12"> <h2>Testimonials</h2> <div class="row align-items-center justify-content-center mb-2"> [%/param%] [%param *body%] <article class="col-12 col-lg-4" role="testimonial" aria-label="[@content_name@]"> <p>[%format type:'text' maxlength:'380' rmhtml:'1'%][@content_description1@][%/format%]</p> [%if [@content_name@]%]<strong><i class="fa fa-user mr-2"></i> [@content_name@]</strong>[%/if%] </article> [%/param%] [%param *footer%] </div> </div> </section> [%/param%] [%/thumb_list%]
Customising this Section
More information on how to customise this section can be found within the Thumb List Documentation.