JSX support in Shopify themes?

Online Store and Theme Development
1

I would like to be able to write a shopify component like this that supports and SSR compilation step on Shopifys server. Any thought?

// commponent.jsx
// I would like to be able to write a shopify component like this


import {useState, useEffect} from 'react'
import styled from 'styled-components'
import c from 'classnames'

function LiquidComponent({className}) {

  const [shouldShowSubtext, setShouldShowSubtext] = useState({{section.settings.shouldShowSubtext}});

  useEffect(() => {
    console.log('Example of useEffect in action... {{section.settings.message}}');
  }, [])

  return (
    <div className={c('liquidComponent', className)} onClick={() => setShouldShowSubtext(!shouldShowSubtext)}>
      <p>This is my LiquidComponent in use on a product product page. {{product.title}}.</p>
      {shouldShowSubtext && <p class='subtext'>This is my subtext.</p>}
    </div>
  )
}

export default styled(Component)`
  background-color: {{section.settings.backgroundColor}};
  color: {{section.settings.textColor}};

  .subtext {
    color: {{section.settings.subtextColor}};
  }
`

export const schema = {
  "name": "Component",
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Message",
      "default": "Hello World!",
    },
    {
      "type": "color",
      "id": "backgroundColor",
      "label": "Background Color",
      "default": '#fff'
    },
    {
      "type": "color",
      "id": "textColor",
      "label": "Text Color",
      "default": "#000"
    },
    {
      "type": "checkbox",
      "id": "textColor",
      "label": "Text Color",
      "default": false
    },
    {
      "type": "color",
      "id": "subtextColor",
      "label": "Subtext Color",
      "default": "#ff0000"
    },
  ]
}
2

Shopify themes don’t support React and are built with vanilla JS.

3

Yes, we are dreaming BIG here!

4

Hey - so it’s not completely impossible, but you’ll need something to compile to vanilla JS. See this episode of Liquid Weekly, which describes the general process: https://youtu.be/ZYjurvbVYEs?si=dr_ZPmJEqF3htdvO&t=2176

1 Like
5

We’ve done it, as long as you have something that can compile everything and build it, you can do it. We’ve used custom build tools in the past, but we’ve also used something like Adastra or Vite to do this as well.

We just put a single div with an Id in the section and rendered the React that way, similar to how you would in a React application. Passing props isn’t the best experience as we had to do this with data-attributes in the DOM, but doable. Unfortunately, like others have said, React wasn’t really meant to be put inside of liquid theme code. Maybe you’d like doing headless builds instead?

6

Ok this was really bugging me. The main problem here is I want to write jsx once instead of writing a react app for the interactive parts of my theme and writing
separate html / liquid for SEO structure. Here is my loose criteria:

  1. I only have to write the jsx in the template section file once and have it compile to HTML
  2. The jsx can contain liquid code and still compile to html during dev for SEO
  3. Any liquid variables should maintain their integrity during the prerender and be parsed by Shopify as expected
  4. The React app should be hydrated on the client side seemlessly
  5. I want to write scss in the same section file and have it compile to css in place
  6. I want my schema to be in JS not JSON (nice to have)

The biggest problem here is compiling the jsx with liquid logic inserted but
I think I have a reasonable working version. I put this in an npm package that
is still certainly a WIP but feel free to have a look if you’re interested in pursuing the same development workflow in Shopify themes.

https://www.npmjs.com/package/@josesame/liquidity?activeTab=readme

7

I would like to change that and started hacking away.