How to add Codepen HTML, CSS and Javascript section to my site

Store Design

Topic summary

  • Integrating CodePen components (HTML, CSS, JavaScript) into a Shopify store; HTML/CSS can be added via Custom HTML sections, but JavaScript cannot be included that way.
  • Suggested approach: place JavaScript/jQuery in theme.js, CSS in theme.css, and add the HTML via a new section or snippet.
  • Important caveat: results depend on the specific theme’s existing JS libraries; a contributor asked for the theme name and the CodePen link to provide precise guidance.
  • Follow-up: another user requested instructions specifically for the Dawn theme (asked twice), indicating interest in theme-specific steps.
  • Status: no final resolution or code examples shared yet. Next steps are to supply the theme name and the CodePen URL for tailored, theme-specific instructions, particularly for Dawn.
Summarized with AI on January 13. AI used: gpt-5.
1

Hi there,

I’m looking to add various Codepen sections to my site, but am unsure of where to put the HTML, CSS, and Javascript files.

I’ve had some success just uploading HTML & CSS files using Custom HTML sections, but I’m unable to add any sections as soon as I need to include Javascript.

Any help here would be greatly appreciated.

Thanks

1 Like
2

Hi there @tynan ,

You can include JS/Jquery in your theme.js file

CSS in theme.css file

and HTML to a new section or snippet

3

Hi @tynan ,

What theme are you using? Each theme will include different JS libraries, so when you add JS, it won’t be possible to be sure everything will work properly.

Can you send me the theme name and codepen link, I will guide you in detail.

4

Please tell for dawn theme

5

please tell for dawn theme shopify