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

Aday7 · ‎12-05-2024

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

suyash1 · ‎12-05-2024

@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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Aday7 · ‎12-05-2024

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

suyash1 · ‎12-05-2024

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Aday7 · ‎12-05-2024

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 <head> 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...

suyash1 · ‎12-05-2024

@Aday7it 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.

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Aday7 · ‎12-05-2024

Ok great, thank you so much for your help!

namphan · ‎12-05-2024

Hi @Aday7,

You can follow these steps:

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

- Step 2: Please add code:

Code:

{% layout none %}
<!-- code HTML -->

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

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

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

Community Blog Articles