Skip to main content

🛠️ Add your first widgets

Put your reviews on your store in a few minutes: switch Quoli on, add stars and reviews to your product page, check they're live, and where every other widget goes.

Your reviews reach shoppers through widgets that live in your theme. Quoli opens your theme editor with each one already in place, so adding a widget takes a click, a drag and Save. Start with the two that matter most: stars under your product title, and the full reviews section below it.

Time: About five minutes

Where: Settings ▸ Widgets in Quoli, then your theme editor

Needs: The Quoli Core Script app embed, on in your live theme

Plans: Every plan

A product page as the stars appear under the title, then the reviews section below


Switch Quoli on first

The Quoli app embed is not active banner with Activate app embed numbered

➀ Activate app embed. Opens your theme editor at App embeds with Quoli Core Script switched on.

The Quoli Core Script runs the review and question forms, your Brand colors and fonts, star ratings on collection pages, code snippets and the All Reviews Page. Without it, the widget blocks you place still show, but those parts don't work.

  1. Click Activate app embed on the banner, or on the setup guide's first step on Home.

  2. In your theme editor, check that Quoli Core Script is on under App embeds, and click Save.

The banner shows on Home and in Settings ▸ Widgets while the app embed is off in your live theme, and goes away once it's on.


Add a widget

The three product page widgets in Settings ▸ Widgets with their parts numbered

➀ Status. Inactive until the widget is in your live theme.

➁ Add to theme. Opens your theme editor on the right page with the widget already added.

Every widget in the library has the same button. You move the widget into place and save, and nothing changes for shoppers until you click Save.

Stars under your product title

  1. In Settings ▸ Widgets, find Product Star Ratings and click Add to theme. Your theme editor opens on a product page with the block in your product information.

  2. Drag it right under the product title and click Save.

The stars show on every product page, with the review count.

Reviews on your product page

  1. Find PDP Reviews Widget and click Add to theme. Your theme editor opens on a product page with the widget added as a new section.

  2. Drag the section into place, usually right under the product details, and click Save.

Rather show photos first? Add the Grid Reviews Widget instead. It's the same full reviews section as a photo wall, so use one or the other, not both.


Check it's live

Product Star Ratings and the PDP Reviews Widget reading Active

➀ Active. The widget is in your live theme, so shoppers see it.

Quoli reads your live theme each time you open Settings ▸ Widgets. Open a product page on your store to see the widgets for yourself. The setup guide ticks Publish reviews on product pages and Display stars below product titles on its own.


In the theme editor

  • Move a widget. Drag it up or down in the sidebar.

  • Change how it looks. Click it, and its settings open beside the preview. Each widget's own article lists them all.

  • See it on a product with no reviews yet. The preview fills the widget with sample reviews, so you can judge the layout. Shoppers never see them.

  • Remove a widget. Click it, choose Remove block or Remove section, and click Save.

  • Turn off a site-wide widget. Switch it off under App embeds and click Save.

Colors and fonts aren't in the theme editor: every widget takes them from Settings ▸ Brand in Quoli.


Where every widget goes

  • Product Star Ratings. Add to theme opens: A product page. It lands: In the product information. Drag it under the title.

  • PDP Reviews Widget or Grid Reviews Widget. Add to theme opens: A product page. It lands: As a new section.

  • Nuggets Slider. Add to theme opens: A product page. It lands: In the product information. Drag it above the buy buttons.

  • Home Carousel, all eight styles. Add to theme opens: Your home page. It lands: As a new section.

  • Rating Badge and Trust Bar. Add to theme opens: Your home page. It lands: As a new section. They fit in your header or footer too.

  • Cart Reviews. Add to theme opens: Your cart page. It lands: In the cart. Drag it under the cart items.

  • All Reviews Page. Add to theme opens: A page. It lands: On your default page template. Its article shows how to give it a page of its own.

  • Popup Widget and Reviews Sidebar. Add to theme opens: App embeds. It lands: Switched on across your store.

  • Collection Ratings. Add to theme opens: Nothing to open. It lands: A line of code in your product card, from its Instructions.

On Plus stores, Checkout Reviews and Checkout Star Ratings show your reviews and each item's stars in checkout's order summary: see Checkout Reviews.

How widgets work has every widget with a picture of each.


A theme that isn't live yet

Add to theme always opens your live theme. To build on a draft theme, open that theme's editor yourself, then add each widget from Add block or Add section ▸ Apps, where Quoli's widgets are listed by name. Switch on Quoli Core Script under App embeds there too.

Statuses in Quoli read your live theme, so your widgets turn Active the moment you publish the new theme.


A theme without app blocks

Some older themes can't take app blocks. Paste a widget's code instead: Add widgets with code has the snippet for each one and where it goes.


💡 Tip: Once the stars and reviews are in, open a product page on your phone. That's where most shoppers will see them first.

Did this answer your question?