Created
May 12, 2025 01:37
-
-
Save lanks/176647323722e4afa16b5be8269f77a0 to your computer and use it in GitHub Desktop.
Reviewcap Liquid template to display product reviews summaries on the product page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style > | |
| :root { | |
| --reviewcap-product-text-color: #1D1D1D; | |
| --reviewcap-product-bg-color: #ffffff; | |
| --reviewcap-product-accent-color: #3A21CE; | |
| --reviewcap-product-border-radius: 8px; | |
| --reviewcap-product-border-width: 1px; | |
| --reviewcap-product-border-color: {{ '#1D1D1D' | color_modify: 'alpha', 0.1 }}; | |
| --reviewcap-product-footer-color: {{ '#1D1D1D' | color_modify: 'alpha', 0.5 }}; | |
| --reviewcap-product-shadow: 0px 0px 4px {{ '#1D1D1D' | color_modify: 'alpha', 0.25 }}; | |
| --reviewcap-product-accent-shadow: 0px 0px 4px {{ '#3A21CE' | color_modify: 'alpha', 0.25 }}; | |
| } | |
| #reviewcap-product-widget { | |
| display:flex; | |
| flex-direction: column; | |
| color: var(--reviewcap-product-text-color); | |
| flex-wrap: nowrap; | |
| align-content:space-between; | |
| gap:1%; | |
| padding: 15px 10px; | |
| text-align: left; | |
| border-radius: var(--reviewcap-product-border-radius); | |
| box-shadow: var(--reviewcap-product-shadow); | |
| background-color: var(--reviewcap-product-bg-color); | |
| border-width: var(--reviewcap-product-border-width); | |
| border-style: solid; | |
| border-color: var(--reviewcap-product-border-color); | |
| margin: var(--reviewcap-product-tb-margin) 0px; | |
| } | |
| #reviewcap-product-widget .accent { | |
| color: var(--reviewcap-product-accent-color) !important; | |
| } | |
| #reviewcap-product-widget .tagline { | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--reviewcap-product-accent-color); | |
| } | |
| #reviewcap-product-widget .review-summary { | |
| font-size:1rem; | |
| } | |
| #reviewcap-product-widget .rc-footer { | |
| display: flex; | |
| flex-direction: row; | |
| font-style: italic; | |
| color: var(--reviewcap-product-footer-color) !important; | |
| font-size:0.9rem; | |
| margin-top:10px; | |
| text-decoration: none; | |
| } | |
| #reviewcap-product-widget .rc-footer a { | |
| text-decoration: none !important; | |
| color: var(--reviewcap-product-footer-color) !important; | |
| } | |
| </style> | |
| {{ 'reviewcap-widgets.css' | asset_url | stylesheet_tag }} | |
| {% assign field_key = product.id | prepend: 'published_' | append: '_product_reviews_summary' %} | |
| {% assign field_key = shop.metafields.reviewcap.shop_id | append: '_' | append: field_key %} | |
| {% if request.design_mode or product.metafields.reviewcap[field_key] %} | |
| <div id="reviewcap-product-widget" class="{% if section.settings.include_padding %}padded{% endif %}"> | |
| <div class="tagline"> | |
| Customers say | |
| </div> | |
| <div class="review-summary"> | |
| {% assign field_key = product.id | prepend: 'published_' | append: '_product_reviews_summary' %} | |
| {% assign field_key = shop.metafields.reviewcap.shop_id | append: '_' | append: field_key %} | |
| {% if product.metafields.reviewcap[field_key] != null and product.metafields.reviewcap[field_key] != '' %} | |
| {{ product.metafields.reviewcap[field_key] }} | |
| {% elsif request.design_mode %} | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus vitae ligula ut scelerisque. Donec massa ex, sodales vel nibh et, imperdiet iaculis massa. Suspendisse. | |
| {% endif %} | |
| </div> | |
| <div class="rc-footer"> | |
| Generated from customer reviews by <a href="https://reviewcap.ai?utm_source=powered_by" target="_blank">Reviewcap</a> | |
| </div> | |
| </div> | |
| {% endif %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment