Sometimes iFrame codes are provided by vendors, marketing companies or even made yourself to display what essentially amounts to a mini version of the host site to live inside your website. For example, a YouTube video can be included in your website as an embedded iFrame code and what that will show is basically a mini YouTube video player on a page on your website. 


To get started login to your site's Admin.

In this Article

Add iFrame Code to Brand

Some brands/vendors only provide iFrame codes that you can embed on your website in order to show inventory for the brand. If a brand/vendor provides an iFrame code as opposed to actual inventory, you can use these steps to activate the code. Please make sure that the brand/vendor is providing a responsive code (this means it will function properly on its own in mobile). Note: If you do have inventory for a particular brand and you want to use an iFrame as well as actual inventory then you will want to create a new brand. The iFrame code with override any inventory on the brand detail page.

  • From the Dashboard, navigate to Catalog > Brands.
  • Click on the Brand that needs an iFrame code.
  • Scroll down to the field called iFrame and copy-paste the code into that field. In the example you see the iFrame code that was provided to a retailer by Omega.
  • Make sure the Save the brand.
  • You can check to make sure the iFrame is properly displaying on the Brand Detail page by going to the front end of your website and clicking on the brand name to see the details for it. This page should now be showing only the iFrame (not the usual information which would be a logo and a banner).

Add iFrame Code to Existing Page

If you are trying to use an iFrame code for a video or a function that a marketing company provided, you can add it an existing page. Please be sure the company you receive the code from has provided a responsive code. 

  • From the Dashboard, navigate to Content > Pages
  • Click on the name of the Page you want to edit.
  • On the Change Page page, click on the dropdown called Select a Dock and choose Content.
  • From the Widget Library, click and drag the widget called Code Editor into the Content dock in order of where you want the iFrame to sit compared to other items on the page. In this example, the video sits after the Description text on the page.
  • Click on the Code Editor widget in the Docks section to see the options for editing.
  • If the code was given to you and is already responsive then just copy and paste the code into the Source Code Editor section of the widget and Save Widget. 
  • If the code you have is not responsive then follow the steps below to create a responsive code. Then copy and paste the code into the Source Code Editor section of the widget, add embed-responsive to the Custom widget css class(es) section and Save Widget.
  • You can check to make sure the iFrame is properly displaying on the page by going to the front end of your website and clicking on the name of the page you edited to see the details for it.


If you made the code yourself using a service like YouTube or Vimeo then please make sure to make the code responsive using the instructions below. 

Create Responsive Code

  • Before the <iframe> section of the code, place <div class="embed-responsive embed-responsive-16by9">. There are other dimensions you can use if 16by9 is not the proper proportions for your code. The other options are 24by9, 4by3, and 1by1. Just replace the section that says 16by9 with one of other sets of dimensions to try something different.
  • After the </iframe> section of the code, place </div>
  • In the Custom widget css class(es) section of the widget, place embed-responsive. Note: If there are already classes on this particular widget, you can add a comma between classes to use multiples.


The examples below shows how a YouTube video provided by CounterSketch shows with and without the responsive aspects:


Original Code from CounterSketch: <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/HztchWeExUk"></iframe>


Code from CounterSketch with responsive aspects included: <div class="embed-responsive embed-responsive-16by9"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/HztchWeExUk"></iframe></div>

Create New Page for iFrame Code

If you are trying to use an iFrame code for a video or a function that a marketing company provided and you would prefer it to have its own separate page, you can add a new page specifically for the code only. Please be sure the company you receive the code from has provided a responsive code. If you created the code yourself, please make sure to use the Create Responsive Code instructions above.

  • From the Dashboard, navigate to Content > Pages
  • Click on Add Page
  • If you would like to start using this Page right away to check the box next to Published. If you want to use this page later, you can leave it as a Draft by leaving the checkbox unchecked.
  • You can choose a Category for this page to help you find it in the future. This is only used for your own admin organizational purposes and can be left blank.
  • In the Type/Template dropdown make sure to choose General. Note: These codes will only work on pages with the Type/Template called General.
  • Choose the Title for your page. In this example we are calling it Finding Santa. 
  • Leave the Page Slug field as is - it will fill in on its own.
  • Fill in the URL field with the link you'd like the customers to use to find the page. This often matches the slug but is not required to match. In this case it would be /finding-santa/.
  • Click Save and Continue to continue editing this page.
  • On the Change Page page, click on the dropdown called Select a Dock and choose Content.
  • From the Widget Library, click and drag the widget called Code Editor into the Content dock in order of where you want the iFrame to sit compared to other items on the page. In this example, the video sits after the Description text on the page.
  • Click on the Code Editor widget in the Docks section to see the options for editing.
  • If the code was given to you and is already responsive then just copy and paste the code into the Source Code Editor section of the widget and Save Widget. 
  • If the code you have is not responsive then follow the steps above to Create a Responsive Code. Then copy and paste the code into the Source Code Editor section of the widget, add embed-responsive to the Custom widget css class(es) section and Save Widget.
  • You can use this article to help you add this page to your menu.
  • You can check to make sure the iFrame is properly displaying on the page by going to the front end of your website and clicking on the name of the page you added to see the details for it.
  • If you notice that the iframe does not fill the page then go back to edit the Code Editor widget and add col-12 o the Custom widget css class(es) section. You can put a comma between the 2 classes in order to use both. Example: embed-responsive, col-12
  • Then Save Widget and to check the amount of the page that is filled.