Google Review by Appio is a powerful tool designed to seamlessly integrate customer reviews from Google Business Profile into your Shopify store. By displaying authentic reviews directly on your website, our app helps build trust and credibility with potential customers.
To enable the widget on your theme, you can follow the steps outlined below:
From your Shopify admin screen, go to Sales channels - Online Store.
From your current Theme, click Customize.
On the sidebar, click the App embeds icon.
Beside the app , click the toggle button to activate it.
Click Save.
Find your Google Business Profile on Google Maps.
Enter your Google Map URL or Google Place ID in the search bar -> Click Search. The result based on your search will be displayed.
Click Add Place to connect it. Once connected, you will see a preview of the reviews.
You can add the widgets to the homepage, collection page, and product page. There are 3 ways to add the widgets.
In your Appio admin panel, go to Add widget -> select a widget -> click Add widget and choose to add the widget to Home page/Collection page/Product page. The app will then redirect you to the corresponding page in theme customization with the widget already added -> click Save.
From your current Theme, click Customize.
On your Home page, click 'Add block' -> click 'App' tab and select one of the 12 widgets -> section 'Apps' with the widget inside added -> drag the section header to the desired location -> click Save.
In the top middle Menu, choose Collections/Products from dropdown list, then select default collection/product -> click 'Add block' -> click 'App' tab and select one of the 12 widgets -> drag & drop the icon into desired position to move around these widgets -> click Save.
Google Reviews by Appio offers 13 widgets and allows you to customize widgets according to your preferences.
The available widgets include:
Anchor Horizontal: The horizontal card displays the store name, average rating, and total number of reviews.
Anchor Popup 1: Displays reviews in a popup window that users can open or close.
Anchor Popup 2: Display reviews without taking users away from the main page. When you click on the rating display card, a pop-up window will appear displaying all the reviews.
Anchor Slider 1: Ratings slide horizontally, allowing viewers to scroll through them smoothly.
Anchor Slider 2: Ratings with review summary slide horizontally, allowing viewers to scroll through them.
Anchor Vertical: The vertical card shows the store name, average rating, and total number of reviews.
Brick: This layout arranges reviews in a staggered, masonry-style grid, perfect for a modern look.
Carousel 1: Multiple reviews are displayed in a rotating or sliding frame. Each slide displays 4 reviews. Summary rating is shown below the reviews, providing an overview of the average rating and the total number of reviews the store has received.
Carousel 2: Multiple reviews are displayed in a rotating or sliding frame. Each slide displays 3 reviews. Summary rating is shown to the left of the reviews.
Carousel 3: Multiple reviews are displayed in a rotating or sliding frame. Each slide will only display one review. Summary rating is shown above the reviews.
Grid: Reviews are neatly organized in a grid format, providing a clean and uniform presentation.
Grid 2: A sleek and user-friendly design with grid-style layout for displaying Google reviews on your store.
List: A straightforward list format displaying reviews one after the other, simplicity and clarity. Best for displaying longer texts.
If you’re using a vintage or older theme version, you can use the following codes to add our widgets to your desired location in the theme.
<!-- Carousel1 -->
<div class="agrs__widget">
<div class="agrs__holder agrs__carousel1"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
auto_scroll= true
slide_delay= 3
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
show_callout_layout= true
show_navigation_bar= true
max_line_review_content= 4
show_business_summary=true
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
show_business_summary_summary_rating=true
show_liked_review=true
></div>
</div>
<!-- Carousel2 -->
<div class="agrs__widget">
<div class="agrs__holder agrs__carousel2"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
auto_scroll= true
slide_delay= 3
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
show_callout_layout= true
show_navigation_bar= true
max_line_review_content= 4
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
show_business_summary_summary_rating=true
show_liked_review=true
></div>
<!-- Carousel3 -->
<div class="agrs__widget">
<div class="agrs__holder agrs__carousel3"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
auto_scroll= true
slide_delay= 3
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
show_navigation_bar= true
max_line_review_content= 4
show_business_summary=true
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_background= "#FFFFFF"
business_summary_color= "#3A454F"
show_business_summary_summary_rating=true
show_liked_review=true
></div>
</div>
<!-- Grid -->
<div class="agrs__widget">
<div class="agrs__holder agrs__grid"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
max_line_review_content= 4
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
business_summary_background= "#FFFFFF"
show_business_summary= true
show_business_summary_summary_rating=true
show_callout_layout= true
show_liked_review=true
></div>
</div>
<!-- Grid2 -->
<div class="agrs__widget">
<div class="agrs__holder agrs__plain_grid1"
title_section= 'What our customers say'
title_type='h2'
card_background_color='rgb(241, 241, 241)'
card_text_color='rgb(116, 113, 113)'
star_color='#FBBC05'
show_reviewer_avatar= 'true'
show_reviewer_name_detail= 'true'
show_review_date= 'true'
show_verified_badge= 'true'
show_review_photos= 'true'
show_leave_review_button= 'true'
button_color= '#FFFFFF'
button_background= '#4285F4'
max_line_review_content= '4'
show_business_summary_rating='true'
bussiness_summary_rating_text='Excellent!'
show_business_summary_total_review='true'
business_summary_color= '#3A454F'
business_summary_background= '#FFFFFF'
show_business_summary= 'true'
show_business_summary_summary_rating='true'
show_liked_review='true'
></div>
</div>
<!-- Brick -->
<div class="agrs__widget">
<div class="agrs__holder agrs__brick"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
business_summary_background= "#FFFFFF"
show_business_summary= true
show_business_summary_summary_rating=true
show_callout_layout= true
show_liked_review=true
></div>
</div>
<!-- List -->
<div class="agrs__widget">
<div class="agrs__holder agrs__list"
title_type=h2
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
max_line_review_content= 4
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
business_summary_background= "#FFFFFF"
show_business_summary= true
show_business_summary_summary_rating=true
show_liked_review=true
></div>
</div>
<!-- Anchor horizontal -->
<div class="agrs__widget">
<div class="agrs__holder anchor__horizontal"
location=bottom
alignment=center
show_close_button=true
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
compact = false
></div>
</div>
<!-- Anchor popup1 -->
<div class="agrs__widget">
<div class="agrs__holder anchor__popup1"
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
max_line_review_content= 4
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
business_summary_background= "#FFFFFF"
show_business_summary= true
location=bottom
alignment=center
show_close_button=true
show_business_summary_summary_rating=true
popup_background_color="#FFFFFF"
popup_text_color="#3A454F"
show_liked_review=true
compact = false
></div>
</div>
<!-- Anchor popup2 -->
<div class="agrs__widget">
<div class="agrs__holder anchor__popup2"
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
show_reviewer_avatar= true
show_reviewer_name_detail= true
show_review_date= true
show_verified_badge= true
show_review_photos= true
show_leave_review_button= true
button_color= "#FFFFFF"
button_background= "#4285F4"
max_line_review_content= 4
show_business_summary_rating=true
show_business_summary_total_review=true
business_summary_color= "#3A454F"
business_summary_background= "#FFFFFF"
show_business_summary= true
location=bottom
alignment=center
show_close_button=true
show_business_summary_summary_rating=true
popup_background_color="#FFFFFF"
popup_text_color="#3A454F"
show_liked_review=true
compact = false
></div>
</div>
<!-- Anchor slider1 -->
<div class="agrs__widget">
<div class="agrs__holder anchor__slider1"
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
location=bottom
alignment=center
show_close_button=true
auto_scroll=true
slide_delay=3
compact = false
></div>
</div>
<!-- Anchor slider2 -->
<div class="agrs__widget">
<div class="agrs__holder anchor__slider2"
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
location=bottom
alignment=center
show_close_button=true
auto_scroll=true
slide_delay=3
compact = false
></div>
</div>
<!-- Anchor vertical -->
<div class="agrs__widget">
<div class="agrs__holder anchor__vertical"
location=bottom
alignment=center
show_close_button=true
card_background_color="rgb(241, 241, 241)"
card_text_color="rgb(116, 113, 113)"
star_color="#FBBC05"
compact = false
></div>
</div>Go to Themes -> Customize.
On the home page/default collection/default product go to Apps -> Add section -> Custom Liquid -> Paste the widget code you want to add into Liquid code.
Click Save.
Once the widget is placed, click on it to further customize its settings and design, ensuring it aligns with your store's look and feel.
Our app provides several settings to help you manage and display Google reviews on your Shopify store efficiently:
Language Settings
Reviews language: Customize the language in which reviews are displayed, and ensure that your target market customers can read and understand reviews.
Customize texts: This feature allows users to modify the default text labels in the application and translate them to the desired language of the page.
Review Display Settings
Sort by: This feature allows you to organize reviews based on different criteria, such as date, rating, or relevance, helping your customers see the most important or recent feedback first.
Filter reviews by minimum rating: Filter out lower-rated reviews to display only those that meet a certain minimum rating threshold. This helps in highlighting positive customer experiences and boosting your store’s credibility.
Reviews per page: Control the number of reviews shown on each page. This setting allows you to balance between providing ample customer feedback and maintaining a clean, organized page layout.
Enable links to Google: Allow customers to leave or view reviews directly on Google by integrating clickable links within your platform.
Filter reviews by blocklist words or phrases: This allows you to automatically hide reviews containing unwanted or inappropriate content, ensuring your review section stays clean and professional.
Advanced Settings
Display AI-generated summary: AI automatically generates and displays concise summaries of reviews.
Show reviews with content only: Display only the reviews that contain written content, filtering out reviews that only have ratings without text.
Customize CSS: Modify the visual appearance of your review section by editing the CSS.
These settings offer you the flexibility to present your Google reviews in a way that best supports your brand’s image and enhances customer trust.
