Skip to main content

Installing optional widgets on product pages (vintage themes)

  • Updated

πŸ’‘ This document provides guidance on integrating various CREMA widgets into your Shopify vintage theme.

Key Summary

  • This guide is specifically for merchants using CREMA Review with a Shopify vintage theme.
  • Learn how to install CREMA widgets by adding specific code snippets to your theme's Liquid files.
  • Each widget type requires a unique code snippet.

 

This comprehensive guide provides detailed instructions for seamlessly integrating various CREMA Review display widgets into your Shopify store, specifically tailored for Shopify vintage themes. By following these steps, you can enhance your product pages with dynamic review displays, media grids, social media integration, and user-generated content previews.

❗ IMPORTANT

  • These instructions are applicable only for merchants using CREMA Review with a Shopify vintage theme.
  • If you are using Shopify Online Store 2.0, please refer to our dedicated Shopify Online Store 2.0 guide for relevant instructions.
  • If you are unsure which theme version you are currently using, you can find guidance by referring to Shopify's official instructions.

 

In this article :

The Reviews Carousel widget allows you to display product reviews in an engaging horizontal scroll format on your product pages.

Shopify Themes > Actions > Edit Code
  1. Navigate to your Shopify Themes menu, then click Actions and select Edit Code.
  2. Open the product.liquid file. Locate the line {% section 'product-template' %} and add the following code directly underneath it. 
  3. After adding the code, click Save.
<div class="crema-product-reviews" data-product-code="{{ product.id }}" data-widget-style="horizontal_scroll"></div>
Screenshot demonstrating the placement of the Reviews Carousel code snippet in product.liquid.

Media Grid

The Media Grid widget showcases user-generated media (photos and videos) in a visually appealing grid layout on your product pages.

  1. From the Edit Code menu, open the product.liquid file.
  2. Add the following code directly under {% section 'product-template' %}. 
  3. Remember to click Save after adding the code.
<div class="crema-product-reviews" data-product-code="{{ product.id }}" data-widget-style="gallery"></div>
Screenshot demonstrating the placement of the Media Grid code snippet in product.liquid.

Reviews Board

The Reviews Board widget displays all customer reviews in a comprehensive, list-style format, making it easy for customers to browse feedback.

  1. From the Edit Code menu, open the product.liquid file.
  2. Add the following code directly under {% section 'product-template' %}. 
  3. Ensure you click Save once the code is in place.
<div class="crema-product-reviews" data-product-code="{{ product.id }}" data-widget-style="board"></div>
Screenshot demonstrating the placement of the Reviews Board code snippet in product.liquid.

Social Media Widget

The Social Media Widget allows you to integrate social media content related to your products directly onto your product pages.

  1. From the Edit Code menu, open the product.liquid file.
  2. Add the following code directly under {% section 'product-template' %}. 
  3. Click Save to apply your changes.
<div class="crema-product-reviews" data-product-code="{{ product.id }}" data-widget-style="external"></div>
Screenshot demonstrating the placement of the Social Media Widget code snippet in product.liquid.

UGC Preview Widget

The UGC (User-Generated Content) Preview Widget provides a thumbnail display of customer photos and videos, offering a quick visual summary of user content.

  1. From the Edit Code menu, open the product-template.liquid file. Note: This is a different file from the previous widgets.
  2. Add the following code directly under {{ product.description }}. 
  3. Click Save to finalize your changes.
<div class="crema-product-reviews" data-product-code="{{ product.id }}" data-widget-style="photo_thumbnail"></div>
Screenshot demonstrating the placement of the UGC Preview Widget code snippet in product-template.liquid.

For further details and visual examples of all available display widgets, please refer to our display widgets showcase page.

If you require any assistance with installing CREMA widgets on your vintage theme, our support team is ready to help. Feel free to chat with us or email us directly at support.global@cre.ma.

Frequently Asked Questions (FAQ)

Is it safe to modify my theme code, and what precautions should I take?

πŸ‘‰ Yes, it is generally safe to modify your theme code if you follow instructions carefully. However, as a best practice, always duplicate your theme before making any changes to its code. This creates a backup that you can easily revert to if any issues arise. You can duplicate your theme from Shopify Themes > Actions > Duplicate.

Can I add multiple CREMA widgets to the same `product.liquid` or `product-template.liquid` file?

πŸ‘‰ Yes, you can add multiple CREMA widgets to the same Liquid file. Simply follow the instructions for each widget, ensuring you place its specific code snippet in the recommended location. If you want to customize the order or position of the widgets, you can adjust the placement of their respective code snippets within the file.

Related to

Related articles