Shopify embed
Awakened Self Google Reviews widget
Below is a live preview of the widget exactly as it renders at /embed. The reviews shown are clearly labelled placeholders — replace them with genuine Google reviews before publishing.
Real stories
Kind words from our community
5.049 Google reviews
“[PLACEHOLDER REVIEW 1 — NOT A REAL CUSTOMER REVIEW] Replace this text with a genuine Google review for Awakened Self.”
Google ReviewerGoogle review
Shopify Custom Liquid section
<iframe src="YOUR_PUBLISHED_LOVABLE_URL/embed" title="Awakened Self Google Reviews" loading="lazy" style="width:100%;border:0;display:block;min-height:520px;" scrolling="no"></iframe>Optional: parent resize listener
<script>
window.addEventListener("message", function (event) {
if (!event.data || event.data.type !== "awakened-self-google-reviews-resize") return;
var frame = document.querySelector('iframe[title="Awakened Self Google Reviews"]');
if (frame && event.data.height) {
frame.style.height = event.data.height + "px";
frame.style.minHeight = "0";
}
});
</script>Replace YOUR_PUBLISHED_LOVABLE_URL with this project’s published address. The resize listener is optional — without it the iframe simply keeps its minimum height.
Compact Google review badge
An additional alternative to the carousel — not a replacement. It renders at /compact and links straight to the Awakened Self Google Maps profile.
Option 1 — compact iframe
<iframe src="YOUR_PUBLISHED_LOVABLE_URL/compact" title="Awakened Self Google Reviews" loading="lazy" style="width:100%;max-width:380px;border:0;display:block;min-height:120px;" scrolling="no"></iframe>Option 2 — direct Shopify Custom Liquid (no iframe, no JavaScript)
<style>
.awakened-google-badge {
display: flex;
align-items: center;
gap: 14px;
box-sizing: border-box;
width: 100%;
min-width: 260px;
max-width: 380px;
min-height: 90px;
padding: 14px 18px;
border: 0;
border-radius: 18px;
background: #FFFDF7;
box-shadow: 0 1px 2px rgba(16, 41, 21, 0.05);
color: #102915;
font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
text-decoration: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.awakened-google-badge:hover,
.awakened-google-badge:focus-visible {
background: #FFFFFF;
box-shadow: 0 4px 14px rgba(16, 41, 21, 0.07);
}
.awakened-google-badge:focus-visible {
outline: 2px solid #F5793B;
outline-offset: 2px;
}
.awakened-google-badge__g { flex: none; width: 34px; height: 34px; }
.awakened-google-badge__body { flex: 1 1 auto; min-width: 0; }
.awakened-google-badge__title {
display: flex; align-items: center; gap: 8px;
font-size: 19px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
}
.awakened-google-badge__dot {
width: 6px; height: 6px; border-radius: 50%; background: #F5793B; flex: none;
}
.awakened-google-badge__stars {
display: flex; align-items: center; gap: 2px; margin-top: 6px; color: #E9A21B;
}
.awakened-google-badge__score {
margin-left: 6px; font-size: 12px; font-weight: 600; color: #102915;
}
.awakened-google-badge__stars svg { width: 14px; height: 14px; display: block; }
.awakened-google-badge__sub {
margin-top: 4px; font-size: 12px; font-weight: 500; color: rgba(16, 41, 21, 0.68);
}
.awakened-google-badge__arrow {
flex: none; width: 15px; height: 15px; align-self: flex-start;
color: rgba(16, 41, 21, 0.5); transition: color 0.2s ease;
}
.awakened-google-badge:hover .awakened-google-badge__arrow { color: #F5793B; }
@media (prefers-reduced-motion: reduce) {
.awakened-google-badge,
.awakened-google-badge__arrow { transition: none; }
}
</style>
<a class="awakened-google-badge"
href="https://maps.app.goo.gl/3R9tCJCe5bCRZ8Yj9"
target="_blank" rel="noopener noreferrer"
aria-label="Read Awakened Self reviews on Google">
<svg class="awakened-google-badge__g" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
<path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84a10.13 10.13 0 0 1-4.4 6.65v5.52h7.11c4.16-3.83 6.57-9.47 6.57-16.18Z"/>
<path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.32-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46Z"/>
<path fill="#FBBC05" d="M11.68 28.18A13.53 13.53 0 0 1 10.96 24c0-1.45.26-2.86.72-4.18v-5.7H4.34A21.94 21.94 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.34-5.7Z"/>
<path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.34 5.7c1.74-5.2 6.59-9.07 12.32-9.07Z"/>
</svg>
<span class="awakened-google-badge__body">
<span class="awakened-google-badge__title">
Excellent<span class="awakened-google-badge__dot" aria-hidden="true"></span>
</span>
<span class="awakened-google-badge__stars" role="img" aria-label="Five out of five stars">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 2.6l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.6 6.4 19.8l1.3-6.3L2.9 9.2l6.4-.7L12 2.6Z"/></svg>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 2.6l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.6 6.4 19.8l1.3-6.3L2.9 9.2l6.4-.7L12 2.6Z"/></svg>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 2.6l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.6 6.4 19.8l1.3-6.3L2.9 9.2l6.4-.7L12 2.6Z"/></svg>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 2.6l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.6 6.4 19.8l1.3-6.3L2.9 9.2l6.4-.7L12 2.6Z"/></svg>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M12 2.6l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.6 6.4 19.8l1.3-6.3L2.9 9.2l6.4-.7L12 2.6Z"/></svg>
<span class="awakened-google-badge__score">5.0</span>
</span>
<span class="awakened-google-badge__sub">49 Google reviews</span>
</span>
<svg class="awakened-google-badge__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M7 17 17 7"/><path d="M7 7h10v10"/>
</svg>
</a>Option 2 pastes straight into a Custom Liquid section. All styles are scoped under .awakened-google-badge so they cannot affect the rest of your theme.