Swift Cart Tutorial

1

Go to the Shopify App Store

In your Shopify admin, click Apps in the left menu, then click Shopify App Store at the top of the page. You can also search "Swift Cart" directly at apps.shopify.com.

2

Search for "Swift Cart" and click Add app

Find Swift Cart by Fairpoint, then click the Add app button. Shopify will show you the list of permissions the app needs — these are standard and only allow the app to style your cart drawer.

Note: Swift Cart only requests the permissions it needs to customize your cart drawer appearance. It does not access customer data or orders.

3

Approve the permissions

Click Install app on the permissions page. You'll be redirected to the Swift Cart settings panel inside your Shopify admin. Installation is complete — no theme edits, no manual code insertion.

1

Open the Swift Cart settings

In your Shopify admin, go to Apps → Swift Cart. The settings panel opens with a live preview of your cart drawer on the right side.

🖼️ Screenshot — Settings panel overview Coming soon with video walkthrough

2

Set your cart title

In the Cart Title field, type the heading you want to appear at the top of your cart drawer. Popular options include: "Your Bag", "My Order", "Shopping Cart", or your brand name. Leave it blank to keep the theme default.

Pro tip: Using a friendlier title like "Your Bag" instead of the generic "Cart" makes your store feel more personal and can improve cart completion rates.

3

Choose your background color

Click the Background Color swatch to open the color picker. You can drag the color picker, use the hue slider, adjust brightness, or type a HEX code directly (e.g. #1a1a2e). The preview updates in real time.

🖼️ Screenshot — Color picker interface Coming soon with video walkthrough

4

Set your text color

Use the Text Color picker to set the color for all text inside the cart drawer — product names, prices, quantities, and the total. Make sure there's enough contrast with your background color — Swift Cart will warn you if the contrast ratio is too low.

5

Style your checkout button

In the Checkout Button section, set the button background color, button text color, and the button label text. You can also adjust the border radius (sharp, rounded, or pill). A prominent, on-brand checkout button can significantly lift your cart-to-checkout conversion rate.

Best practice: Use a button color that contrasts strongly with both the cart background and the button text. High-contrast buttons get more clicks.

1

Check the live preview

The right panel shows an accurate preview of your cart drawer as it will appear to customers. Scroll through the preview to check how item names, prices, and the checkout button look together.

2

Preview on your live store (optional)

Click Preview in store at the top of the settings panel to open your storefront with a preview of the changes applied — without publishing them yet. Add a product to cart and open the cart drawer to see how it looks in context.

3

Click Save — you're live

When you're happy with the result, click the Save changes button. Your customizations are published instantly to your live store — all visitors will see the updated cart drawer immediately.

Note: Changes go live site-wide instantly. There's no staging step — make sure you're happy with the preview before saving.

🎨

Match your brand palette exactly

Use HEX codes from your brand guidelines for pixel-perfect color matching. If you don't have a brand guide, use a tool like Adobe Color or Coolors to create a cohesive palette from your logo colors.

🔘

Make your checkout button pop

Your checkout button should be the most eye-catching element in the cart. Use a high-contrast color — if your cart background is dark, go bright. If it's light, go bold. Avoid using the same color as the cart background.

✍️

Customize button text for urgency

Instead of "Checkout", try "Complete my order →" or "Buy now — secure checkout". Action-oriented, specific text outperforms generic labels. A/B test different labels to see what resonates with your customers.

📱

Test on mobile before publishing

Over 60% of Shopify cart views happen on mobile. After customizing, use the "Preview in store" button on your phone to check how everything looks on a real mobile screen before going live.

🌗

Consider dark mode users

Many shoppers browse in dark mode. If you choose a dark cart background with light text, it'll naturally suit dark mode users. Light backgrounds with dark text also work well — just ensure contrast is always above 4.5:1 for readability.

🔄

Refresh seasonally

Update your cart colors during seasonal campaigns (Black Friday, Christmas, Valentine's Day) to create a cohesive promotional feel across your store. It takes 2 minutes and makes your store feel more polished during sales events.

Step-by-step video guides are being recorded and will be published here soon. Subscribe below to get notified when each video drops.

▶

Complete setup walkthrough

Install to live in under 2 minutes

COMING SOON

▶

Color customization deep-dive

Getting your brand colors exactly right

COMING SOON

▶

Checkout button optimization

Button copy & color that converts

COMING SOON

▶

Mobile testing your cart

How to check your cart on any device

COMING SOON

Get notified when videos drop

No spam — just one email per new video published.

Install Swift Cart

Customize your cart drawer

Preview your changes & go live

Advanced tips to boost conversions

Video walkthroughs