Shop Now

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

• 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:
  • 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.

Shop Now 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 to Exchange screen suggesting they use their credits to shop for new items.

     
     

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 Shop Now toggle.

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

5. Enable the ReturnGO app embed in your Shopify store, to make sure ReturnGO can run its script on all your store’s pages.

6. Test Shop Now in preview mode. You can do this by clicking on the link in the settings, or going to [your-return-portal-url]?exchangeInStore=1. This enables you to test that the flow works without generating a real RMA. To test:

a. Ensure there is a product exchange policy rule set up in the system, and verify that product exchange can be selected in the portal.

b. After all return reasons have been selected, verify that you are redirected to the store.

c. Confirm that the floating widget appears on the page and shows the number of exchange credits available for use.

d. Attempt to proceed to checkout, either through your site or via the widget. Verify that instead of being sent to Shopify’s checkout, you are redirected back to the portal.

e. If any issue arises during these stages, you'll need to manually configure the relevant part of Shop Now (or all of it) to ensure the feature works correctly.

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.

c. Open the General section.

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.

Fraud Prevention

To protect against fraud and abuse, customers identified as high-risk by ReturnGO's ReturnScore (based on return history and other criteria) are ineligible for Shop Now incentives.

To prevent customers from repeatedly returning items solely to receive the bonus credit, high-risk customers will not receive an incentive for switching to an exchange. While Switch to Exchange will still be offered, high-risk customers will not be eligible for the incentive.

It’s important to note that ineligibility for the incentive is rare and reserved for extreme cases.

Advanced Configuration

Complete manual setup is required if you are using a custom platform or Liquid.

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 to the following buttons or forms:

• 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.
• "buy-now" – Triggers the “Buy it Now” action (clears cart + adds the current product to cart + redirects to portal).

To capture click events on buttons, use the following format: data-returgo-shop-now-click.

To capture form submission events, use the following format: data-returgo-shop-now-submit.

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);

Example

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

  window.returnGoShopNow.handleCheckout(e);

}

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

  window.returnGoShopNow.handleCartUpdate(e);

}

Troubleshooting For Regular Shopify Stores

For regular Shopify stores, if only one step is not functioning correctly, you can configure just that specific step.

Depending on the issue—whether it’s related to redirecting to checkout or updating the cart—you’ll need to add the relevant attribute to your store.

Widget Not Appearing

If the widget is not appearing, this indicates that the ReturnGO script is not running on all your pages. In this case:

• Your store may be blocking the script.
• Make sure ReturnGO’s app embed is enabled through Shopify’s theme customization.
• Try disabling and re-enabling the Shopify integration toggle on the Integrations > Products & Services page.

Headless Stores (Hydrogen)

If your Shopify store is Hydrogen-based, the following additional steps need to be taken before Shop Now exchanges can be enabled for 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 (Optional)

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.

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.