Appearance

Order Bump Card Design ​

The Design page lets you choose how your order bump offers look to customers. You can pick one of six ready-made cards, edit any of them in the block editor, or add your own cards, so your offers match your brand without touching code.

INFO

Card designs are part of the Order Bump feature, which needs FluentCart Pro. One card is active at a time, and it is used for the checkout, the cart drawer, and the cart page.

Opening the Design Page ​

Before you pick a card, open the page from the Order Bumps screen.

  1. Click the More menu item in the top navigation bar and click Order Bump.
  2. Click the Design button at the top right.

The Manage section shows every card as a live preview with its name, a short description, and a badge.

The Built-in Cards ​

FluentCart ships with six cards.

  • Classic Card: A card with a checkbox below. This is the default.
  • Compact Card: A slim row with an Add button.
  • Highlight Box: A yellow bar with the checkbox on top.
  • Exclusive Card: A green card with the checkbox at the bottom.
  • Callout Card: A blue card with a boxed checkbox.
  • Toggle Card: A peach card with a switch.

Each card carries one of these badges:

  • Built-in: The card still uses its original design.
  • Customized: You edited the card.
  • Custom: You added the card yourself.

The card currently in use is marked In Use.

Choosing the Card Your Store Uses ​

Once you've found a design you like, switch your store to it.

  1. On the card you want, click Use this layout.

  2. Wait for the confirmation message. The card is now marked In Use.

The change applies right away to the checkout page, the cart drawer, and the cart page. You don't need to edit your individual order bumps.

Customizing a Card ​

Every card opens in a block editor, the same kind used for the PDF templates, so you can change text, spacing, colors, and layout. The editor opens with the toolbar for adding blocks, undo and redo, and a button with curly braces that lists the offer details you can insert.

  1. On the card you want to change, click Customize.
  2. Edit the card in the editor.
  3. Click Save Template at the top right.

The card keeps its place in your store, so if it is the card in use, the new look goes live as soon as you save.

Offer Details You Can Place in a Card ​

Your cards read their content from the offer. Add these through the editor's placeholder list or with the order bump blocks:

  • Image: The offer's picture.
  • Offer Title: The title you entered for the bump.
  • Product Title: The name of the offered product.
  • Variation Title: The name of the offered variation.
  • Original Price: The regular price, before the discount.
  • Price: The discounted offer price.
  • Savings: The amount the customer saves.
  • Description: The bump description.

The editor also has blocks for the actions on a card: the Order Bump Checkbox (labeled "Grab it for" plus the price by default), an Order Bump Add Button, an Order Bump Remove Button, and an Order Bump Added Note that shows when the offer is already in the cart.

What Every Card Needs ​

A card has to let the customer both take and remove the offer. Keep the Order Bump Checkbox block in the card, or use both the Order Bump Add Button and the Order Bump Remove Button. If a saved card has neither, your store shows the built-in design of that card instead, so the customer is never stuck with an offer they can't remove.

The cart drawer is narrow, so it leaves out the description even when your card includes it.

Reverting a Card ​

To undo your edits, open the card and use the More actions menu (the three dots) at the top right, then click Revert to Default.

You can also click Reset on the card in the Design page. A Reset button only appears on cards you changed, and you're asked to confirm because your edits are lost.

For a custom card, a reset gives it the Classic design.

Adding Your Own Card ​

If none of the six cards fit, create your own.

  1. Click Add Template at the top right of the Design page.

  2. Enter a Template Name, for example "Black Friday offer".

  3. Click Create. The new card opens in the editor, starting from the Classic design.

  4. Edit it and click Save Template.

  5. Back on the Design page, click Use this layout on the new card to put it live. Custom cards carry a Custom badge and have Reset and Delete buttons.

You can add up to 20 custom cards. Delete one to add another.

Deleting a Custom Card ​

Only custom cards can be deleted. Built-in cards can only be reset.

  1. On the Design page, click Delete on the custom card. In the editor, use the More actions menu and click Delete Template.
  2. Confirm the prompt.

If the deleted card was the one in use, your store goes back to the Classic Card.

Your order bumps now share one consistent look across the checkout, the cart drawer, and the cart page.