From your store's Dashboard click the Site Designer icon in the left Navigation Menu.

The Iframe Block can be added to any Page on your site. In this example, we will add it to the About Us Page. Using the Page: Home dropdown at the top of the Site Designer Page, make sure that your have selected About Us from the list.

On the Home Page, mouse over the page until you see the Plus Sign icon to add a new block. Click the Plus Sign icon and locate the Reusable Components section of the Add A Block menu. Open the section and choose Iframe, using the Add Block button.

Once your block has been added, hover over the new header section and locate the gray Edit button. Use the Edit button to open the Edit Block menu and customize it.

The Edit Block menu for the Iframe Block offers these options:

Header Block Controls

Trash Can Icon to Delete Block
Arrows to move block up or down the page

Make This Block Reusable Toggle

Configure

Padding Top Slider

Padding Bottom Slider

Iframe Src Input Field (for URL of website to appear in Iframe)

Iframe Attributes Add Button

Iframe Attribute Item 1 (Sample), clicking this item opens the following menu:

Attribute Name

Attribute Value

Remove Attribute Button

Iframe Height Slider

Enable Iframe Resizer Toggle

Colors

Make Background Color Full Width Toggle

Background Color Chooser

Make sure to click the Done button at the bottom of the block edit section to save your changes.

Additionally, you will need to click the green Publish button at the top of the page to make your changes live on your store.

As an example, we have added the Center For Disease Control's COVID-19 Precaution page as an Iframe on our site's About Us Page.

Did this answer your question?