Relevate Documentation

Installation

1. Install the Relevate app from the Shopify App Store.
2. After installation, open the app from your Shopify Admin sidebar.
3. Follow the setup wizard on the dashboard to get started.

Setup Wizard

The dashboard shows a three-step setup wizard to guide you through the initial configuration:

1. Enable Smart Cart — Toggle the module on from Settings.
2. Add Theme Extension — Enable the Relevate Smart Cart block in your theme's App Embeds. The app will detect this automatically.
3. Customize your cart — Open the Cart Builder to arrange widgets and set up thresholds.

Enable the Theme Extension

Relevate uses a Theme App Extension to inject the Smart Cart drawer into your storefront. To enable it:

1. Go to Online Store → Themes → Customize.
2. Open App Embeds (left sidebar, toggle icon at the top).
3. Find Relevate Smart Cart and toggle it on.
4. Click Save.

Cart Builder

The Cart Builder (Smart Cart → Builder) is your main workspace. It has three sections:

• Widgets — Drag and reorder the building blocks of your cart (progress bar, items, recommendations, subtotal, etc.).
• Thresholds — Define spending tiers that unlock rewards (free shipping, free products, upsells).
• Design — Customize colors, border radius, cart width, overlay, and more.

Changes are saved per section — click Save after making changes in each tab.

Widgets

Widgets are the building blocks of your cart drawer. Each widget can be enabled/disabled and reordered.

Sticky Widgets

Any widget can be set to "stick" to the top or bottom of the cart drawer while the customer scrolls through cart items.

In the Cart Builder, each widget has a Sticky Position option:

• None — Normal flow, scrolls with content.
• Sticky Top — Stays pinned at the top of the cart when scrolling down.
• Sticky Bottom — Stays pinned at the bottom. When the customer scrolls to the very end, the widget "unsticks" and any widgets below it become visible.

Global Settings

Available in the Design tab of the Cart Builder:

• Primary & Secondary Color — Used for buttons, progress bar, badges.
• Background & Text Color — Cart drawer background and text.
• Border Radius — Controls roundness of buttons and cards.
• Cart Width — Width of the drawer (e.g. 400px, 480px).
• Cart Title — Text shown at the top (e.g. "YOUR CART").
• Overlay — Enable/disable the dark overlay behind the cart.
• Open on Add — Automatically open the cart when a product is added.
• Hide Theme Cart — Hides the default theme cart drawer.
• Redirect /cart — Redirect the /cart page to homepage and open the Smart Cart.
• Custom Trigger Selector — CSS selector for additional elements that should open the cart on click.

Custom CSS

Add custom CSS in the Cart Builder's Design tab. This CSS is injected into the storefront and can override any Smart Cart style.

/* Example: make the checkout button rounded */
.relevate-checkout-btn {
  border-radius: 50px;
}

/* Example: custom progress bar color */
.relevate-progress-fill {
  background: linear-gradient(90deg, #ff6b6b, #ee5a24);
}

Progress Bar Thresholds

Thresholds are spending tiers that unlock rewards. Each threshold has:

• Value — The cart subtotal needed to unlock the reward (in your store's currency).
• Reward Type — What the customer gets.
• Icon — Shown on the progress bar (default emoji, product image, or custom image).
• Labels — Customizable "amount remaining" and "reached" messages with placeholders.

The progress bar automatically calculates progress based on the cart subtotal (excluding free reward items).

Available placeholders for labels:

• {{remaining_amount}} — Amount left to reach the threshold.
• {{product_title}} — Name of the reward product.
• {{discount_amount}} — Discount value (% or fixed).

Free Shipping

A decorative reward — displays a message when the customer reaches the threshold. You need to configure actual free shipping separately in Shopify's shipping settings.

Free Product (Auto-Add)

When the cart subtotal reaches the threshold, a product is automatically added to the cart for free. If the subtotal drops below the threshold, the product is automatically removed.

How it works behind the scenes:

1. You select a product variant in the builder and save the threshold.
2. The app creates a Shopify automatic discount (100% off the selected variant) with a minimum subtotal requirement.
3. On the storefront, the product is added via the Cart API with special properties that mark it as a reward item.
4. The discount applies automatically at checkout, making the product free.

Paid Upsell (Offer Card)

When the threshold is reached, an offer card appears in the cart showing a product at a special price. The customer can choose to add it.

1. Select a product variant and set the Offer Price (must be lower than the original price).
2. The app creates a Shopify automatic discount for the price difference.
3. The cart drawer shows the offer price (original price struck through). The actual discount is applied at checkout.

Order Discount

A percentage or fixed-amount discount applied to the order. This is a decorative display in the cart — configure the actual discount in Shopify separately, or use it as a visual motivator.

Custom Labels & Icons

Each threshold supports:

• Icon type — Default emoji, product image, or a custom uploaded image URL.
• Icon size — X-Small, Small, Medium, Large.
• Amount Remaining label — Shown while the customer hasn't reached the threshold yet.
• Amount Reached label — Shown after unlocking the reward.

Recommendation Sources

The Recommendations widget supports four source types:

Cart-Based Recommendation Rules

With the Manual (Cart-Based) source, you can create rules:

• Product trigger — When this product is in the cart, show specific recommendations.
• Empty cart trigger — Show recommendations when the cart is empty.
• Fallback — Fill remaining slots when no rules match or matched rules don't fill all slots.

App Proxy

The Smart Cart extension fetches its configuration from the app server via Shopify's App Proxy at:

/apps/relevate/api/cart-config

This endpoint is public (no authentication required) and returns the cart configuration for the requesting store. The App Proxy is configured automatically during installation.

Troubleshooting

Cart drawer doesn't appear

• Make sure the theme extension is enabled in Online Store → Themes → Customize → App Embeds.
• Check that Smart Cart is enabled in the app settings.
• Clear your browser cache or test in an incognito window.

Default theme cart still shows

• Ensure Hide Theme Cart is enabled in Settings.
• If your theme uses a non-standard cart drawer, add its CSS selector to Custom CSS with display: none !important.

Free product / upsell discount not applying

• Check Shopify Admin → Discounts for an automatic discount named "Relevate Reward - ...".
• If missing, re-save the threshold in the Cart Builder — this recreates the discount.
• Make sure no other discounts conflict (Shopify limits combining certain discount types).

Recommendations not showing

• Ensure the Recommendations widget is enabled in the Cart Builder.
• For Shopify Recommendations, at least one product must be in the cart.
• For Collection source, verify the collection handle exists and has products.

FAQ

Does Relevate work with all Shopify themes?

Yes. Relevate uses a Theme App Extension that injects independently of your theme. It automatically hides most common theme cart drawers. For non-standard themes, you can add custom CSS selectors to hide the default cart.

Does the free product really show as free at checkout?

Yes. The app creates a Shopify automatic discount that makes the product $0 at checkout. In the cart, it may show the original price with a "FREE" badge — the actual discount is applied by Shopify at checkout.

Can I have multiple thresholds?

Yes. You can create as many thresholds as you want. The progress bar will show icons for each tier and track progress toward the highest threshold.

How do I customize the cart drawer appearance?

Use the Design tab in the Cart Builder for colors, radius, and width. For advanced styling, use the Custom CSS field — all cart elements use .relevate- prefixed classes.

Need more help?

Contact us at biuro@specodit.pl and we'll be happy to assist.