Join Dani Beaumont for an in-depth discussion in this video Muse site plan organization, part of Designing Ecommerce Sites with Muse.
- [Instructor] Let's begin by opening a version of the Matcha Goodness website that we'll use to build out our store front. To do that I'm going to go to the Exercise Files folder directory, and in the Muse Files folder, I'll double click on Begin.muse. Now Muse automatically opens up, and it'll open up that Begin file. Now I'm getting an alert that you're probably seeing as well letting me know that some of the links in the project are missing. To be honest, I could ignore this.
All of the assets that are used in this project are embedded in the Muse file. I can preview in browser. I can publish, but it's kind of bothersome to see the alert. I do want to have a good link if I wanted to, let's say edit an original photo in Photoshop, and that's why those links are important. We'll go ahead and get rid of that alert so that we don't have to look at it going forward. I'm going to go ahead and click OK. I'll double click on the Home Page here in the site plan.
Next thing I want to do is pull down under Window to the Assets Panel. When that Asset Panel flies out, I can see each of the missing images here with this red question mark. To relink them I'm going to click on the first one that's missing. Then, I'm going to bring up the right mouse menu, the right-click menu here. I'm going to select Relink. Next thing I want to do is browse to the Matcha Assets folder.
So I'll go ahead open that folder up. I can see in the upper right hand corner, it's looking for Background 01. I'll click on that file, and then click Open. Muse realizes that all of the other missing assets are in that same folder and automatcially relinks them for me, so I can just click OK. I shouldn't see any more errors there in the Assets Panel. I'll go ahead and close out that panel now and switch over to the Plan Mode.
Now if you did the Essentials training with me, I've made changes from that originaal design to kind of adapt the Matcha Goodness site for a store front. I'd like to explain those a little bit. Because I'm selling products on this store, both starter sets and the individual spoon, whisk, bowl, and holder, I wanted to give those more emphasis. So I created here at the root a Products page, and then, underneath that, I have the starter sets and the individual products. I added a Refund Policy page and a Terms of Service page.
We're going to populate that with content later on in the course, and I renamed the Preorder page as a Contact Us page because that's just a contact form at this point. I've also gone in and fine tuned the navigation for the site so that it gives emphasis to my products. We can take a look at that. If I come into the Master page, and let's zoom out a little bit, I'm going to hit Command Minus or Control Minus on a Windows machine.
I'll just kind of pan over here by holding the space bar which brings up the Hand Tool allowing me to see more of the content. I'll hit Command or Control minus one more time, and you'll notice I have the three break points set up for Desktop, Tablet, and Smartphone. I'll click on the Desktop break point first, and I have a high level bit of navigation here. You'll notice a little plus sign. Let me just zoom in a little bit there, so Command plus or Control plus.
If I click on Products and actually go to the Fly Out Menu here for this Light Box, I can show the Light Box parts. What you'll see is I have a simple trigger target or composition widget such that if you click in the Products area, I get this drop down that allows you to navigate to a manual menu, a custom menu, that goes to the starter sets and then the individual products. This is a widget that I dragged onto the page for this particular break point.
I'll go ahead and click in the Fly Out and hide those Light Box parts just so I don't interfere with them at all. I can click on the Tablet Layout and that same trigger target composition fly out is there. Click one more time into the Phone Layout, and I've gone in and taken the Light Box widget that we did in the Essentials training, and I just reorganized it. I'm giving emphasis to the starter sets here, and then allowing you to navigate to the individual product pages with the home page preparation and FAQ down here towards the bottom.
Actually, I'm realizing I forget to add the Contact page, so why don't we go ahead and do that, or I'm going to go ahead and do that. You can do it with me. In order to do that, let me just review it. I'm going to click once to select the widget. Click as second time to get into the target area. Click a third time to get to this Manual menu. Then, actually click a fourth time to select the FAQ. Guess what, click a fifth time that digs right into that FAQ level.
So I can see in the upper left hand corner here Menu Item indicating I'm on that FAQ element. I'm going to click plus sign below it now which creates another manual menu item. I'm going to click once on that FAQ too. Click a second time, or let's just double click, to get on in there and select the content, and I want to change to Contact Us. I did this as a manual menu because it allowed me to control the real design of this Light Box.
It could be a dynamic menu, but just the way you'll notice I have everything organized here gives me a lot more design flexibility. I've typed in the Contact Us. I'm going to switch to the Pointer Tool here in the Tool Panel, and with the item still selected, over in the Hyperlinks drop down in the Control Panel at the top, I'm going to go ahead and go to the Contact Us page. I now have that added, and it's linked to Contact Us.
I'm going to now click on the outer container of this Light Box widget in essence and press and drag the bottom up a little bit. It kind of expanded a bit taller than I wanted it to be. I'll just go ahead and click off. You can get a sense of how I made these changes. Everything's pretty set up for the store front. We don't need to make them, but I just wanted you to know a little bit more about them.
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