Getting Started — Relevate

Getting Started with Relevate

Follow these six steps to set up your Smart Cart and start boosting conversions in minutes.

1
Install & Enable

Get the app installed and activate the Smart Cart module.

  1. Install Relevate from the Shopify App Store.
  2. Open the app from your Shopify Admin sidebar and follow the setup wizard on the dashboard.
  3. Navigate to Smart Cart → Settings and toggle “Enable Smart Cart” on.
NoteThe dashboard will show a three-step checklist tracking your progress. Green checkmarks appear as you complete each step.
2
Add Theme Extension

Enable the Relevate block in your theme so the Smart Cart drawer appears on your storefront.

  1. Go to Online Store → Themes → Customize.
  2. Open App Embeds by clicking the toggle icon in the left sidebar (it looks like a set of blocks).
  3. Find “Relevate Smart Cart” in the list and toggle it on.
  4. Click Save in the top-right corner.
TipThe app automatically hides the default theme cart drawer once Relevate is enabled. No extra configuration needed.
3
Design Your Cart

Customize the look and feel of your cart drawer to match your brand.

  1. Open Smart Cart → Builder → Design tab.
  2. Set your brand colors — primary, secondary, background, and text color.
  3. Choose a cart width (default is 400px; wider carts work well for stores with long product names).
  4. Set a cart title, for example YOUR CART or TWÓJ KOSZYK.
  5. Configure the overlay (dim background when cart is open) and border radius for buttons and cards.
  6. Click Save.
4
Arrange Widgets

Widgets are the building blocks of your cart. Enable, disable, and reorder them to create the perfect layout.

  1. Go to the Widgets tab in the Cart Builder.
  2. Enable or disable the widgets you want. Available widgets include Progress Bar, Cart Items, Recommendations, Upsell Products, Announcement, Custom HTML, Subtotal, and Trust Badges.
  3. Drag to reorder them. Recommended order:

Recommended Widget Order

  1. Progress Bar
  2. Cart Items
  3. Recommendations
  4. Subtotal
  5. Trust Badges
  1. Set Progress Bar to “Sticky Top” and Subtotal to “Sticky Bottom” for the best user experience — this keeps the reward progress and checkout button always visible.
  2. Configure each widget's settings: recommendation source, trust badge text and icons, checkout button text, empty cart message, and more.
  3. Click Save.
5
Set Up Reward Thresholds

Thresholds are spending tiers that motivate customers to add more to their cart by unlocking rewards.

  1. Go to the Thresholds tab in the Cart Builder.
  2. Click “Add Threshold”.
  3. Set the spending amount customers need to reach (e.g., $50).
  4. Choose a reward type:

Free Shipping

A motivational reward — displays a congratulatory message when the threshold is reached. You need to set up actual free shipping separately in Shopify's shipping settings.

Free Product

Select a product that will be automatically added to the cart for free when the spending threshold is reached. The app creates a Shopify automatic discount behind the scenes.

Paid Upsell

Select a product and set an offer price. When the threshold is reached, an offer card appears in the cart showing the product at the discounted price.

  1. Customize the progress message and icon for each threshold (default emoji, product image, or a custom image URL).
  2. Click Save.
ImportantFor Free Product and Paid Upsell rewards, the app automatically creates Shopify discounts. Make sure no conflicting discounts are active, as Shopify limits combining certain discount types.
6
Test Your Cart

Make sure everything works perfectly before going live.

  1. Visit your store in a browser (use an incognito window to avoid cached styles).
  2. Add products to the cart and verify the Smart Cart drawer opens automatically.
  3. Check that the progress bar updates as you add items and approach your threshold amounts.
  4. Test threshold rewards — add enough products to trigger each tier and verify the correct reward activates (free product appears, offer card shows, etc.).
  5. Complete a test checkout to verify that discounts are applied correctly at the payment step.
  6. Test on mobile — resize your browser or use a phone to confirm the cart is fully responsive.
TipIf the cart drawer does not appear, double-check that the theme extension is enabled (Step 2) and that Smart Cart is toggled on in Settings (Step 1).

Pro Tips

Custom CSS

Use the Custom CSS field in the Design tab for advanced styling. All cart elements use .relevate- prefixed classes.

Cart-Based Recommendations

Set up cart-based recommendation rules to show different products depending on what is already in the customer's cart — great for cross-selling.

Announcement Widget

Use the Announcement widget for time-sensitive promotions, shipping notices, or holiday messages. It supports a custom background color.

Mobile-First

The Smart Cart is fully responsive out of the box. Always test on mobile devices — that is where the majority of e-commerce traffic comes from.

Ready to dive deeper?

Explore the full documentation for detailed guides on every widget, threshold type, recommendation source, and advanced configuration option.

Read the Full Documentation