Streaming live at 10am (PST)

Ecommerce Coffee Shop w/ dynamic collections and Shopify

Hello, all!

Check out my recent project which features a lot of flexboxes, interactions, and the cool part dynamic collections with the Shopify buy button embeds. You’ll need to go to the published site to see the Shopify embeds rendered.

Please look it over and let me know your thoughts or questions.

Cheers - Matthew


Loving that intro, nice work! One concern is the confusion someone with a slower connection may experience upon landing on the page before the interaction. If you’re waiting for a pageload before starting the animation, it may be useful to include some form of loading icon. Maybe some coffee brewing?

Also, I was confused when the shop navigation link didn’t take me anywhere, so it may be helpful showing that link “focused” initially.

Otherwise I think it’s rad :+1:

Thanks, @mikeyevin!

I agree that balancing the time of the animation is tricky. What is too fast to read or distracting versus what is too slow and appears broken? I am trying to avoid using the word “loading” or a loading bar, but do you think about some animated ellipses such as used in messaging apps? Or remove the 1 sec delay on the logo up front? I do like your thought about coffee brewing and actually, the long term goal is to add some subtle animations to all the product icons. Appreciate any further thoughts.

I think the main part that was confusing is that the logo appears but took a bit to do “something”. I found myself trying to click it to get to the content before it starting showing the animation (which I found to be appropriately timed regarding the text). Maybe just speeding up the time before the text starts? I was thinking it was waiting for the content to load on the page before continuing, but after your explanation it seems you just have a delay.

I agree with the “loading” text or bar, but doing something a little more unique with a coffee cup that fills with a waving line might add a little fun to the traditional loading bar. Maybe a coffee bean that is “roasted” with some aroma lines? Again, these are just ideas to think about, but there is definitely some potential.

Other than that I didn’t see anything glaring while browsing the website and moving through the breakpoints. If you wanted to be nit-picky you could add a minimum height to the buy section of the product pages to ease the “pop” that is caused once the eCommerce is loaded, however it’s pretty minor.

I’m sure other folks here may see something I’m not, but I hope my ideas can be of use!

Again thanks for the time to give your input. I removed the delay on the homepage animation and think it works fine still.

Adding min. height to the embed iframe was a great catch. I should have thought about that.

At some point, I might get around to a coffee icon to indicate loading.

Ah yes, after the change I feel the intro animation looks better. I also noticed you highlighted the shop link initially in addition to adding the min-height for the shop pages.

Glad I could help out and again, nice work on the site!

1 Like