Install Wall Of Love widget
What is a Wall of Love widget?
A Wall of Love widget creates a dedicated space to showcase your customer reviews and testimonials in an engaging display format. Depending on your needs, you can install this widget in three different ways.
Note: Choose the installation method that best suits your needs:
- Method 1 (Dedicated Page): Best for showcasing all reviews in one place
- Method 2 (Custom Liquid): Best for flexible placement on specific pages
- Method 3 (Above Footer): Best for showing reviews across all pages
Before You Begin: Get Your Unique Widget Code
- Log in to your Kundello account
- Navigate to the Widget section in the main menu
- Click on Wall of Love widget
- Copy your unique widget code
- This code is specific to your store and account
- It will look similar to the example code, but it will have your unique identifier
Important Note
- Do NOT use the example code shown below
- Always use the code from your own Kundello account
- Each store has a different code that links to your specific reviews and ratings
Installation Method 1: Create a Dedicated Page
Please remember to install your unique Kundello widget code instead of the example code provided below.
Step 1: Find your unique Kundello widget code:
a. Log in to your Kundello dashboard
b. Navigate to the Widgets section from the main menu.
c. Click on Wall of Love Widget
d. Copy your unique widget code
- This code is specific to your store and account.
- It will look similar to the example code, but it will have your unique identifier.
Step 2: Create a New Page
- Log in to your Shopify admin panel
- Go to Online Store > Pages
- Click Add Page button
- Enter a title for your page (e.g., "Wall of Love")
Step 3: Embed the "Wall of Love" widget code
- In the content editor, click the </> Show HTML icon
- Paste your unique Kundello widget code:
Here is an example Kundello code:
<div class="cr-widget" data-id="4a8596a7790b5ca9e067da401c01899812488fff55684448121854d1a0158e7678a"></div>
Step 4: Configure and Save
- Set your page visibility:
- Visible: The page goes live immediately
- Hidden: The page remains unpublished until you manually publish it
- Schedule: Choose a future publish date for the page
- Click the Save button at the top right corner
Step 5: Add a Link to the Wall of Love Page in the Navigation Menu
- Go to Online Store > Navigation
- Choose the menu where you want to add the link (e.g., Main Menu or Footer Menu).
- Click on the Add Menu Item button
- Enter "Wall of Love" as the title for the menu item
- In the Link field, select the Wall of Love Page you created earlier.
- Click the Save button to apply the changes.
Step 6: Preview the Changes
- Navigate to your store’s front end and refresh the page.
- Check the menu where you added the Wall of Love link.
- Click on the link to verify it navigates to the Wall of Love page with the widget displayed correctly.
Your Wall of Love page and link are now successfully integrated into your Shopify store!
Here are the screenshots that visually explain the steps:
Installation Method 2: Using Custom Liquid Block
Here’s how to add the Wall of Love Widget using a Custom Liquid Block in Shopify:
Please remember to install your unique Kundello widget code instead of the example code provided below.
Step 1: Find your unique Kundello widget code
a. Log in to your Kundello dashboard
b. Navigate to the Widgets section from the main menu.
c. Click on Wall of Love Widget
d. Copy your unique widget code
- This code is specific to your store and account.
- It will look similar to the example code, but it will have your unique identifier.
Step 2: Open the Shopify Theme Customizer
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Find your active theme and click the Customize button.
Step 3: Navigate to the Desired Page
- In the theme customizer, use the left-side menu to navigate to the page where you want the widget to appear. For example, go to your homepage, product page, or any other specific page.
Step 4: Add a Custom Liquid Block
- In the theme customizer, click the "+" (Add Section) or Add Block button.
- Select Custom Liquid from the available options.
Step 5: Embed the Widget Code
- In the Custom Liquid editor, paste your unique Kundello widget code:
Here is an example Kundello code:
<div class="cr-widget" data-id="4a8596a7790b5ca9e067da401c01899812488fff55684448121854d1a0158e7678a"></div>
Step 6: Save and Verify the Widget
- Click the Save button in the top-right corner of the Customizer to apply your changes
- Open your store and navigate to the page where the widget was added.
- Ensure the Wall of Love Widget appears and functions as expected.
Here are the screenshots that visually explain the steps:
Installation Method 3: Above Footer Installation
Here’s how to add the Wall of Love Widget above the footer using Theme Liquid:
Please remember to install your unique Kundello widget code instead of the example code provided below.
Step 1: Find your unique Kundello widget code
a. Log in to your Kundello dashboard
b. Navigate to the Widgets section from the main menu.
c. Click on Wall of Love Widget
d. Copy your unique widget code
- This code is specific to your store and account.
- It will look similar to the example code, but it will have your unique identifier.
Step 2: Embed the Photo Carousel Widget into Your Shopify Store
a. Access the Shopify Theme Editor:
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Locate your active theme and click on Actions > Edit Code.
b. Open the theme.liquid
File:
- In the theme code editor, locate and open the
theme.liquid
file under the Layout folder.
c. Locate the Placement Area:
- Inside the
theme.liquid
file, press Ctrl + F (Windows) or Cmd + F (Mac) to open the search bar. - Search for the following code snippet:
{% section 'footer' %}
- The editor will highlight the footer section. To place the widget directly before the footer, move your cursor to the line above this code.
d. Add the Wall of Love Widget Code:
- Paste your unique Kundello Wall of Love Widget code snippet:
Here is an example Kundello code:
<div class="cr-widget" data-id="4a8596a7790b5ca9e067da401c01899812488fff55684448121854d1a0158e7678a"></div>
Step 3: Save and Verify the Widget
- Click the Save button in the top-right corner of the code editor to apply your changes
- Open your store to ensure the Wall of Love Widget appears and functions as expected.
Here are the screenshots that visually explain the steps:
Troubleshooting Tips
- If you don't see the widget, try refreshing your store page
- Make sure you've pasted the code exactly as provided
- Check that you've chosen the right location for your needs
- If you're unsure, ask your developer for help
✅ You're done! The Wall of Love Widget should now be visible in your chosen location.