Join Dani Beaumont for an in-depth discussion in this video Before and after shopping cart, part of Designing Ecommerce Sites with Muse.
- [Instructor] Before we dive into this product, let's take a quick look at the Matcha Goodness demo site, both before we add a shopping cart and after. That way, if you're coming from the essentials training, I could just acclimate you a little bit. So, I'm here at the regular Matcha Goodness site and when we did the essentials training, we didn't have any ability to sell items on the store. So, as you perused the site, you could jump over to a Preorder page where you, in essence, filled out a contact form with the item you wanted to buy and submitted it to the shop.
From there, they would contact you and fulfill your order. If we go to the new version of the site, I'll basically just take this URL, matcha-goodness.com, and I'm going to copy it on the clipboard hitting Command+C or Control+ if I'm on a Windows machine. I'll go to another tab, paste that in, and just type in the word "shop". I've created basically a subdomain or I've published into a subfolder of the Matcha Goodness site.
And this allows me to look at the shop version of the site. You'll notice here I now have Starter Sets on the right. So, instead of Preorder, I can actually jump to the product that I'm looking to showcase, Starter Sets, and that takes me to that page. As I scroll down, I have a cart here on the right hand side that will keep track of items as they're added into that shopping cart. I can come in and click an item. So, I'll buy one of the Starter Set files and notice that the cart flies out on the right.
This is the widget, basically the Shopify widget from QooQee in action, and it's representing content from Shopify. So, I see I've ordered that Happy Starter Set. If I come up to my top level navigation, I changed the navigation out a little bit to show off the products that I'm looking to sell. So, there's the Starter Sets, that's my premium products. I really want to give a lot of emphasis there, but you can always jump to an individual product, like a whisk. You can see the details of the whisk, an image about that whisk, and go ahead and buy that item.
Notice the cart flies out again, allowing me to look at the inventory, the items that I've selected. I can come in and increase the number of items that I'm buying right here in that fly-out cart. When I'm finished with my shopping experience, I can click Checkout. Shopify then is bringing up a pop-up window here. This is really driven and designed, to be honest, by Shopify. Notice it's confirming it's the Matcha Goodness store that I'm purchasing from, but things like secure payment gateways, PayPal, credit cards, international currencies, are all handled directly by Shopify, so I can't control the look of this pop-up, but, in all honestly, this gives the viewer of the site more confidence that it's a secure transaction from a company that they can trust.
So, I could go forward there and actually confirm the purchase of the product. I can close out that cart and jump around a little bit more. Notice, in the Starter Set areas, I just have a Buy button. We'll get into this as we work on the project, but every other element on this page, all of the product details here, I built and use. If you contrast that to, let's say, the spoon page, the word Tea Ceremony Spoon and the spoon image here, the description, the price, all are coming from the Shopify backend and being dynamically injected into the page here within the browser.
I guess the last point to point out is I added a Contact Us page. So, I reused the Preorder page and just changed it to be a contact page. You can still describe the products that you're interested in here and submit a contact form. And because we're actually transacting on the site, it's important that we have things like the Refund Policy for the particular item that's being purchased and the Terms of Service. This is the store that's being presented to the viewer, so you want to make sure some of those elements are in place.
Okay, with that said, let's go ahead and dig in and start building out our project.
Dani shows how to build out Muse pages, set up a Shopify store in trial mode, and add products manually and in bulk. She also shows how to integrate Shopify products in Muse, generate terms of service and return policy changes, and set Shopify shipping and payments. Plus, she explains how your site owner can maintain their inventory on the Shopify side.
- Building out Muse pages
- Adding a store master page
- Creating a Shopify trial
- Adding products manually and in bulk
- Integrating Shopify products in Muse
- Formatting widget elements
- Adding product IDs
- Building out, testing, and publishing