I want to embed a full website between the header and footer of a page in my store

Store Design
, , , , , , , ,

Topic summary

A user wants to embed a custom HTML page between their Shopify store’s header and footer at full width and height without scrollbars.

Solutions provided:

  • CSS approach: Use viewport units (height: 100vh; width: 100vw;) on the HTML wrapper class to achieve full-page dimensions.

  • Shopify Pages method:

    1. Navigate to Online Store > Pages in Shopify Admin
    2. Create a new page and switch to HTML mode using the <> button
    3. Paste the custom HTML code directly into the editor
    4. Save the page

Both responses offer practical implementation methods, though the discussion remains open regarding which approach the original poster will adopt or if either fully addresses the no-scrollbar requirement.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I have an HTML page that I have created with no header or footer and want a way to add it full page width and full webpage length (no scrollbar) inside a page of my store. basically

SHOPIFY HEADER

SHOPIFY FOOTER

1 Like
2

Hi @TaskerandShaw

You can do that by using this code

your-html-wrapper-class {
height: 100vh;
width: 100vw;
}
3

Hi @TaskerandShaw ,

I am from Mageplaza - Shopify solution expert.

Please follow these steps to achieve the desired result.

  1. Go to Shopify Admin > Online Store > Pages

  2. Click “Add Page”

  3. Name your page

  4. Click the <> (HTML mode) button in the editor

2025-03-03_10-01.png
2025-03-03_10-01.png1704×587 64.8 KB

5 Paste your HTML code inside the editor
  1. Save the page

Your HTML is now embedded inside a Shopify page!

Please let me know if it works as expected!

Best regards!