The missing feature of Systeme.io
Complete Order Bump Customizer
The Systeme Order Bump Customizer is a powerful CSS code generator designed to enhance and personalize the order bump element on Systeme order pages. This tool provides customization options beyond what the built-in editor supports.
It allows you to:
Adjust the background of the entire box.
Modify the animated arrow pointing at the checkbox.
With this tool, thereโs no need to locate or provide the order bump box ID, the CSS generated applies automatically to any Systeme order page.
You can save the HTML snippet as a custom block and add it to all your order pages ๐ฅณ
All the arrows on this page are live-examples generated using this tool.
Order Bump Customizer for Systeme
Preview
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
Code
Awesome Features
The customizer includes a scalable vector graphic (SVG) version of the default Systeme arrow.
With SVGs you can easily:
Change border and background colors.
Adjust the border width.
Simply use the intuitive color pickers and sliders to tailor the design to your liking.
Want to add a playful or unique touch? Use emojis or plain text as arrows or pointers.
The customizer offers:
A curated list of suitable emojis.
Full compatibility with any emoji via copy-paste.
Color customization for certain emojis (like arrows โฎ) and text.
Note: Smilies ๐ and hand emojis ๐ do not support color changes.
Use any image format supported by modern browsers (e.g., JPG, PNG, GIF, WebP, AVIF, SVG), and even video files as pointers. The tool includes links to example arrows for inspiration.
Note:
Linked images are not customizable within the tool.
For tweaks, you can use image editors like Canva or Figma and upload the exported images.
Uploading images directly to Systeme is recommended for stability.
Important: Linking to external images can result in broken links if the image is removed or restricted. Always consider copyright and hotlinking policies to avoid legal or ethical issues.
Incorporate Font Awesome icons to further personalize your order bump design. A pre-defined list of arrow-like icons is included.
You can:
Change their colors, since they're actually just fonts.
Animations
Bring your arrows, emojis, or text to life with animations! The customizer includes approximately 20 animations to choose from.
You can:
Turn animations off for static elements, useful for images that are already animated.
Layer animations for added attention-grabbing effects (e.g., on animated GIFs or WebP images, to really make them grab attention).
About the Creator
Hi there, Iโm Robert!
By day, Iโm a backend developer with strong frontend skills, and by night, Iโm an aspiring funnel builder.
I'm born and raised in Sweden where I live with my spouse and 2 kids, a smug little princess, 8 years old and a sweet goofy boy, 6 years old.
I have a passion for creating tools that simplify and automate tedious tasks, helping people save time and focus on what truly matters.
Funnels, marketing, and sales automation fascinate me for their potential to scale businesses and grant freedom to entrepreneurs. I want to share my technical expertise and support those who find tech overwhelming, empowering them to build beautiful, functional systems effortlessly.