Skip to main content

Add custom CSS and HTML to your loyalty design

Style the launcher, popup and loyalty page with your own CSS, and add your own HTML blocks to the popup and loyalty page.

The Advanced panel in the Loyalty design editor lets you restyle the launcher, the popup and the loyalty page with your own CSS, and add your own HTML blocks to the popup and the loyalty page. Use it for changes the other panels can't make, such as a notice above your FAQ.

CSS and HTML are for people who are comfortable with code. If something looks wrong after a change, remove it and save again to go back to the standard design.

Open the Advanced panel

  1. In Appstle Loyalty, click Design.

  2. Click Customize. The Loyalty design editor opens full screen.

  3. Click Advanced in the list of panels on the left.

The panel has two groups: Custom CSS and Custom HTML.

Add custom CSS

  1. In Custom CSS, type or paste your CSS into the code box.

  2. Click Save in the top right corner.

Your CSS is added as is to your store pages while loyalty is on, so it fully styles the launcher and the loyalty page.

Inside the popup and the cart rewards widget, only a filtered copy applies. It keeps colors, fonts, spacing, sizes, borders and layout. It drops positioning (position, top, left, z-index), transforms, animations, url() images, negative margins, @import and @keyframes.

Add a custom HTML block

A block adds your own content next to an element inside the popup or the loyalty page.

  1. In Custom HTML, click Add HTML block.

  2. In Selector, enter a CSS selector for the element, like .loyalty-home-faq-title. To find one, right-click the element on your store and choose Inspect.

  3. Under Position, choose Before, After or Inside, at the end. New blocks start on After.

  4. In HTML, enter your content.

  5. Click Done, then click Save in the top right corner.

To change a block later, click Edit under it, make your changes, then click Done and Save. To delete a block, click Remove under it, then click Save.

Under the HTML box, Variables you can use lists the customer details you can add, such as {{availablePoints}} or {{customerName}}. Each one is filled in for the customer viewing it, so You have {{availablePoints}} points shows each customer's own balance. For guests, numbers show 0 and names stay empty. If you type a variable that isn't in the list, the editor warns you, and customers see it as typed.

Things to know

  • HTML blocks show in their own box inside the popup, the loyalty page or the cart rewards widget. Scripts, styles, forms, iframes and attributes like onclick are removed. Blocks are never added inside buttons or links.

  • If nothing on the page matches Selector, nothing is added.

  • Your CSS doesn't reach the loyalty page in new customer accounts, or checkout and account blocks.

  • Your CSS doesn't load on pages listed in Don't load loyalty on these pages in the Visibility panel.

  • Nothing changes on your store until you click Save.

FAQs

Why doesn't my CSS work inside the popup?

Inside the popup and the cart rewards widget, only a filtered copy of your CSS applies. Colors, fonts, spacing, sizes, borders and layout work. Positioning (position, top, left, z-index), transforms, animations, url() images, negative margins, @import and @keyframes are dropped. To move the launcher, use the Style panel.

Can I add a script or a form?

No. Scripts, styles, forms and iframes are removed from HTML blocks.

Did this answer your question?