Hey, I’ve been following one of Nelson’s tutorials on integrating Shopify and have experienced a few differences. When he publishes the site, all 3 shopify products display neatly in a row (18:45 of tutorial linked below). When I try to duplicate this, they stack on top of each other on the left side of the screen.
I tried every variation of styling I could think of, and reached out to other community members - no one can solve it. The HTML embeds still display like that. Doesn’t matter if I change the Shopify embed layout or change it to only “add to cart” either.
Shopify’s embed code has changed since Nelsen made the video. Maybe it can be fixed by changing something in there? Here is the embed code https://pastebin.com/PneHicEx
Here is the tutorial I’m following
Honestly wondering at this point if it could possibly be a bug? Any help is seriously appreciated! I’m even willing to pay for a solution.
Hi @keep - I’m not sure if this will fix it as I can’t see until the site is published but I notice that you have a width of 33% set on Collection Item 2 class - Remove all the formatting on this class and it should fix it. (As Collection Item 2 is set to 33% width, this is why they are stacking below each other). With regards to Shopify, the code is completely different now and Nelsons tutorial is out-of-date. I posted about this a while ago as I wanted the cart on every page. You can’t do this with the new code - apart from this simple hack I figured out:
Small update: Remove all formatting on Collection List 2 and Collection List 3 - you don’t need any formatting on these as your Collection is set to 3 Column Layout. I’m sure it’s the 33% width that’s messing things up! Regards Kai
Appreciate the reply!