Appearance
Widget Installation for Shopify Online Store 1.x
If you're using an Online Store 1.0 theme, you'll need to manually insert code snippets into your store's Liquid files to add the widgets.
Begin by identifying which Liquid files correspond to your product page, homepage, product card, and menu. Once located, paste the appropriate code snippets into the correct sections of the files.
Widget Code Snippets
Profile card
Replace the code
html
<a class="site-nav__link
site-nav__link--icon" href="/account"><a>in the Liquid file for the menu with the following text:
html
<div id="gmf-dropdown-profile"></div>Review widget
Simply add it to your product page, suitably at the bottom of the product page.
html
<div id="gmf-comment-section" data-product-id="{{
product.selected_or_first_available_variant.id }}"></div>Product rating on the product page
May be placed under the product title or under the price, whatever looks best.
html
<div class="gmf-product-rating" data-product-id="{{
product.selected_or_first_available_variant.id }}"></div>Product rating in product lists (product card)
In the Liquid file for your product cards, the product variable may be called "card_product" instead of "product." Identify the correct variable, and modify the variable in the code snippet below to match the one used in the file before inserting it (if needed).
html
<div class="gmf-product-rating" data-product-id="{{
card_product.selected_or_first_available_variant.id }}"></div>Top-voted review on the product page
This snippet can be inserted above the product description, but you may need to experiment with placement to find the best fit.
html
<div class="gmf-top-review" data-product-id="{{
product.selected_or_first_available_variant.id }}"></div>Slideshow for the homepage
Insert this somewhere on your start page.
html
<div class="gmf-start-page-slideshow"></div>