Storefront Card on File

Let signed-in customers complete their cart using a saved payment method. The Card-on-file CTA app block adds a customizable button to your storefront, labeled Complete Order by default.

Clicking the button opens an order confirmation experience where customers can review their cart, delivery details, and payment method before placing an order.

Before you begin

• Install Awtomic and confirm Storefront Card on File is available for your store. If you do not see the setting below, contact Awtomic support.
• Use a theme section that supports app blocks.
• Customers must sign in to their storefront account and have items in their cart to see the button.

This storefront app block is separate from the Card Vaulting checkout extension. Adding one does not configure the other.

1. Enable Storefront Card on File

1. In Awtomic, open Settings → Extras.
2. Find Storefront card on file.
3. Turn on Enable storefront card on file.
4. Approve the requested Shopify permissions so Awtomic can read and update the cart.
5. Wait for the settings-saved confirmation. If a Storefront access required message appears, click Grant access and complete the permission request.
6. Optionally enter a Post-order redirect URL and save your changes. This is the storefront destination customers visit after completing an order. Leave it blank to keep customers on the confirmation page.

2. Add the button to your theme

1. In Shopify admin, go to Online Store → Themes and open the theme editor for the theme you want to update.

2. Open the template where you want the button to appear, such as the cart page.

3. In a section that supports app blocks, click Add block → Apps and select Awtomic’s Card-on-file CTA.

4. Position the block where customers should begin the card-on-file order flow.

5. Configure the block:

   Setting	What it controls
   Button label	The button text. Defaults to Complete Order.
   Helper text	Optional text beneath the button.
   Open checkout	Opens the confirmation experience in a modal over the current page or on its own page. The default is a modal.
   Button styling	Background and text colors, corner radius, width, and vertical spacing.
   Poll the cart for changes	Helps keep button visibility up to date on themes where cart changes do not otherwise update it.
   Custom CSS	Optional additional styling.

6. Save the theme. If you are editing an unpublished theme, preview it to test your changes before publishing.

Placement in a cart drawer depends on whether your theme supports app blocks there.

What customers see

The button appears when the customer is signed in, the cart contains items, and Storefront Card on File is enabled and available for the store. It stays hidden for signed-out customers and empty carts.

The theme editor can show a styling preview even when these conditions are not met. Use the storefront to test the actual order flow.

After clicking the button, customers can review their order, delivery details, and payment method. Customers without a saved payment method can use Add card in the confirmation experience.

Opening the confirmation experience does not place an order. The customer must complete the final order confirmation.

Test your setup

1. Open the storefront or theme preview and sign in with a test customer account.
2. Add a product to the cart.
3. Confirm that the button appears in the expected location.
4. Click it and confirm the order experience opens in the mode you selected.
5. Review the products, delivery information, payment method, and totals.
6. Complete a test purchase when ready. Confirm the order was created and the expected confirmation or post-order redirect appears.
7. Check that the button is hidden when signed out or when the cart is empty.

Troubleshooting