I looked around a little bit and it seems like your CSS style-sheets have some overlapping class names.
the class .card for example is included in both theme.scss.css and custom-styles.css
theme.scss.css has the following attributes set for .card:
transition: all 500ms ease-out
The opacity is causing your cards to not appear and the width + tranform attibutes are causing the alignment to be all janky.
I quickly disabled the opacity from the theme.scss.css stylesheet using the Chrome developer console and this is what I got:
Now disabling the Width and Translate Attributes:
You'll see that it's still not perfect, but it's a step in the right direction. I recommend you make sure there aren't any other overlaps in the style-sheets that might be causing them to compete.
Also I noticed you didn’t mirror the structure that you have in your Webflow layout:
In the webflow project each card is inside a column div as seen below
But in the shopify project only the second card is inside a column div:
Anywho hope this helps.