Skip to content
Loyalfly Docs

Older Themes (Debut & Legacy)

Older themes, such as Debut, Brooklyn, Minimal and Supply, don’t support app blocks. Start with the app embed, since it often works on these themes too. If the widget doesn’t show, use the snippets below.

Caution: Before you edit any theme code, duplicate your theme. In Online Store → Themes, open the three-dot menu on your live theme and select Duplicate. You can then go back to the original if anything goes wrong.

Step 1: Try the app embed first

Section titled “Step 1: Try the app embed first”

In Online Store → Themes → Customize → App embeds, turn on Loyalfly Widget. If the launcher appears on your storefront, you’re done.

Step 2: Add the snippets

Section titled “Step 2: Add the snippets”

If the widget doesn’t appear, or you want the product badge and cart points block, add these files. Each one needs to go in your theme’s snippets folder.

  1. Download the snippet files:
  2. In your Shopify admin, go to Online Store → Themes, select Edit code on your duplicated theme.
  3. Under Snippets, select Add a new snippet. Name it loyalfly-widget, paste the widget file contents, and save. Repeat for loyalfly-product-badge and loyalfly-cart.
  4. Add one line for each snippet to the right template:
    • {% render 'loyalfly-widget' %} in theme.liquid, just before </body>
    • {% render 'loyalfly-product-badge' %} in your product template, near the price or Add to Cart button
    • {% render 'loyalfly-cart' %} in your cart template

Each snippet has its settings at the top of the file, such as widget_color, launcher_text and position. Edit those values in the snippet to change how it looks.

Step 3: Check it on your storefront

Section titled “Step 3: Check it on your storefront”

Check the storefront itself, since the theme editor preview doesn’t always show scripts loaded this way.

  1. Widget: log in as a customer, find the launcher button in the corner, open it, and confirm the points balance loads.
  2. Product badge: open a product with a multiplier, and check that the points badge appears near the price.
  3. Cart block: log in, add an item, and open the cart. Check that the points balance and the apply points control appear.

If something doesn’t show

Section titled “If something doesn’t show”
  • Clear your browser cache and reload the storefront.
  • Check that the snippet lines are inside the templates listed above.
  • Make sure the customer is logged in. The widget only shows balances for signed-in customers.