Install Photo Carousel widget

What is a Photo Carousel Widget?

A Photo Carousel Widget displays your customer photos and reviews in an engaging, rotating format, helping showcase real customer experiences with your products.

Before You Begin: Get Your Unique Widget Code

1. Log in to your Kundello account
2. Navigate to the Widget section in the main menu
3. Click on Photo Carousel
4. 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.

Here is a screenshot that visually explains the steps:

Step-by-Step Installation Guide

You can embed Photo Carousel Widget in two ways:

1. Embed Using Custom Liquid Block
2. Embed above the footer using Theme Liquid

Installation Method 1: Embed Photo Carousel using Custom Liquid Block

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 Photo Carousel 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

1. In the theme customizer, click the "+" (Add Section) or Add Block button.
2. 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="68519a9eca55c68c72658a2a1716aac3788c211111116d6f5c3f14760fa37c9e"></div>
    

Step 6: Save and Verify the Widget

1. Click the Save button in the top-right corner of the Customizer to apply your changes.
2. Preview your store to check the Photo Carousel placement.

• Open your store and navigate to the page where the widget was added.
• Verify that the Photo Carousel widget appears and functions correctly.

Here are the screenshots that visually explain the steps:

Installation Method 2: Embed Photo Carousel above the footer using Theme Liquid

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 Photo Carousel 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 the Actions > Edit Code option.

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:

• Once inside the theme.liquid file, press Ctrl + F (Windows) or Cmd + F (Mac) to open the search bar.
• Copy and paste the following code into the search bar and press Enter:

{% section 'footer' %}

• The editor will highlight the location of the footer section. To place the widget directly before the footer, move your cursor to the line above this code.

d. Add the Photo Carousel Widget Code:

• Paste your unique Kundello widget code right before the footer section:

Here is an example Kundello code:

<div class="cr-widget" data-id="68519a9eca55c68c711cc58a2a1716aac3111111189859d46d6f5c3f14760fa37c9e"></div>

Step 3: Save and Verify

1. Click the Save button in the code editor to apply your changes.
2. Preview your store to check the Photo Carousel placement
3. Verify that the Photo Carousel appears and functions as expected

Here are the screenshots that visually explain the steps:

This process provides clear guidance on how to locate and embed the widget code right before the footer section in the theme.liquid file.