Add to Shopify

Custom CSS

For the last five per cent the controls do not reach. What you can target and what to be careful about.

When the built-in controls cannot express what you want, custom CSS gets injected into the game page.

What you can target

The board’s own classes, all prefixed ftw-:

  • .ftw-panel: the panel the board sits on
  • .ftw-card: a card
  • .ftw-face: a card face, with .ftw-front and .ftw-back
  • .ftw-grid: the board grid
  • .ftw-cta: the continue button
  • .ftw-progress, .ftw-dots, .ftw-bar: the progress indicators
  • .ftw-badge: the “Powered by Flip to Win” badge

Everything sits inside #ftw-overlay, so prefix your selectors with that when you need to win a specificity fight.

What to be careful about

  • The overlay is fixed and full-viewport. Changing its positioning can break the page on mobile.
  • Test on a phone. Most of your traffic is mobile and desktop-only CSS is the most common way to break this page.
  • Do not use it to collect data. Injecting anything that captures shopper input violates the terms.
  • Animations should respect reduced motion. Wrap them in a prefers-reduced-motion guard.

Plan gate

Custom CSS needs Pro or Scale.

When not to use it

If you are using CSS to change a colour, a size or a radius, stop and look for the control instead. Everything visible on the board has one, and a control survives future updates in a way that a CSS override targeting our class names may not.

Still stuck?

Email support@fliptowin.app with your store domain and the game URL you're testing. Every plan gets an answer from someone who has read the code.