How to create a new page and include an iFrame in Shopify

Option 1: Create the page directly from the page editor

  1. From the Shopify admin panel, access the Sales channels" -> "Online Store" section and select the “Pages" option


    1. Create a new page with the title name "returns-portal".
    2. Then click on the “Show HTML" button and paste the following code: ⬇️
  2. <iframe src="https://go.ifreturns.com/marchelacolombine2 "height="800" width="100%" title="ifreturns"></iframe>


  3. Instead of "marchelacolombine2" you need to put your shop_code name
  4. Once the page is created, create a new option in the footer or on the return policy page to link to the new page you just created.
    1. For example, the new page would look like this: https://marchelacolombine.com/pages/returns-portal
  5. Test its operation.
    1. Once the changes have been saved, the new page https://marchelacolombine.com/pages/returns-portal will load the returns portal integrated within the site.


 

Option 2: Modify the site Theme (for more control of the portal design)

⚠️Use this method only if you want to have more control over how the portal is displayed inside your store.

  1. From the Shopify admin panel, access the “Sales channels" section, select "Themes”, click on the three dots and choose the “Edit code" option.
  2. On the code editing page, create a new section with the name "if-returns” and insert the following code:
    1. <iframe src="https://go.ifreturns.com/marchelacolombine2 "height="800" width="100%" title="ifreturns"></iframe>
  3. Modifies the file containing the main logic of the theme (for example, theme.liquid).
    Add the necessary logic to display the “if-returns" section only when the URL is /pages/returns-portal. On any other page, the normal logic of the topic should be maintained. Then save the changes.
  4. From the Shopify admin panel, go back to the “Sales Channels” → “Pages” section
  5. Create a new page called "returns-portal” and save.
    In this case it is not necessary to add content, since the logic and the content are handled directly from the theme file.liquid.
  6. Once the page is created, add a new option in the footer or on the return policy page to link to it.
    1. For example, the address would be:
      https://marchelacolombine.com/pages/returns-portal
  7. Test the operation.
    1. Once the changes have been saved, when visiting
      hhttps://marchelacolombine.com/pages/returns-portal, the returns portal will be displayed integrated within the website.