Exchanges
      Back to home
      1. Knowledge Base
      2. Return Resolutions
      3. Exchanges

      Shop Now

      Last Updated: December 9, 2024

      The Shop Now feature lets customers use the value of their returned items as credits to shop for new items directly in your store. They can select multiple items, pay the difference if necessary, and complete the exchange in a seamless shopping experience. 

      Requirements

      This feature is currently in beta and not yet available to all merchants. Apply to join the beta.

      • Shopify store with an active ReturnGO integration.

      Limitations

      • Shop Now doesn't support items with compare-at-price discounts or promotions during exchanges.

      • When using the Shop Now feature, some exchange calculation options are automatically disabled, including:
        • Exchange price source (exchange price differences are calculated based on paid price only)
        • Buy X Get Y (BxGy) discounts
        • Free exchange range

      Capabilities

      • Customers can add additional items beyond their exchange credit and pay the difference.

      • The Shop Now Switch to Exchange page can be customized to display marketing banners, collections, or special offers, and incentives can be added.

      • The floating widget updates exchange credits in real-time as customers add or remove items.

      • Discounts, gift cards, and changes made to the cart are accurately reflected when returning back to the portal.

      • The widget is semi-transparent, and draggable so as not to obstruct any key information.

      • The widget supports any language and currency.

      How It Works

      The Shop Now feature enhances the exchange process, allowing customers to use credits from their returned products to shop for new items. They can browse your store, add items to their cart, and complete purchases using their exchange credits. This feature uses the any to any exchange flow to let customers use their return balance as exchange credits.

      The customer flow is as follows:

      1. Customers request a product exchange or Shop Now.

        • If the customer chooses a product exchange for at least one item, they are automatically redirected to your store to select new items.

        • If a customer requests a refund or variant exchange and no product exchange, they will choose a return reason for each item and then they will see a Switch 2 Exchange screen suggesting they use their credits to shop for new items.

          ShopNow4

      2. When customers select to shop now with their credits, they are taken to your store with a floating widget displaying their available exchange credits.

      3. They can add as many items as they want, with the widget updating in real-time to show their current credits.

      4. After selecting the new items they want, customers are redirected back to the ReturnGO portal to complete the request and pay the difference if the total value of the new items exceeds the available credits.

        1. Like with any exchange via ReturnGO, customers can pay for price differences and fees directly in the portal if you have portal checkout enabled. Otherwise, customers will receive a Shopify invoice.

      Configuring the Shop Now Feature

      1. Go to Settings > Store Settings.

      2. Open the Exchanges section.

      3. Enable the In-Store Exchanges toggle.

      4. Click on the save icon to save your changes.


      Incentivize Switching to Exchange

      You can reduce refunds by offering customers an incentive to switch their refund requests to exchanges instead through the Shop Now page.

      To set up the Switch to Exchange incentive:

      1. Go to Settings > Store Settings.

      2. Open the Refunds Prevention section.

      3. Make sure the Encourage Customers to Switch Refunds to Exchanges toggle is enabled. 

      4. Configure the incentive amount you want to give, which can be a percentage of the item value or a fixed amount.

      5. Choose the type of bonus to give, either as a gift card or as store credit.

      6. Click on the save icon to save your changes.

      7. Customize the Shop Now Switch to Exchange page:

      a. Go to Settings > Portal > Look and Feel.

      b. Click on Return Portal.

      ShopNow3-1

      c. Open the General section.

      ShopNow general

      d. Open the Switch to Exchange page section.

      e. Choose a page layout.

      f. Add images as marketing banners, collections, or offers.

      g. Customize the destination URL.

      h. Click the save icon to save your changes.

      Desktop - 6-1

      Advanced Setup for Liquid Themes

      For stores using Liquid themes, you may need to configure additional attributes for buttons or forms that interact with cart updates or checkout redirection.

      Adding Attributes to Buttons and Forms

      If cart updates or checkout redirections are not being captured, you can manually add specific data-returgo attributes to your HTML elements:

      There are two key attributes you can add:

      • data-returgo-shop-now-click – Captures click events on buttons or links.
      • data-returgo-shop-now-submit – Captures form submission events.

      Each attribute supports the following values based on the action you want to trigger:

      • "cart-update" – Synchronizes the cart and updates the Shop Now overlay widget.
      • "checkout" – Redirects the user to the return portal to continue with the return process.

      Example HTML

      <!-- To capture click events on buttons -->

      <button data-returgo-shop-now-click="cart-update">Add to Cart</button>

      <button data-returgo-shop-now-click="checkout">Go to Checkout</button>

      <!-- To capture form submission events -->

      <form data-returgo-shop-now-submit="cart-update">

        <input type="submit" value="Update Cart">

      </form>

      <form data-returgo-shop-now-submit="checkout">

        <input type="submit" value="Proceed to Checkout">

      </form>

      Using JavaScript to Perform Actions

      If your store uses JavaScript for cart updates or checkout redirections, you can trigger these actions programmatically with the following globally-available functions:

      Cart Synchronization:

      To update the Shop Now overlay and synchronize the cart, call:

      window.returnGoShopNow.handleCartUpdate(e?: Event);

      Checkout Redirection:

      To redirect the user to the return portal, call:

      window.returnGoShopNow.handleCheckout(e?: Event);

      Note: These functions are only available on window.returnGoShopNow when the Shop Now flow is active. To safely call these methods in your script, ensure that they exist before invoking them.

      Example

      if (typeof window.returnGoShopNow.handleCheckout !== "undefined") {

        window.returnGoShopNow.handleCheckout(e);

      }

      if (typeof window.returnGoShopNow.handleCartUpdate !== "undefined") {

        window.returnGoShopNow.handleCartUpdate(e);

      }

      Headless Stores (Hydrogen)

      If your Shopify store is Hydrogen-based, the following additional steps need to be taken before on-store exchanges can be enabled for your store.

      Note: These instructions are only relevant if the regular Shop Now settings don't work to enable the feature on your store.

      You’ll need to include the ReturnGO script on all pages by creating a React component that loads the script. Then, you'll include this component in your root.jsx file or a page template shared across all pages. 

      To enable the Shop Now feature on Hydrogen-based stores:

      1. In your Hydrogen theme app, create a new component file (e.g. ReturnGoScript.jsx)
      2. Paste this sample code, which will load the ReturnGO script: Example:

        import { useEffect } from "react";
        import { useLoadScript } from "@shopify/hydrogen";

        export default function ReturnGoScript() {
            // Load the ReturnGO script
            useLoadScript('https://static.returngo.ai/master.returngo.ai/returngo.min.js?shop=example.myshopify.com');

            useEffect(() => {
                // Configure the ReturnGO object
                window.returnGoCanBeRun = true;
                window.ReturnGO = {
                    shop: 'example.myshopify.com', // Replace with your shop URL (without https://)
                    currency: {
                        active: 'USD', // Portal currency
                        rate: '1.0', // Conversion rate between portal and store currencies (if different)
                    },
                    locale: 'en', // Display locale
                };
            }, []);

            return null;
        }
      3. Search for root.jsx or a common page template.
      4. Include the new component in the template by pasting it into your your root.jsx file, just after the <Scripts /> tag, or in any page template that is shared across all pages.

      Embed the Return Portal into a Custom Page

      To embed the return portal in a custom page:

      1. In the code editor, click on the template for your custom returns page where you want to embed the portal.
      2. Paste the following HTML structure to embed the return portal on the page:
        <div id="ReturngoPortalEmbedding" style="position: relative; display: block; min-height: 600px; background-color: #FFFFFF">
            <style>
                .loaderContainer {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    inset: 0;
                    background: white;
                }

                .loader {
                    display: block !important;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                    border-radius: 50%;
                    width: 4em;
                    height: 4em;
                    font-size: 18px;
                    text-indent: -9999em;
                    border: 0.3em solid #D8D8D8;
                    border-left: 0.3em solid #FFFFFF;
                    transform: translateZ(0);
                    animation: load8 1.1s infinite linear;
                }

                @keyframes load8 {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>
            <div class="loaderContainer">
                <div class="loader"></div>
            </div>
        </div>
      3. Click SAVE.

      ShopNow headless3-1

      Troubleshooting for Headless Stores

      1. Content Security Policy (CSP) Errors

        If you're encountering errors where the ReturnGO script cannot be loaded or requests are blocked, it's likely due to CSP restrictions. You will need to update your CSP settings to allow ReturnGO resources.

        In your root.jsx, locate the createContentSecurityPolicy call, and add https://static.returngo.ai to both the connect-src and script-src directives.

      2. Styles and Fonts Not Loading

        If styles or fonts are not loading properly, it's likely due to CSP restrictions. To fix this:

      • Add 'unsafe-inline' to the style-src directive.
      • Allow font and stylesheet resources from Google by adding https://fonts.googleapis.com/ to connect-srcand https://fonts.gstatic.com to font-src.

      The updated CSP configuration should look like this:

      const { nonce, header, NonceProvider } = createContentSecurityPolicy({
          shop: {
              checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
              storeDomain: context.env.PUBLIC_STORE_DOMAIN,
          },
          scriptSrc: [
              "'self'", 
              "https://cdn.shopify.com", 
              "https://shopify.com", 
              "https://static.returngo.ai"
          ],
          styleSrc: [
              "'self'", 
              "'unsafe-inline'", 
              "https://cdn.shopify.com", 
              "https://fonts.googleapis.com/"
          ],
          connectSrc: [
              "https://static.returngo.ai", 
              "https://fonts.googleapis.com"
          ],
          fontSrc: [
              "https://fonts.gstatic.com"
          ]
      });

      For any other issues, feel free to contact ReturnGO support through chat or email.