Adding the Loox Trust Badge via code

Gain instant trust by adding the Loox Trust Badge to any spot on your store where Loox app blocks can't be added.

When to add the Loox Trust Badge via code vs. via app block

You might need to add the widget via code if:

1. you're on a vintage (1.0) Shopify theme.

2. you're on a 2.0 theme but want to add the widget in a location where you can't use the Loox app block. For example- if you want to add the widget to a custom snippet or on a page-building app like GemPages, PageFly, or Replo.

If you're on a 2.0 theme and have the option to do so in the location you want, use the Loox widget app block instead - it's easier to customize. Read more about adding widgets via app block. 

Note: Settings like "Layout" and "Text" in your Shopify theme editor only apply to the Loox app block. They do not affect the code shown below. 

Adding the widget via custom liquid block

Before adding the widget via liquid code, check if your theme supports custom liquid blocks in the location where you're looking to add the widget. This will make it easier for you to access and customize the code.

  • Inside the Shopify Themes menu, click Customize:
  • Head to the page you're looking to work on and click the + in your desired location on the left-hand sidebar to add a new section. Under Sections, search for "Custom Liquid." If it appears, select this option.
  • Next, add the following code snippet to the section's Liquid Code:
  • {% if shop.metafields.loox["global_stats"] %}
    {% assign looxstats = shop.metafields.loox["global_stats"] | split: ',' %} 
    <div
      class="loox-trust-badge-container"
      data-loox-layout="horizontal"
      data-loox-alignment="fillContainer"
      data-loox-review-title="reviews"
      data-loox-scheme-type="default"
      data-loox-rating-icon="true"
      data-loox-average-rating="true"
      data-loox-review-count="true"
      data-loox-show-border="true"
      data-loox-border-radius="8"
      data-loox-font-size="20"
      data-loox-open-reviews="true"
            data-loox-loox-branding="true"
      data-loox-rating="{{ looxstats[0] }}"
      data-loox-raters="{{ looxstats[1] }}"
    ></div>
    {% endif %}

    If you don't have the option to use a custom liquid section in the spot you're looking to add the widget, follow the instructions below on how to add the widget via liquid code.


To manually add the Loox Trust Badge to your store via code:

  • Inside the Shopify Themes menu, click the “... ” button next to “Customize” and select "Edit code":

  • Open the template or section you use for your homepage (usually called theme.liquid).
  • Copy the line of code below and paste it where you would like the widget to appear:
{% if shop.metafields.loox["global_stats"] %}
{% assign looxstats = shop.metafields.loox["global_stats"] | split: ',' %} 
<div
	class="loox-trust-badge-container"
	data-loox-layout="horizontal"
	data-loox-alignment="fillContainer"
	data-loox-review-title="reviews"
	data-loox-scheme-type="default"
	data-loox-rating-icon="true"
	data-loox-average-rating="true"
	data-loox-review-count="true"
	data-loox-show-border="true"
	data-loox-border-radius="8"
	data-loox-font-size="20"
	data-loox-open-reviews="true"
        data-loox-loox-branding="true"
	data-loox-rating="{{ looxstats[0] }}"
	data-loox-raters="{{ looxstats[1] }}"
></div>
{% endif %}


  • Click “Save”:


Customizations via code

Here are all the possible customizations you can make to the widget via code:

attribute

options

data-loox-layout

horizontal horizontal-slim
vertical horizontal-star
horizontal-slim-star

data-loox-alignment

left right center fillContainer

data-loox-scheme-type

default alternative inverted

data-loox-rating-icon

true false

data-loox-average-rating

true false

data-loox-review-count

true false

data-loox-show-border

true false

data-loox-loox-branding

true false

data-loox-border-radius

0-24

data-loox-font-size

12-32

data-loox-background-color

#000000 = color

data-loox-secondary-background-color

#000000 = color

data-loox-text-color

#000000 = color

data-loox-rating-icon-color

#000000 = color

data-loox-border-color

#000000 = color

data-loox-logo-color

#000000 = color

data-loox-review-title

Any string

Related Articles

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article