CSS

Customizing the CSS is a great way to really customize the appearance of a Fera widget's content as a web developer.

You can customize the CSS of any widget by going to the Custom CSS tab or section. It looks like this:

.fera-widget-123 {
/* Add custom code here */
}

Each widget is scoped under the .fera-widget-* namespace so you can style things underneath that to ensure your styles don't affect other things on the page (unless that is your intention).


Liquid Templates

Modifying the Fera widget content templates lets you customize the HTML that Fera widgets generate on the server-side.

Fera templates use the Liquid Template Rendering system and can be modified whenever you see an editor like this:

<div class="fera-widget-603">
Number of viewers: {{ product.viewers.last_15_min }}.
</div>

📝 Note: You can find a great reference on the syntax and methods provided by Shopify here.

Liquid Templates - Variables

Current Shopper

You can get shopper data in the templates from the {{ shopper.* }} template variables.

Location

The shopper's location can be accessed from the {{ shopper.location.* }} attributes. For example, to get the shopper's country you would enter {{ shopper.location.country_name }}

Attribute

Description & Examples

country_name

Country name

Ex: United States; Canada; United Kingdom

country_code

2-Letter country code

Ex: US; CA; UK

region_code

2 or 3 letter state, province or region code

Ex: CA (California); ON (Ontario)

region_name

State, province or region fill name.

Ex: California; Ontario

city

City

Ex: Waterloo; San Francisco; Miami

The shopper's location can be accessed from the {{ shopper.* }} attributes. For example, to get the shopper's first name you would enter {{ shopper.first_name }}

Other

Attribute

Description & Examples

first_name

Shopper's first name if it is known.

Ex: Tobias; Lindsay; Buster

Current Product

Details

Attribute

Description & Examples

name

Name of the product currently being viewed or associated with the current widget. Ex: Limited Edition Fukajimi Sneakers

thumbnail_url

URL to the product's thumbnail image.

Ex: https://uploads.fera.ai/example_images/shoe.png

url

URL to the product's products view detail page.

Ex: https://www.example.com/some_product


Did this answer your question?