Shopify Integration with Webflow

Design help Webflow integrations
1

Hi everyone!

I’m trying to open up a store using Shopify, but for some reason when I publish my design changes dramatically.

https://preview.webflow.com/preview/blacfashion?utm_medium=preview_link&utm_source=designer&utm_content=blacfashion&preview=cfee08c59a9bc6803cd09369501ddd7e&mode=preview

This is my preview link and things are looking good when I look there, but that’s not how things are when I publish.
Can anybody please help me figure what’s the issue going on here?

2

What is the published URL?

3

Published URL is Blacfashion.webflow.io
Sorry it took me that long to get back to you.

4

Everything seems to be looking fine the preview, but on the published site, it’s just blank.

5

Looks like interactions are setting the opacity to 0 on elements under featured products.

6

I’m sorry could you please help me as to where this is happening? I don’t see any interactions setting opacity to 0%.

Also, the same exact layout is used on the “Sweatshirts” page, but the products show normally. This is really confusing.

7

Do you know how to inspect a page source with browser dev tools?

8

I’m not that good at it, but I can work my way around. The things is I won’t be able to fix it back in Webflow if I don’t see where this is happening.

9

You can see which element is being effected in dev tools then go back and look at your styles / interactions to resolve the issue. In your case you are setting the opacity of the link block item-overlay to 0 with CSS. Thus it is not visible. So either change that to 1 or do it with an interaction (which was probably your intent).

10

Alright I found it.
I can’t thank you enough, but what confuses me, is that the same exact effect is applied in the sweatshirts page, and to the item overlay there, but for some reason it is showing unlike the homepage and the hoodies page.

11

You’re welcome. Pay it forward.

Same class same settings. Different class … (I did not look)

1 Like
12

Hey Omar,

I have had a similar thing happen where the interactions set the display to none on all of the pages. I don’t think the Page Load interaction is triggering on the page load. I’m not that great at Javascript so can’t fix it but I ended up removing the “set as initial state” switches from the interaction and that solved most of the issues.