How to work with .liquid and animations in JS for a custom clothing brand site?

[devvv]

Okay I've been trying to figure out how Shopify .liquid works with animations in js, and adding an enter page with music but neither does my picture load properly it's just blank white I'm also looking into doing a custom theme but I need to know what a good thing to reference anything helps i would like to get a fully working store for a clothing brand like is there a way to do it without having to use the dawn them template if so what important files do i need to be able to do it 

stores link 
https://getnaked.us

p.s. It its a clothing brand

thank you to anyone who helps!

[PaulNewton]

If your not willing to use the reference dawn theme to understand how themes work you have to start from scratch:

https://shopify.dev/docs/themes/architecture 

---

@devvv wrote:

Okay I've been trying to figure out how Shopify .liquid works with animations in js, and adding an enter page with music but neither does my picture load properly it's just blank white 

---

Liquid doesn't run in the users browser. Liquid is server side it just gives output. Liquid doesn't work with animations in js, it doesn't directly connect to javascript or even html or even CSS.

Liquid renders text outputs based on the logic and outputs you create.

If that text is html code then you have a webpage, if that text is CSS styles in <style> tags, or stylesheets, or style attributes in an html element then you have styling, same for javascript.

Whatever the output is either html, css or javascript that's what you then work with.

Put another way, build the thing first in just plain HTML,CSS, and javascript.

Then put it directly in a theme's template file, such as theme.liquid and get that to work

Then figure out how to get liquid to output that similar text but with dynamic server side behavior for the javascript to have different things to work against.

[devvv]

okay i will try thank you for the help was wondering why it wouldnt work at all but now it makes much more sense

[devvv]

okay i seen that hydrogen can support react so i will try with that. thats my fault for not going through the docs. Thank You again!

[PaulNewton]

Hydrogen is for headless storefront architectures it doesn't work with the online-sales channel theme system.