Embedding & Publishing
Add review widgets, star ratings, and rating summaries to your Shopify storefront
Embedding & Publishing
Overview
Spectre Reviews AI uses a Shopify theme app extension to display reviews on your storefront. You add blocks in the theme editor — no code required. This page covers every block, its settings, and how to customize the look and feel.
Embedding / Publishing
Step 1: Enable the app embed
Before any review blocks will work, you need to enable the script loader:
- Go to Online Store → Themes → Customize.
- Click the App embeds icon (puzzle piece) in the left sidebar.
- Toggle on Spectre Reviews Loader.
- Click Save.
This embed loads the JavaScript and CSS that power all Spectre blocks on your storefront.
Step 2: Add blocks to your theme
Navigate to the page template where you want reviews to appear (typically the product page), click Add block, and select one of the following Spectre blocks.
Reviews block
The main reviews display. It includes a review list with sorting, pagination, and a "Write a Review" button that opens a submission form.
Block settings:
| Setting | Options | Description |
|---|---|---|
| Template | Classic, Foray, Grid | The visual style of the review cards. |
| Product | Auto-detect or manual | By default, the block shows reviews for the current product page. You can also select a specific product. |
| Reviews per page | 3–20 | How many reviews to show before pagination. |
| Grid columns | 2–4 | Number of columns when using the Grid template. |
| Enable Rich Snippets | Toggle | Add JSON-LD structured data for Google. Requires the Rich Snippets setting to be enabled in the app. |
Color settings (Classic template):
| Setting | Description |
|---|---|
| Title color | Color of the review title text. |
| Author color | Color of the author name. |
| Body color | Color of the review body text. |
| Rating color | Color of the star icons. |
| Date color | Color of the review date. |
| Border color | Border around each review card. |
| Background color | Card background. |
| Shadow color | Card drop shadow. |
Color settings (Foray template):
| Setting | Description |
|---|---|
| Text color | Color of all text. |
| Background color | Section background. |
Layout settings:
| Setting | Description |
|---|---|
| Desktop padding | Top and bottom padding on desktop. |
| Mobile padding | Top and bottom padding on mobile. |
| Custom CSS | A text field for additional CSS overrides. |
Templates
Classic — Card-based layout with avatars, borders, and shadows. Inspired by popular review apps. Best for stores that want a traditional, polished look.
Foray — Minimal, full-width layout with large typography and dark background. Best for editorial or fashion brands.
Grid — Multi-column card grid with truncated text. Best for stores with high review volume that want to show many reviews at once.
Star Rating block
A compact inline element that shows the average star rating and review count for a product. Useful in product grids, collection pages, or above the fold on product pages.
Rating Summary block
A standalone summary bar showing the average rating, total review count, and a star breakdown. Place it at the top of the reviews section or in a sidebar.
Sorting options
Customers can sort the review list using a dropdown:
| Sort option | Description |
|---|---|
| Newest | Most recent reviews first. |
| Oldest | Oldest reviews first. |
| Highest rated | 5-star reviews first. |
| Lowest rated | 1-star reviews first. |
| Most helpful | Reviews with the most upvotes first. |
Review submission form
When a customer clicks Write a Review, a modal form appears with fields for rating, title, body, name, email, order verification, and file uploads. The form respects your reCAPTCHA and auto-publish settings.
Customizing with CSS variables
If you need fine-grained control beyond the block settings, you can target these CSS custom properties in your theme's custom CSS or in the block's Custom CSS field:
--spectre-border-color
--spectre-background-color
--spectre-card-shadow-color
--spectre-author-color
--spectre-title-color
--spectre-body-color
--spectre-rating-color
--spectre-date-color
--spectre-reply-background
--spectre-reply-border
--spectre-reply-label-color
--spectre-text-color