Shopify - Manual Liquid Implementation

⚠️ Critical Note on Required Attributes: Because you are implementing these tags manually, all attributes listed below are required. The web components do not possess internal fallback defaults. If you omit an attribute, the component may break or render incorrectly. We have provided the necessary Liquid Injection tags or Recommended Values for each property to help you build the HTML tags correctly.

Dynamic Text Variables (`%%`)

Several components allow you to inject dynamic data (like the user's current points or the name of a coupon) directly into text attributes. These variables are always wrapped in percentage signs (e.g., %points%).

The components will automatically parse these strings and replace the variables with the correct live data for the logged-in user or the viewed product. The specific variables available depend on the component and the attribute being used.

Components

`<trifft-header-user-points>`

This component serves as a persistent loyalty indicator, typically placed in the global header or navigation bar of your store. It displays the currently logged-in user's available points balance next to a customizable icon. Clicking it acts as a shortcut to the full loyalty account page. If the user is not logged in, it will hide itself or show a default unauthenticated state.

Example Usage

<trifft-header-user-points
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  image-url="{{ 'star.png' | asset_url }}"
  navigate-url="/trifft-account"
  url-target="inApp"
  circle-color="#ffffff"
  points-color="#000000"
  icon-width="25"
  icon-height="25"
></trifft-header-user-points>

user-email (string): The email address of the currently logged-in Shopify customer. Liquid Injection: {{ customer.email }}
design-mode (boolean): When true, the component displays placeholder data. Liquid Injection: {{ request.design_mode }}
image-url (string): The URL for the icon displayed next to the points. Liquid Injection: {{ "star.png" | asset_url }}
navigate-url (string): The destination URL when a user clicks the component. Recommended Value: /trifft-account
url-target (string): Defines how the navigate-url opens. Options: inApp, external. Recommended Value: inApp
circle-color (string): The CSS color for the background of the points indicator. Recommended Value: #ffffff
points-color (string): The CSS color for the points text itself. Recommended Value: #000000
icon-width (number): The CSS width for the user icon. Recommended Value: 25
icon-height (number): The CSS height for the user icon. Recommended Value: 25

`<trifft-referral-rewards>`

This component visually showcases the available rewards a user can earn. It renders a grid or list of "Reward Cards" configured in the Trifft (e.g., "Refer a friend, get $10 off"). Clicking a referral reward triggers a popup to copy the referral link or share it directly to social media. Other rewards may include actions required to unlock them (e.g., "Follow on Instagram"). It belongs on a dedicated Rewards or Loyalty page.

Example Usage

<trifft-referral-rewards
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  image-size="30"
  button-bg-color="#000000"
  button-text-color="#FFFFFF"
  button-border-color="#000000"
  button-border-radius="6"
  button-border-width="1"
  button-padding-x="20"
  button-padding-y="10"
  button-font-size="16"
  button-text="SEND"
  input-border-radius="6"
  input-padding-x="8"
  input-padding-y="10"
></trifft-referral-rewards>

user-email (string): The email address of the logged-in customer. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to visualize the rewards list with mock data. Liquid Injection: {{ request.design_mode }}
image-size (number): The width and height (in pixels) for the reward icons. Recommended Value: 30
button-bg-color (string): The background color for the buttons. Recommended Value: #000000
button-text-color (string): The text color for the buttons. Recommended Value: #FFFFFF
button-border-color (string): The color of the button border. Recommended Value: #000000
button-border-radius (number): The roundness of the button corners. Recommended Value: 6
button-border-width (number): The thickness of the button border. Recommended Value: 1
button-padding-x (number): Horizontal internal spacing for the buttons. Recommended Value: 20
button-padding-y (number): Vertical internal spacing for the buttons. Recommended Value: 10
button-font-size (number): The font size for the button text. Recommended Value: 16
button-text (string): The label displayed on the action buttons inside modals. Recommended Value: SEND
input-padding-x (number): Horizontal padding for input fields inside modals. Recommended Value: 8
input-padding-y (number): Vertical padding for input fields inside modals. Recommended Value: 10
input-border-radius (number): Corner radius for input fields inside modals. Recommended Value: 6

`<trifft-referrals-history>`

This component provides a clean, tabular log of a user's past referral activity. It allows the customer to see a list of friends they have referred, the date of the referral, and whether the friend has redeemed the invitation (meaning the user successfully earned their reward). Best placed on an account dashboard or dedicated referral page.

Example Usage

<trifft-referrals-history
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  head-bg="#f5f5f5"
  head-color="#000000"
  table-bg="#ffffff"
  table-color="#000000"
  table-border-radius="8"
></trifft-referrals-history>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): If true, displays a sample table with dummy data. Liquid Injection: {{ request.design_mode }}
head-bg (string): The background color for the table's header row. Recommended Value: #f5f5f5
head-color (string): The text color for the table's header row. Recommended Value: #000000
table-bg (string): The background color for the data rows. Recommended Value: #ffffff
table-color (string): The text color for the data rows. Recommended Value: #000000
table-border-radius (number): The corner radius for the table container. Recommended Value: 8

`<trifft-referrals>`

This is the primary action interface for the referral program. This component prominently displays the user's unique referral link inside a copyable box. Depending on your Trifft setup, it also renders input fields allowing the user to send referral emails directly from the widget.

Example Usage

<trifft-referrals
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  title="Share your referral"
  code-bg="#f7f7f7"
  code-color="#000000"
  code-padding-x="16"
  code-padding-y="8"
  code-border-radius="6"
  input-padding-x="8"
  input-padding-y="10"
  input-border-radius="6"
  button-bg-color="#000000"
  button-text-color="#FFFFFF"
  button-border-color="#FFFFFF"
  button-border-radius="6"
  button-border-width="1"
  button-padding-x="20"
  button-padding-y="10"
  button-font-size="16"
  button-text="SEND"
></trifft-referrals>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to show a sample referral code. Liquid Injection: {{ request.design_mode }}
title (string): The heading text above the referral link. Recommended Value: Share your referral
code-bg (string): The background color of the referral code box. Recommended Value: #f7f7f7
code-color (string): The text color of the referral code. Recommended Value: #000000
code-padding-x (number): Horizontal padding inside the code box. Recommended Value: 16
code-padding-y (number): Vertical padding inside the code box. Recommended Value: 8
code-border-radius (number): Corner radius for the code box. Recommended Value: 6
input-padding-x (number): Horizontal padding for email input fields. Recommended Value: 8
input-padding-y (number): Vertical padding for email input fields. Recommended Value: 10
input-border-radius (number): Corner radius for email input fields. Recommended Value: 6
button-bg-color (string): Background color for the buttons. Recommended Value: #000000
button-text-color (string): Text color for the buttons. Recommended Value: #FFFFFF
button-border-color (string): Border color for the buttons. Recommended Value: #FFFFFF
button-border-radius (number): Corner radius for the buttons. Recommended Value: 6
button-border-width (number): Border thickness for the buttons. Recommended Value: 1
button-padding-x (number): Horizontal padding for the buttons. Recommended Value: 20
button-padding-y (number): Vertical padding for the buttons. Recommended Value: 10
button-font-size (number): Font size for the button text. Recommended Value: 16
button-text (string): The label for the primary action button. Recommended Value: SEND

`<trifft-custom-block>`

A highly versatile component designed to inject custom HTML or rich text into the store while dynamically replacing variables with live loyalty data. This is perfect for custom hero banners ("Welcome back, you have 500 points!"), product-specific loyalty messages, or custom instructions.

Example Usage

<trifft-custom-block
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  hide-login-message="false"
  rich-text="You have %member.points% points, worth %custom_block.worth%."
  product-price="{{ product.selected_or_first_available_variant.price | default: product.price }}"
  product-sku="{{ product.selected_or_first_available_variant.sku | default: product.id }}"
  margin-x="0"
  margin-y="0"
></trifft-custom-block>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): If true, renders the block for design purposes. Liquid Injection: {{ request.design_mode }}
hide-login-message (boolean): If true, the component remains hidden for guests. Recommended Value: false
product-price (number): Product price context. Liquid Injection: {{ product.selected_or_first_available_variant.price | default: product.price }}
product-sku (string): Product SKU context. Liquid Injection: {{ product.selected_or_first_available_variant.sku | default: product.id }}
margin-x (number): Horizontal margin outside the block. Recommended Value: 0
margin-y (number): Vertical margin outside the block. Recommended Value: 0
rich-text (string): The raw HTML or text content. Recommended Value: You have %member.points% points.

`<trifft-overview>`

This component acts as a high-level loyalty summary, usually placed at the top of a user's account page. It displays their current points and intelligently checks if any of their points are close to expiring. If points are expiring, it displays a clickable alert that opens a detailed modal explaining exactly when the points will vanish.

Example Usage

<trifft-overview
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  color="#000000"
  text="You have %points% points."
  alert-color="#ff0000"
  alert-text="%points_expiring% points expiring within 30 days"
  popup-title="Here's a breakdown of the points that will expire in the next 30 days."
></trifft-overview>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to preview with sample data. Liquid Injection: {{ request.design_mode }}
color (string): The primary text color. Recommended Value: #000000
alert-color (string): The text color for the alert-text. Recommended Value: #ff0000
text (string): The primary message or status text. Recommended Value: You have %points% points. Available Variables for text:
- %points%: The user's total available points balance.
- %points_expiring%: The amount of points currently scheduled to expire soon.
alert-text (string): A secondary, highlighted message for expiring points. Recommended Value: %points_expiring% points expiring within 30 days Available Variables for alert-text:
- %points%: The user's total points.
- %points_expiring%: The specific number of points expiring.
popup-title (string): The title for the detailed expiring points popup modal. Recommended Value: Here's a breakdown of the points that will expire in the next 30 days.

`<trifft-user-coupons>`

This component lists all the coupons a user currently has access to. This includes coupons that are already active (which they can click to apply at checkout) and coupons they haven't claimed yet but have enough points to "purchase." Clicking an unredeemed coupon opens a confirmation popup to exchange their points for the discount code.

Example Usage

<trifft-user-coupons
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  hide-login-message="false"
  points-icon-url="{{ 'star.png' | asset_url }}"
  button-text="Claim Now"
  popup-title="Here's a %name%"
  popup-text-null-points="Click CLAIM NOW and your unique code will be automatically applied at checkout."
  popup-text-more-points="Click CLAIM NOW and your unique code will be automatically applied, and %points% points will be deducted at checkout."
  valid-from="Valid from: %date%"
  valid-until="Expires on: %date%"
  button-bg-color="#000000"
  button-text-color="#FFFFFF"
  button-border-color="#FFFFFF"
  button-border-radius="6"
  button-border-width="1"
  button-padding-x="20"
  button-padding-y="10"
  button-font-size="16"
></trifft-user-coupons>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to show sample coupons. Liquid Injection: {{ request.design_mode }}
hide-login-message (boolean): If true, hides the login message for guests. Recommended Value: false
points-icon-url (string): URL for the points icon displayed next to costs. Liquid Injection: {{ "star.png" | asset_url }}
button-text (string): The label for the redemption button in the modal. Recommended Value: Claim Now
valid-from (string): Localized label for the start date. Recommended Value: Valid from: %date%
valid-until (string): Localized label for the expiration date. Recommended Value: Expires on: %date%
button-bg-color (string): Background color for redemption buttons. Recommended Value: #000000
button-text-color (string): Text color for redemption buttons. Recommended Value: #FFFFFF
button-border-color (string): Border color for redemption buttons. Recommended Value: #FFFFFF
button-border-radius (number): Corner radius for redemption buttons. Recommended Value: 6
button-border-width (number): Border thickness for redemption buttons. Recommended Value: 1
button-padding-x (number): Horizontal padding for redemption buttons. Recommended Value: 20
button-padding-y (number): Vertical padding for redemption buttons. Recommended Value: 10
button-font-size (number): Font size for redemption button text. Recommended Value: 16
popup-text-null-points (string): Message displayed when a coupon is free (costs 0 points). Recommended Value: Click "CLAIM NOW" and your unique code will be automatically applied at checkout.
popup-title (string): The title of the redemption modal. Recommended Value: Here's a %name% Available Variables for popup-title:
- %name%: The name of the specific coupon (e.g., "$10 Off").
popup-text-more-points (string): Message displayed when a coupon costs points to redeem. Recommended Value: Click "CLAIM NOW" and your unique code will be automatically applied, and %points% points will be deducted at checkout. Available Variables for popup-text-more-points:
- %points%: The specific cost of the coupon in points.

`<trifft-product-promotions>`

Designed strictly for Product pages (PDPs), this component detects if there are any special loyalty promotions or multipliers associated with the current product (e.g., "Double points on this item this week!"). If no promotions are active for the product, it renders nothing. If active, it displays an icon and promotional text to incentivize the purchase.

Example Usage

<trifft-product-promotions
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  color="#000000"
  icon-size="25"
  border-radius="0"
  link-color="#000000"
  link-text="Learn more"
  product-price="{{ product.selected_or_first_available_variant.price | default: product.price }}"
  product-sku="{{ product.selected_or_first_available_variant.sku | default: product.id }}"
></trifft-product-promotions>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to preview with sample data. Liquid Injection: {{ request.design_mode }}
color (string): The primary text color. Recommended Value: #000000
icon-size (number): The CSS size for the promotion icon. Recommended Value: 25
border-radius (number): The CSS border-radius for the icon container. Recommended Value: 0
link-color (string): The color for informational links. Recommended Value: #000000
link-text (string): The text for the informational link. Recommended Value: Learn more
product-price (number): The price of the current product. Liquid Injection: {{ product.selected_or_first_available_variant.price | default: product.price }}
product-sku (string): The SKU of the current product. Liquid Injection: {{ product.selected_or_first_available_variant.sku | default: product.id }}

`<trifft-product-points-info>`

Another component built specifically for Product pages (PDPs). This widget analyzes the product's price and calculates exactly how many points the user will earn if they check out. It acts as an instant gratification tool, making the loyalty program a core part of the purchasing decision.

Example Usage

<trifft-product-points-info
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  image-url="{{ 'star.png' | asset_url }}"
  color="#000000"
  icon-width="25"
  icon-height="25"
  border-radius="0"
  text="Get %points% loyalty points for %amount% with this purchase. More means more rewards."
  link-color="#000000"
  link-url="[https://www.trifft.io/](https://www.trifft.io/)"
  link-text="Learn more"
  product-price="{{ product.selected_or_first_available_variant.price | default: product.price }}"
  product-sku="{{ product.selected_or_first_available_variant.sku | default: product.id }}"
></trifft-product-points-info>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to show a sample message. Liquid Injection: {{ request.design_mode }}
image-url (string): URL for the icon displayed next to the text. Liquid Injection: {{ "star.png" | asset_url }}
color (string): The primary text color. Recommended Value: #000000
icon-width (number): The CSS width for the points icon. Recommended Value: 25
icon-height (number): The CSS height for the points icon. Recommended Value: 25
border-radius (number): The CSS border-radius for the icon. Recommended Value: 0
link-color (string): The color for the informational link. Recommended Value: #000000
link-url (string): The destination URL for the link. Recommended Value: https://www.trifft.io/
link-text (string): The text for the link. Recommended Value: Learn more
product-price (number): The price of the product. Liquid Injection: {{ product.selected_or_first_available_variant.price | default: product.price }}
product-sku (string): The SKU of the product. Liquid Injection: {{ product.selected_or_first_available_variant.sku | default: product.id }}
text (string): The message template. Recommended Value: Get %points% loyalty points for %amount% with this purchase. More means more rewards. Available Variables for text:
- %points%: The number of points the user will earn by purchasing this product.
- %amount%: The formatted price of the product.
- %worth%: The monetary value of the points earned (based on your earn/burn exchange rate).

`<trifft-user-transactions-history>`

A highly detailed, scrollable ledger of every interaction the user has had with the loyalty program. It logs points earned (credits) via purchases or activities, points spent (debits) on coupons, and warns the user inline if a specific batch of points is approaching its expiration date. Clicking a row opens a modal with deeper transaction details.

Example Usage

<trifft-user-transactions-history
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  hide-login-message="false"
  credit-image-url="{{ 'coins.png' | asset_url }}"
  debit-image-url="{{ 'receipt.png' | asset_url }}"
  credit-transaction-image-url="{{ 'receipt.png' | asset_url }}"
  points-image-url="{{ 'star.png' | asset_url }}"
  background="#f5f5f5"
  border-color="#e5e5e5"
  border-radius="8"
  color="#000000"
  alert-text="%points% points expiring within %days% days."
  alert-color-standard="#E5E5E5"
  alert-color-warning="#ff0000"
  button-bg-color="#000000"
  button-text-color="#FFFFFF"
  button-border-color="#FFFFFF"
  button-border-radius="6"
  button-border-width="1"
  button-padding-x="20"
  button-padding-y="10"
  button-font-size="16"
></trifft-user-transactions-history>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to display sample transactions. Liquid Injection: {{ request.design_mode }}
hide-login-message (boolean): If true, hides the login message for guests. Recommended Value: false
credit-image-url (string): URL for the icon representing points gained without a receipt. Liquid Injection: {{ "coins.png" | asset_url }}
debit-image-url (string): URL for the icon representing points spent. Liquid Injection: {{ "receipt.png" | asset_url }}
credit-transaction-image-url (string): URL for the icon representing points gained via a purchase. Liquid Injection: {{ "receipt.png" | asset_url }}
points-image-url (string): URL for general points icon. Liquid Injection: {{ "star.png" | asset_url }}
background (string): Background color for the transaction list container. Recommended Value: #f5f5f5
border-color (string): Border color for the container. Recommended Value: #e5e5e5
border-radius (number): Corner radius for the container. Recommended Value: 8
color (string): The primary text color. Recommended Value: #000000
alert-color-standard (string): Text color for general informational expiration alerts. Recommended Value: #E5E5E5
alert-color-warning (string): Text color for urgent expiration alerts (under 30 days). Recommended Value: #ff0000
button-bg-color (string): Background color for the "Load More" button. Recommended Value: #000000
button-text-color (string): Text color for the button. Recommended Value: #FFFFFF
button-border-color (string): Border color for the button. Recommended Value: #FFFFFF
button-border-radius (number): Corner radius for the button. Recommended Value: 6
button-border-width (number): Border thickness for the button. Recommended Value: 1
button-padding-x (number): Horizontal padding for the button. Recommended Value: 20
button-padding-y (number): Vertical padding for the button. Recommended Value: 10
button-font-size (number): Font size for button text. Recommended Value: 16
alert-text (string): The inline message displayed beneath a transaction if those points are expiring. Recommended Value: %points% points expiring within %days% days. Available Variables for alert-text:
- %points%: The number of unredeemed points from this specific transaction that are expiring.
- %days%: The exact number of days remaining until the points expire.

`<trifft-tier-progressbar>`

A graphical progress bar that shows how close a user is to reaching the next loyalty tier. It displays the user's current tier, their progress, and exactly how much they need to spend or earn to unlock the next level. This is best placed at the top of an account dashboard to immediately engage the user.

Example Usage

<trifft-tier-progressbar
  user-email="{{ customer.email }}"
  design-mode="{{ request.design_mode }}"
  override-progressbar-color="false"
  bar-color="#000000"
  bar-background="#e9ecef"
></trifft-tier-progressbar>

user-email (string): The email of the logged-in user. Liquid Injection: {{ customer.email }}
design-mode (boolean): Set to true to show a sample progress state. Liquid Injection: {{ request.design_mode }}
override-progressbar-color (boolean): By default, the bar inherits colors configured directly in the Trifft backend for that tier. If set to true, it ignores the backend settings and forces the bar-color and bar-background defined below. Recommended Value: false
bar-color (string): The CSS color for the filled portion of the progress bar (only active if override is true). Recommended Value: #000000
bar-background (string): The CSS color for the unfilled background track of the bar (only active if override is true). Recommended Value: #e9ecef

Dynamic Text Variables (%%)

Components

<trifft-header-user-points>

Example Usage

<trifft-referral-rewards>

Example Usage

<trifft-referrals-history>

Example Usage

<trifft-referrals>

Example Usage

<trifft-custom-block>

Example Usage

<trifft-overview>

Example Usage

<trifft-user-coupons>

Example Usage

<trifft-product-promotions>

Example Usage

<trifft-product-points-info>

Example Usage

<trifft-user-transactions-history>

Example Usage

<trifft-tier-progressbar>

Example Usage

Dynamic Text Variables (`%%`)

`<trifft-header-user-points>`

`<trifft-referral-rewards>`

`<trifft-referrals-history>`

`<trifft-referrals>`

`<trifft-custom-block>`

`<trifft-overview>`

`<trifft-user-coupons>`

`<trifft-product-promotions>`

`<trifft-product-points-info>`

`<trifft-user-transactions-history>`

`<trifft-tier-progressbar>`