Product reviews are all the rage these days – and in order for them to convert well, they need to look good and be easy for the user to understand why they need the product or service you are reviewing.
This tutorial uses Lazy Blocks to create a custom Product Review block that has a few cool options to allow you to use it in 2 different ways – as a features list or with a pros and cons list!
You can see examples of both below.
Option 1: Single Product With Features List
Below is how the block looks on one of our own websites in a buying guide for a specific product. We do not consider this a “review” but just a recommendation for users so we just wanted to share the image and some important details for the user to help them decide if it is worth reviewing further.
You can see the features list on the bottom with checkmarks next to them.
Option 2: Single Product Review With Pros & Cons List
This is the block option we like to use if we are doing a true product review and are able to clearly show the pros and cons of the item. Below is the sample of the sample above with the pros and cons list.
This option allows you to have 2 columns – 1 for the pros and 1 for the cons and has corresponding checkmarks or x’s to give some visual pop.
Again – these are both created from the same Gutenberg block!
The Lazy Block Fields
The block has the following fields for you to use:
- Title – product title
- Title Background Color – you can select a color or add your own brand colors
- Uploaded Image – allows you to add an image from the media gallery or upload one
- Amazon Image – this will be used if you are using the code from Amazon to use as a product image
- Button Text – your call to action for the button like Buy Now on Amazon for example
- Button Link – the url for the product so users can learn more or buy
- Button Color – you can select a color or add your own brand colors
- Product Description – an editor to add some general thoughts about the product
- Pro Box – allows you to add a text field for each pro you want to add
- Con Box – allows you to add a text field for each con you want to add
- Features Box – allows you to add a text field for each feature you want to add
- Bottom Box Color – you can select a color or add your own brand colors
If you have content in the FEATURES box and the PRO/CON Boxes they will both show on the front end. If you have no content in them – they will not show.
Building A Review Block With Lazy Blocks: Step By Step
Before you do anything, you will need to have Lazy Blocks installed and activated. Once installed you can dive in and get started!
1. Adding A New Block
Go to LAZY BLOCKS then click ADD NEW. Make sure your editor is set to block editor or you will not see the fields you need to see. You should see the screenshot shown below if Lazy Blocks is ready to use.
2. Naming The Block
- In the right of the screen above click on the Block tab under the publish button.
- Enter Review – Single Product in the title box.
- Enter review-single-product in the slug block (it should auto populate after you enter the title)
- Select an icon of your choice – we selected a star
- (optional) choose a category that will hold your block we like to use Lazy Blocks
- (optional) add keywords to help you find your block, we used product and review as keywords.
- (optional) add a description to remind you what the block is for
- Click the SUPPORT toggle below the description box and make sure Multiple is turned on so you can use this block multiple times on a page
- Click Publish
3. Adding The Fields
All fields below are added by clicking the ADD CONTROL (circle with plus sign in it) area in the main part of the screen as shown above.
The options for each field will be done in the sidebar where there is a BLOCK and CONTROL tab. You will want to make sure you are on the CONTROL tab to edit each field.
Click the add control box to get started and enter the following fields.
TITLE FIELD
- Enter Title for label
- Enter title for name field
- Select Text for type
TITLE BACKGROUND COLOR
- Enter Title Background Color for label
- Enter title-background-color for name field
- Select Color Picker for type
UPLOADED IMAGE
- Enter Uploaded Image for label
- Enter uploaded-image for name field
- Select Image for type
AMAZON IMAGE
- Enter Amazon Image for label
- Enter amazon-image for name
- Select Code Editor for type
BUTTON TEXT
- Enter Button Text for name field
- Enter button-text for name field
- Select Text for type
BUTTON LINK
- Enter Button Link for name field
- Enter button-link for name field
- Select Text for type
BUTTON COLOR
- Enter Button Color for label
- Enter button-color for name field
- Select Color Picker for type
PRODUCT DESCRIPTION
- Enter Product Description for label
- Enter product-description for name field
- Select Rich Text (WYSIWYG) for type
PRO BOX
- Enter Pro Box for label
- Enter pro-box for name field
- Select Repeater for type
- Enter Add New Pro Item in add button label
- Select Yes and Collapsed by Default under collapsible rows
- In the main screen area under Pro Box click Add Child Control (click on the show child controls link to open the control area)
- Enter Pro Item for label
- Enter pro-item for name
- Select Text for type
CON BOX
- Enter Con Box for label
- Enter con-box for name field
- Select Repeater for type
- Enter Add New Con Item in add button label
- Select Yes and Collapsed by Default under collapsible rows
- In the main screen area under Con Box click Add Child Control (click on the show child controls link to open the control area)
- Enter Con Item for label
- Enter con-item for name
- Select Text for type
FEATURES BOX
- Enter Features Box for label
- Enter features-box for name field
- Select Repeater for type
- Enter Add New Feature Item in add button label
- Select Yes and Collapsed by Default under collapsible rows
- In the main screen area under Features Box click Add Child Control (click on the show child controls link to open the control area)
- Enter Feature Item for label
- Enter feature-item for name
- Select Text for type
Below is a sample image for the Features, Pro and Con Box so you can see how they should look.
BOTTOM BOX COLOR
- Enter Bottom Box Color for label
- Enter bottom-box-color for name field
- Select Color Picker for type
Click Update
Once the above is done you should now have a screen that looks something like the below.
4. Building The Code
Below your fields there is a CODE box where you will enter the code that makes the magic happen on the front end. LazyBlocks has several options for their code options, but for this one we are using what are called handlebars. Handlebars are the items that are in the {{ }} items and are simply calling the field names above.
You can simply copy the code below and add it to your Code block – then click UPDATE!
Now your block is ready to go on the front end.
<div class="block-review">
<h3 style="background-color:{{title_background_color}}">{{title}}</h3>
{{#if image}}
<center><img src="{{image.url}}" alt="{{image.alt}}"></center>
{{/if}}
{{#if amazon_image}}
<center>{{{amazon_image}}}</center>
{{/if}}
<center><a class="buttonamazon" href="{{check_price_link.url}}" target="_blank" rel="nofollow sponsored" style="background-color:{{button_color}}">{{check_price_text}} <i class="fa fa-arrow-right"></i></a></center>
<p>{{{description}}}</p>
{{#if pro_box}}
<div class="overview">
<div class="pros">
<h4>PROS</h4>
<ul>{{#each pro_box}}
<li><i class="fa fa-check"></i> {{pro_item}}</li>
{{/each}}</ul>
</div>
{{/if}}
{{#if con_box}}
<div class="bad">
<h4>CONS</h4>
<ul>{{#each con_box}}
<li><i class="fa fa-times"></i> {{con_item}}</li>
{{/each}}</ul>
</div>
</div>
{{/if}}
{{#if features}}
<div class="features">
<div class="feature-items">
<h4>FEATURES</h4>
<ul> {{#each features}}
<li><i class="fa fa-check"></i> {{feature_item}}</li>
{{/each}}</ul>
</div>
</div>
{{/if}}
<div class="bottombox" style="background-color:{{bottom_box_color}}">
<a href="{{check_price_link.url}}" target="_blank" rel="nofollow sponsored">{{check_price_text}} <i class="fa fa-arrow-right"></i></a></div>
</div>Need help customizing your website?
We can’t wait to talk about your project. Let’s set up a call.
