Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • Understanding the Liquid Block in Featured Collection - Blocks
  • Adding Review Apps
  • Best Practices for Featured Collection - Blocks
  • Troubleshooting Common Issues
  • Advanced Usage
  • Styling Tips
  1. Fundamentals
  2. Section Settings
  3. Featured collection - blocks

How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps

When customizing your Featured Collection - Blocks section in Design Packs, you may want to integrate third-party review apps or custom code that requires product-specific information. The Liquid block provides a powerful way to accomplish this. Let's explore how to use it effectively.

Understanding the Liquid Block in Featured Collection - Blocks

The Liquid block allows you to insert custom HTML, JavaScript, and Liquid code into your product cards. One of its most powerful features is the ability to access product data through special placeholders.

Available Product Placeholders

The Featured Collection - Blocks section's Liquid block supports several product-specific placeholders:

  • [[ product.id ]] - The product's unique identifier

  • [[ product.handle ]] - The product's handle/URL slug

  • [[ product.url ]] - The full product URL

  • [[ product.description ]] - The product description

  • [[ product.metafields.reviews.rating_count ]] - Review count metafield

  • [[ product.metafields.reviews.rating.value ]] - Review rating metafield

Adding Review Apps

Example 1: JudgeMe Reviews

Here's how to add JudgeMe review stars to your product cards:

  • In your Featured Collection - Blocks section, add a new block

  • Select "Liquid/HTML" as the block type

  • Insert this code:

<div class="jdgm-preview-badge" data-id="[[ product.id ]]">
  <script type="text/javascript" src="https://cdn.judge.me/badges/{{shop.metafields.judgeme.shop_domain}}.js" async></script>
</div>

Example 2: Loox Reviews

To add Loox review stars:

<div class="loox-rating" data-id="[[ product.id ]]" data-rating="[[ product.metafields.loox.avg_rating ]]" data-raters="[[ product.metafields.loox.num_reviews ]]">
  <script type="text/javascript" src="//loox.io/widget/loox.js" async></script>
</div>

Best Practices for Featured Collection - Blocks

  • Block Ordering: Place review blocks after the product title but before the price for optimal visual hierarchy

  • Mobile Optimization: Test how your review displays look on mobile devices, as the Featured Collection - Blocks section can display differently on smaller screens

  • Performance: Consider using the section's built-in lazy loading for optimal performance

  • Styling: Use the section's custom CSS settings to style your review elements consistently with your theme

Troubleshooting Common Issues

If your implementation isn't working:

  • Verify that the app is properly installed on your store

  • Check that you're using the correct placeholder syntax ([[ ]] not {{ }})

  • Ensure any required metafields are properly set up

  • Verify the block order in your section settings

Advanced Usage

You can combine multiple placeholders and add conditional logic to create more sophisticated displays:

{% if [[ product.metafields.reviews.rating_count ]] > 0 %}
  <div class="custom-reviews" style="margin: 10px 0;">
    <span class="rating">[[ product.metafields.reviews.rating.value ]]★</span>
    <span class="count">([[ product.metafields.reviews.rating_count ]] reviews)</span>
  </div>
{% endif %}

Styling Tips

The Featured Collection - Blocks section provides two Custom CSS fields under the "Advanced" settings:

  • CSS: Applied across all screen sizes

  • Mobile CSS: Applied only on screens smaller than 480px

Adding Custom CSS

  • Navigate to your section settings

  • Scroll down to "Advanced"

  • Find the "CSS" field

  • Add your styles using this format:

.custom-reviews {
  font-size: 0.9em;
  color: #666;
}

.rating {
  color: #f8b400;
  font-weight: bold;
}

.count {
  margin-left: 5px;
}

Mobile-Specific Styling

To add styles that only apply to mobile devices:

  1. Find the "Mobile CSS" field under "Advanced"

  2. Add your mobile-specific styles:

.custom-reviews {
  font-size: 0.8em;
}

.rating {
  display: block;
  margin-bottom: 2px;
}

Important Notes:

  • Each CSS declaration must end with a semicolon (;)

  • The Mobile CSS will override the main CSS for screens smaller than 480px

  • Keep your selectors simple to ensure they work properly

  • Test your styles across different screen sizes to ensure proper display

By utilizing both CSS fields, you can create responsive, well-styled review displays that look great on all devices.

PreviousFeatured collection - blocksNextHow to use the Metafield Image Badge block

Last updated 3 months ago