Adding an entire page of custom HTML, CSS & JS to a theme.

Store Design
, , , , ,

Topic summary

Goal: add a standalone HTML/CSS/JS page to a Shopify theme without using Liquid components.

Key steps proposed:

  • Create a new page template in the theme (Liquid file). Add your full page code there.
  • Include the snippet: {% layout none %} to prevent the theme’s default layout from wrapping the page.
  • In Admin > Pages, create a page and assign this new template to it.

Visibility/activation:

  • Templates only appear in the page template selector for the live theme; templates made in a draft theme won’t show.
  • To keep it from public view, don’t add the page to navigation (menu). This was suggested as the practical way to prevent access while testing.

Concerns about interference:

  • Responders stated the custom page won’t interfere with other site code. Using a dedicated template and not linking it publicly minimizes risk.

Artifacts:

  • Images show how to create the template and where to add code. A code snippet with {% layout none %} is central.

Outcome/status:

  • The approach was clarified; the original poster confirmed understanding and thanked participants. Discussion resolved.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi,

I’m new to shopify and was wondering if there is a way to add a page into my Shopify theme without using liquid? I’ve downloaded the full webpages code including all the html/css/js - is there a way I can just add this somewhere to the theme create a working page? Or is there a standard way to integrate this that isn’t extremely complex?
Thanks,

Amy

2

@Aday7 - create a new template in theme files and add all the code you have into this template and save.

then go to pages, create a testing page and change its default template to this newly created html template and check

3

Hi @Aday7 ,

You can follow these steps:

  • Step 1: Create new page template with liquid format.

1.png
1.png1340×650 43.1 KB

  • Step 2: Please add code:

2.png
2.png918×276 18.7 KB

Code:

{% layout none %}
4

Hi,

Thanks for replying so quickly! So I’ve created the template in the theme files and saved using the method in the reply below (this was done in one of the draft themes). If I then go on to adding a new page and linking it to the html template, the template doesn’t show up. Is this because I made the file in a draft theme and not on the live theme? Or because the file ends in .liquid not .json? If I need to add the file into the live theme to link to it I’d like to ensure that this page doesn’t accidentally go live for whatever reason! Thank you for helping

5

@Aday7 hi, yes you need theme to be live to make template visible

6

Ok thank you, and do I select “hidden” for it to not go live? Sorry I’m not sure how this all works and this might be a stupid concern.. I also don’t want any code I have in the file to interfere with any of the other files on the webpages. Is a way that can accidentally happen? For example if classes are the same? I’ve basically copied over all the code of this page including the tag, so I don’t want to add this template file to the live environment and then realise it’s interfering with other parts of the website…

7

@Aday7 it will not, add this code to template and then create a new page to set this template for it.

It will not interfere with other code and do not add this page to menu so visitors will not be able to visit the page.

8

Ok great, thank you so much for your help!