Streaming live at 10am (PST)

Webflow page export and integration to Shopify


#1

hi there.
I’ve designed a page in Webflow that I would like to export and use on my clients Shopify webshop. I’ve managed to export and implement the HTML through the RTE and link it to a custom stylesheet with the CSS from Webflow as well. But it’s acting weird - like it crashes or doesn’t load properly.
I know it’s probably just mee overseeing something but can’t figure out what.

example: https://originalcoffee.dk/pages/kaffebarer-test

Any help or tips would be appreciated


#2

Can we see the Webflow project as well? For comparison.


#3

Sure. here you go: http://oc-kaffebarer.webflow.io/


#4

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:

width: 100%
opacity: 0
transition: all 500ms ease-out
transform: translateY(50px)
-webkit-transform: translateY(50px)
-ms-transform: translateY(50px)

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
shopify 2

But in the shopify project only the second card is inside a column div:
shopify 3

Anywho hope this helps.


#5

oooh yes! that was it! thanks!!

I changed the class name and made a new export and it works like a charm now. Stupid mistake.

very much appreciated @Modii!


#6

Hi I was just searching to know about some best Shopify theme for my online store actually currently I implemented a minimalistic theme but I am not getting conversion from that so kindly give me guide me regarding a best converting theme. Here i found a guide on theme…can anyone guide me on it https://www.withintheflow.com/best-shopify-themes/