Expert Opinion

A featured expert opinion section on your homepage, displaying select products accompanied by a brief profile of the expert.

Wireframe

Expert Opinion


Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

  • Read through the Introduction to Maropost Commerce Cloud Document 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.
  • The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Create a new content type

Create a new content type with the following details:

  • Name: Expert Opinion
  • Unique Code: expertopinion (make sure it's all lowercase)
  • Show in control panel menu: tick
  • Fields visible in control panel: untick all fields except for "Description 1" and rename to "Expert Description"

Step 2: Setup an Expert Opinion

  1. Open the new content type you just created (Webstore > Expert Opinion) and create a new page.
  2. Enter in the experts name, description and upload a photo using the "Main Image" field.

Step 3: Assign related products to expert

This is done the same way as assigning products to a category, either by editing each product or via the import wizard.

Step 4: Add the code into the template

Navigate to the homepage template /httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html and paste the following code where you would like the element to appear:

<!-- Expert Opinion -->
[%thumb_list type:'content' content_type:'expertopinion' limit:'1'%]
    [%param *body%]
        <section class="row products-row justify-content-center my-3" aria-label="Expert Opinion">
            <article class="col-8 col-sm-6 col-lg-12 col-xl-3 pb-2" aria-label="[@content_name@]">
                <img class="img-fluid mb-2" src="[%ASSET_URL type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/ASSET_URL%]" alt="[@content_name@]"/>
                [%if [@content_name@]%]<h3>[@content_name@]</h3>[%/if%]
                [%if [@content_description1@]%]<p>[%format type:'text' maxlength:'380' rmhtml:'1'%][@content_description1@][%/format%]</p>[%/if%]
            </article>
            [%thumb_list type:'products' template:'' filter_category:'[@content_id@]' sortby:'sortorder' limit:'3'/%]
        </section>
    [%/param%]
[%/thumb_list%]

This code reads the content type expertopinion, prints the data on that expert in a column, and proceeds to print out three more products that have been assigned to that expert in the same row. If the thumbnails on your website have been adjusted, this may require some tweaking.


Customising this Section

More information on how to customise this section can be found within the Thumb List Documentation.

Was this article useful?

Be notified when this page is updated. Optional.