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>
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. |
url | URL to the product's products view detail page. |