5 ms·

From first hand experience - Vercel is pretty magical. I’ve helped my wife develop an e-commerce site for her planetary-themed kids merch [1], we chose NextJS w

From first hand experience - Vercel is pretty magical. I’ve helped my wife develop an e-commerce site for her planetary-themed kids merch [1], we chose NextJS with a Shopify Storefront backend and deployed the entire thing to Vercel. Didn’t even need SSL certs, no fiddling with CDNs, it’s just magic. We are super happy with how it turned out vs dealing with full Shopify front end/backend stores. [1] https://littleastronauts.com https://littleastronauts.com

Pandabob 6y ago
I've been wondering about this exact combo for a while. Your site looks nice. Any gotchas when using Shopify as just the backend? Did you use the Nextjs e-commerce starter template?
- flyinglizard 6y ago
  Thanks! We developed from scratch, I frankly wasn’t aware of the template when we started but also wanted a very specific look and feel (and the whole planet section on the bottom of the welcome page obviously had lots of work). Not aware of any issues. We did quite a tight integration with Shopify such as the entire website shop is 99% generated from the Shopify items (which in turn are generated from the Print On Demand catalogues. It’s turtles all the way down).
  - keslert 6y ago
    I have a site (https://familytreechart.com https://familytreechart.com) with a similar integration with Shopify but one thing I've never figured out is how to send someone to Shopify's checkout page with a preconfigured cart. It looks like you are managing the cart on the nextjs side. How are you generating the checkout page with the right items? I've resorted to creating a DraftOrder, but those don't allow for discount codes so I also had to handle that on my end when creating the draft order. Email in profile if easier.
    - RobDukarski 6y ago
      There are cart permalinks [1] that you could use but depending on how much you want to pre-populate I recommend using the JS Buy SDK. I found it the other day and set up a custom free gift with discount code for a Shopify Plus client. The discount code uses the BOGO but the custom functionality checks the conditions and adds the product(s) to the checkout if it is not already there then applies the discount (the client wanted to use the discount code to add the free gift instead of a permalink). You can add to cart, then add the discount, then redirect to checkout all within one link (working on an app to help merchants generate them).. I believe that is the proper flow but I cannot remember off the top of my head I just know that is all currently possible with a single link. That said, I have been made aware that the checkout experience will be changing next year. I'm not sure what that entails yet just that it is coming. Also, having worked with Shopify rather heavily since August, I love it. [1] https://community.shopify.com/c/Shopify-Design/Cart-Use-permalinks-to-pre-load-the-cart/td-p/613702 https://community.shopify.com/c/Shopify-Design/Cart-Use-perm...
      - keslert 6y ago
        Thanks for the suggestions! I hadn't seen the cart permalinks before, but that might work well for us.
juliann1 6y ago
Hey thats a really nice website! congrats :)
- flyinglizard 6y ago
  She’ll be happy to hear - we’ve just launched last week :)
yawnxyz 6y ago
wow that's so awesome, if I had kids I'd totally buy something haha
byhemechi 6y ago
The website looks excellent but the perf could really do with some work. After a quick look in the profiler I found that you're eager loading full-res images from shopify, and it's adding quite a bit of time before the page fully paints, with a lot of reflow. I'd recommend lazyloading them after the fact, with a super low res version as a background-image and adding a min-height to the images so that the whole page doesn't reflow as much. Otherwise a great site and good looking products, If I had kids I'd buy a shirt.
- flyinglizard 6y ago
  Really appreciate the feedback. We’ll try this!

Pandabob 6y ago

I've been wondering about this exact combo for a while. Your site looks nice. Any gotchas when using Shopify as just the backend? Did you use the Nextjs e-commerce starter template?

flyinglizard 6y ago
Thanks! We developed from scratch, I frankly wasn’t aware of the template when we started but also wanted a very specific look and feel (and the whole planet section on the bottom of the welcome page obviously had lots of work). Not aware of any issues. We did quite a tight integration with Shopify such as the entire website shop is 99% generated from the Shopify items (which in turn are generated from the Print On Demand catalogues. It’s turtles all the way down).
- keslert 6y ago
  I have a site (https://familytreechart.com https://familytreechart.com) with a similar integration with Shopify but one thing I've never figured out is how to send someone to Shopify's checkout page with a preconfigured cart. It looks like you are managing the cart on the nextjs side. How are you generating the checkout page with the right items? I've resorted to creating a DraftOrder, but those don't allow for discount codes so I also had to handle that on my end when creating the draft order. Email in profile if easier.
  - RobDukarski 6y ago
    There are cart permalinks [1] that you could use but depending on how much you want to pre-populate I recommend using the JS Buy SDK. I found it the other day and set up a custom free gift with discount code for a Shopify Plus client. The discount code uses the BOGO but the custom functionality checks the conditions and adds the product(s) to the checkout if it is not already there then applies the discount (the client wanted to use the discount code to add the free gift instead of a permalink). You can add to cart, then add the discount, then redirect to checkout all within one link (working on an app to help merchants generate them).. I believe that is the proper flow but I cannot remember off the top of my head I just know that is all currently possible with a single link. That said, I have been made aware that the checkout experience will be changing next year. I'm not sure what that entails yet just that it is coming. Also, having worked with Shopify rather heavily since August, I love it. [1] https://community.shopify.com/c/Shopify-Design/Cart-Use-permalinks-to-pre-load-the-cart/td-p/613702 https://community.shopify.com/c/Shopify-Design/Cart-Use-perm...
    - keslert 6y ago
      Thanks for the suggestions! I hadn't seen the cart permalinks before, but that might work well for us.

juliann1 6y ago

Hey thats a really nice website! congrats :)

flyinglizard 6y ago
She’ll be happy to hear - we’ve just launched last week :)

yawnxyz 6y ago

wow that's so awesome, if I had kids I'd totally buy something haha

byhemechi 6y ago

The website looks excellent but the perf could really do with some work. After a quick look in the profiler I found that you're eager loading full-res images from shopify, and it's adding quite a bit of time before the page fully paints, with a lot of reflow. I'd recommend lazyloading them after the fact, with a super low res version as a background-image and adding a min-height to the images so that the whole page doesn't reflow as much. Otherwise a great site and good looking products, If I had kids I'd buy a shirt.

flyinglizard 6y ago
Really appreciate the feedback. We’ll try this!