Converting HTML, CSS, JS to shopify theme

Technical Q&A

Topic summary

Converting a frontend-only HTML/CSS/JS project into a Shopify theme using Liquid (Shopify’s templating language) and theme file structure.

  • Recommended approach: Place existing HTML directly into Liquid template files, with one template per page type (e.g., product, collection, index). Include JS and CSS either inline in templates or as separate files in the theme’s Assets folder.

  • Technical notes: “Liquid” is HTML with templating tags/filters; “Assets” are theme-managed static files (CSS/JS/images) served by Shopify.

  • Reported issues: Copying raw HTML into Liquid caused problems—SVGs triggered errors and img tags were required to have width and height. Errors did not surface in the browser console, complicating debugging.

  • Open questions: How to resolve SVG compatibility and image dimension requirements when migrating plain HTML into Liquid.

  • Status: Guidance on structure provided; specific integration issues remain unresolved and the thread is open for solutions.

Summarized with AI on February 3. AI used: gpt-5.
1

Hi all, I have a project that has no back-end, only front-end HTML, CSS, JS files. I use node.js(express) to create websites and I’ve worked on a client’s already made shopify website(so I don’t much have experience). Can anyone guide me on how I could integrate it to shopify? Or any link? Should I just start a new project in shopify, change my html files to liquid, drop them in the folders along with HTML/JS and then replace the server tags? I’m kinda confused on how the process is done. Thank you.

1 Like
2

Liquid code is a marked-up version of html so you can put the html straight into the liquid template files. There’s one file per ‘type’ of page e.g. products, collections, index etc.

You can either embed your js in those pages or as an ‘asset’ file. Same with css.

3

I tried copying the code of the HTML file inside the Liquid file but I faced many problems like: SVG causes error, img tag should have width and height, and even more problems I could not find a solution for it

it doesnt even show error in console

Does anyone faced the same problem and find a way to solve this?

Thank you in advance