Skip to content
English
Customer portal
Go to ifreturns.com
  • There are no suggestions because the search field is empty.

How to embed iF returns portal in your web

This guide explains how to embed the iF returns portal inside your website or application using an iframe

Shopify Integration Guide

This guide explains how to integrate the iF Returns Portal into a Shopify store.

The portal can be integrated in two main ways:

  1. Embedding the portal inside a Shopify page using an iframe

  2. Launching the portal directly from the customer account order page, with the order number and email automatically prefilled

Embedding the portal allows customers to complete the return process without leaving your storefront, creating a smoother post-purchase experience.

1. Portal URL structure

Your portal is available at:

https://go.ifreturns.com/en/marchelacolombinev2

This URL loads the returns interface directly.

2. Language configuration

NOTE: we recommend not configuring this to allow automatic geolocation in embedding

The portal supports multiple languages.

The language is defined by the URL path.

Language Code
German /de/
English /en/
Spanish /es/
French /fr/
Italian /it/
Portuguese /pt/

Example URLs

English portal

https://go.ifreturns.com/en/marchelacolombinev2

Spanish portal

https://go.ifreturns.com/es/marchelacolombinev2

French portal

https://go.ifreturns.com/fr/marchelacolombinev2

If your Shopify store supports multiple languages, you can create separate portal pages per language.

3. Recommended iframe sizing

The portal interface is responsive and adapts to the available space.

For the best desktop experience we recommend:

  • Minimum width: 900px

  • Minimum height: 640px

Typical implementations use:

  • width: 100%

  • height: 900px or greater

Increasing the height improves usability on longer return flows.

4. Recommended iframe embed code

This is the recommended code when embedding the portal in Shopify.

<div style="width:100%; max-width:1200px; margin:0 auto;">
  <iframe
    src="https://go.ifreturns.com/en/marchelacolombinev2"
    width="100%"
    height="900"
    style="border:0; display:block; width:100%; min-height:640px;"
    loading="lazy"
    title="Returns Portal"
  ></iframe>
</div>

Explanation

Attribute Description
src URL of the returns portal
width="100%" Allows the portal to adapt to the container width
height="900" Provides sufficient vertical space
min-height:640px Recommended minimum desktop height
loading="lazy" Improves performance by delaying iframe loading

The container wrapper (max-width:1200px) helps maintain a clean layout on large screens.

5. Advanced integration (Theme-level embedding)

This approach embeds the portal directly inside the Shopify theme.

5.1 Access the Shopify theme code

From Shopify Admin go to:

Online Store → Themes

Locate your active theme, click the three dots menu (⋯) and select:

Edit code

This opens the Shopify theme code editor.

5.2 Create a section for the portal

Inside the theme code editor:

  1. Open the Sections folder

  2. Click Add a new section

  3. Name the section:

if-returns

5.3 Add the iframe code

Inside the new section, insert the following:

<div style="width:100%; max-width:1200px; margin:0 auto;">
  <iframe
    src="https://go.ifreturns.com/en/marchelacolombinev2"
    width="100%"
    height="900"
    style="border:0; display:block; width:100%; min-height:640px;"
    loading="lazy"
    title="Returns Portal"
  ></iframe>
</div>

5.4 Modify the theme layout logic

Open the main theme layout file:

layout/theme.liquid

Add logic so the portal loads only on the returns page.

Example:

{% if request.path == '/pages/returns-portal' %}
  {% section 'if-returns' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

What this does

If the customer visits:

/pages/returns-portal

Shopify loads the returns portal section.

For any other page, Shopify loads the normal page content.

This ensures the portal appears only on the intended page.

6. Create the Shopify portal page

Now create the page that will display the portal.

From Shopify Admin:

Online Store → Pages

Click:

Add page

Set the page title:

Returns Portal

Save the page.

You do not need to add any content, because the portal is loaded automatically through the theme logic.

The page URL will be:

/pages/returns-portal

7. Add the page to store navigation

To make the portal accessible to customers, add it to your store navigation.

Typical locations include:

  • Footer menu

  • Returns policy page

  • Help center

  • Customer service section

Example link:

Returns Portal
→ /pages/returns-portal

8. Testing the integration

Once the integration is complete:

Open the page in your storefront:

https://yourstore.com/pages/returns-portal

Confirm that:

  • the portal loads correctly

  • the layout adapts well to desktop screens

  • the experience works on mobile devices

If the portal appears vertically truncated, increase the iframe height.

Example:

height="1000"

or

height="1100"

9. Launching the portal from Shopify Customer Accounts (Classic version)

You can also allow customers to start a return directly from their order details page inside the Shopify customer account.

In this case, the portal opens with the order number and customer email automatically prefilled, so the customer does not need to manually enter them.

This integration applies to Classic Shopify Customer Accounts, which are rendered using Liquid templates and allow theme customization.

9.1 How it works

When a customer views an order inside their account, the page URL typically follows this structure:

/account/orders/{order_id}

Within this page, Shopify exposes Liquid variables including:

Variable Description
order.name Shopify order number
customer.email Email associated with the order

These values can be passed to the portal URL.

Example structure:

https://go.ifreturns.com/en/marchelacolombinev2?order={order_number}&email={customer_email}

When the portal receives these parameters, the order lookup step can be automatically prefilled.

9.2 Locate the customer order template

To implement this feature, edit the template responsible for rendering the customer order details page.

In most Shopify themes this file is located at:

templates/customers/order.liquid

Some themes may also reference sections inside:

sections/main-order.liquid

Open the relevant file in the theme code editor.

9.3 Add a "Start a return" button

Insert a button or link inside the order page.

Example implementation:

<a
  href="https://go.ifreturns.com/en/marchelacolombinev2?order={{ order.name | url_encode }}&email={{ customer.email | url_encode }}"
  class="button"
  target="_blank"
>
  Start a return
</a>

9.4 Explanation

Element Description
order.name Provides the Shopify order number
customer.email Provides the email address
url_encode Ensures safe formatting for URL parameters

When the customer clicks Start a return:

  1. The portal opens

  2. The order number and email are already included

  3. The return process can begin immediately

9.5 Optional: open the portal inside your store

If you prefer the portal to open within your Shopify site instead of a new tab, link the button to the embedded portal page created earlier.

Example:

<a
  href="/pages/returns-portal?order={{ order.name | url_encode }}&email={{ customer.email | url_encode }}"
  class="button"
>
  Start a return
</a>

In this case:

  1. The customer stays on your storefront

  2. The embedded portal page loads

  3. The order parameters are passed through the page URL

9.6 Recommended placement

The Start a return button is typically placed:

  • on the order details page

  • near the order items list

  • next to order status information

Typical user flow:

My Account
→ Orders
→ View order
→ Start a return
→ Returns portal opens

This provides the most seamless returns experience, since customers do not need to manually enter their order information.

10. Real examples

Examples of stores that implemented embedded returns portals:

Gobik
https://gobik.com/pages/returns-portal

Lady Pipa
https://ladypipa.com/pages/return-portal

These pages embed the returns interface directly within the storefront.

Recommended approach

For most Shopify stores, the recommended setup is:

  1. Create a Returns Portal page

  2. Embed the portal using the iframe

  3. Add a Start a return button in the customer order page

The theme-level integration described in this guide should only be used if you require deeper control over how the portal is rendered.