Build a sample eCommerce
website from scratch
Build a sample eCommerce
website from scratch
Next we will add 3 “Button Shape” widgets beneath the logo.
Scroll down in the Widgets pane to find the Button Shape widget (not the Button widget). Drag 3 button shapes from the Widgets pane onto the design area. Double-click on each one to change the text. Label them Men’s, Women’s, and Sale.
Make the border colors white by selecting all of the button shapes (click and drag to create a selection area around the buttons), and set the ‘Line Color’ to white using the toolbar above.
This tutorial guides you step by step to build a sample eCommerce prototype using many of the core features in Axure RP including masters and dynamic panels. We will create the entire sample from scratch.
First, download the AxureEcommerce.zip
and extract the contents into a new folder onto your computer. Then, launch Axure RP and save a new file as eCommerce.rp using File > Save As.
The first step is to build a header with a logo and navigation. Because we will be using the same header on multiple pages, we want to create this as a master.
In the Masters pane, click the Add Masters button. Then slow double-click the new master to change the name to “Header”.
Double-click the Header master to start editing. You can see which page or master you are editing by looking at the tab on the top of the design area.
If it says ”Header” you’re in the right place.
Next drag an Image widget from the Widgets Pane onto the design area. Double-click it to import your logo. Select “Logo.png” from the images folder exported from your .zip file.
When asked if you want to AutoSize, say “Yes”. This will make the image its actual size, and not the current size of the image widget.
Add the Header master to the Home page by dragging it from the Masters pane onto the design area. Position it at 200,50.
By default, masters have a pink mask. You can turn that off using View > Masks > Mask Masters.
On the Home page, drag an image widget onto the design area and place it under the header.
Double-click it and import “Jeans1-1.png”. Add a second image, and import “Jeans2-1.png”.
Scale the images down to about 150px wide, 225px high by holding the shift key and dragging the corner of the image.
We only want the Quick View button to be visible when the mouse is over the image,
so we will set it to hidden by default.
Do this by clicking the "Hidden" checkbox in the Style Tab. The widget will turn yellow.
To make the “Quick View” button appear when we mouse over the product image, we will use the OnMouseEnter event.
Click on the product image. In the Interactions tab of the Widget Properties pane add a case to OnMouseEnter (seen above) by double-clicking OnMouseEnter. This will open the Case Editor.
In the left panel, click “Show”. Then in the right panel, click the checkbox for QuickViewButton. Finally, choose "Treat as Flyout" from the droplist in "More Options". Click OK.
Let’s preview the prototype using the Preview icon in the toolbar. Moving the mouse over the product should show the Quick View button but once visible it does not get hidden.
Add a rectangle widget to the design area below all of your content. Then, resize the rectangle to 600 x 450.
Right-click on the rectangle and select "Convert to Dynamic Panel". Label this dynamic panel ProductPopup.
Drag a button shape widget on top of the first product. Double-click it and change the text to “Quick View”.
To separate the header from the content below, let’s add a horizontal line beneath the buttons.
Drag a “Horizontal Line” widget onto the design area. Stretch the line by dragging the resize handle on the right or left side of the widget. Then, edit the pattern and color using the Line Pattern and Line Color buttons in the toolbar. Let’s make it a blue, dotted line.
PART 1: CREATE A MASTER FOR THE HEADER
Step 1: Create
a new Master
Step 2: Add a logo image
Step 3: Add
buttons for navigation
Step 4: Add
a horizontal line
Step 5: Add Header
to the Home page
PART 2: CREATE PRODUCT THUMBNAILS & "QUICK VIEW" BUTTONS
Step 1: Add
Step 2: Add
"Quick View" button
Step 3: Label and
hide Quick View button
Step 4: Dynamically
show the button
Step 5: Add "Show QuickViewButton"
PART 3: PRODUCT DETAILS POPUP & SLIDESHOW
Step 1: Create product details popup
In this step, we’re going to add a slideshow of product images that animate into view when you click on thumbnails.
To get started, double-click on State1 of ProductPopup to open it. Drag in an image widget and double-click to import the “Jeans1-1.png”. Place this picture in the upper left corner.
Right-click the image and select "Convert to Dynamic Panel". Label this panel "ProductSlideshow"
We're going to have a total of 3 states, so select State1 in the Widget Manager and click the "Duplicate State" icon twice to make a total of 3 states.
Step 2: Add large
Step 3: Convert image
to dynamic panel
Drag 3 image widgets beneath this image for the thumbnails. Import Jeans1-1, Jeans1-2, and Jeans1-3. When dragging the resize handles to resize the images, hold the Shift key to keep the image’s aspect ratio.
Step 5: Add product image thumbnails
Open State2 and replace the Jeans-1 image with Jeans-2 by double-clicking the image. Do the same for State3 so that each state has a different Jeans image.
Step 4: Insert Jeans-2 and Jeans-3 in states
Select the left-most thumbnail and double-click the OnClick event. In the case editor, select the "Set Panel State" action and choose the ProductSlideshow panel.
In the "Select the State" droplist choose State1, and then chose the Fade animation for "Animate In" and "Animate Out". Click OK.
Step 6: Add OnClick
event to thumbnails
Copy and paste the new case from the first thumbnail the 2nd and 3rd. Double-click the pasted case and set the second thumbnail to set the panel state to State2, and then do the same for State3.
Preview your prototype. Clicking the thumbnails should set the panel states to the associated Jean image.
Step 7: Copy/paste
case to thumbnail 2 & 3
© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure Ⓡ is a registered trademark of Axure Software Solutions Inc.
Drag a button shape widget to the bottom right corner of the popup. Give it a blue fill and white font color using the toolbar. Change the text to “Add to Cart”.
Now we’re going to create “Processing” and “Added” messages that will appear when clicking “Add to Cart”.
Drag a rectangle to the middle of your popup box. Make it light grey, with black lettering. Enter the text, “Processing...”.
Right-click and select [Convert to Dynamic Panel]. Set the panel to hidden using the checkbox in the Style Tab.
Label the dynamic panel ‘MessagesPopup’ and label the first state “Processing”.
With the Processing state selected, click the Duplicate State icon to add a second state. Label this one “AddedToCart”.
Open the “AddedtoCart” state and change the rectangle color to blue since we are confirming that the item was added to the Cart. Double-click and change the text “Successfully added to Cart”
After clicking the “Add to Cart” button we want to show the “Processing” message for a second, show the ‘Added to Cart’ message for a second, and then hide them.
Return to the ProductPopup, and select the “Add to Cart” button. Double-click OnClick to add a case and open the Case Editor. We’re going to add 5 actions to this case.
1: Set Panel “MessagesPopup” state to ”Processing”. At the bottom, select “fade” from the Animate In dropdown. Note that setting the panel state automatically shows the panel so we don’t need to add a Show Panel action.
2: Wait 1000ms. This will make our first panel stay up for a second before the next action happens. 1000ms = 1 second.
3: Set Panel to “AddedtoCart” state. In this action we are setting our “MessagesPopup” panel from the “Processing” state to the "AddedtoCart" state. Click the MessagesPopup checkbox, and select the “AddedtoCart” state from the dropdown beneath the checkboxes.
4: Wait 1000ms (again).
5: Hide the Panel. Click the MessagesPopup checkbox and select “fade” for the animation.
Click OK. Preview your prototype and test it out. This brings us to the end of the Newbie section of our eCommerce Walkthrough.
Nice work! You've covered some key interactions including hiding & showing widgets and swapping dynamic panel states.
PART 4: "ADD TO CART"
Step 1: Create
Add to Cart button
Step 2: Create popup panel for cart messages
Step 3: Include
"Added to Cart" state
Step 4: Create
"added to cart" message
Step 5: Include Add
to Cart interactions
Step 6: Add actions
to show/hide message
Step 7: Change MessagePopup
Step 8: Add Hide
the Panel interaction
This panel is going to be hidden until Quick View is clicked, so right-click on the panel and select "Set Hidden".
Now, we’re going to add an interaction to the Quick View button to show the ProductPopup when clicked.
Select the Quick View button and add a case to OnClick with a Show Panel action to “Show ProductPopup”. Then choose "Treat as Lightbox" in the "More Options" droplist.
Preview your prototype and test it out. This brings us to the end of the Newbie section of our eCommerce Walkthrough, congrats!
Step 2: Set ProductPopup to hidden
Step 4: Add Show
Panel to Quick View
Next, we’ll add a button to the ProductPopup so it can be closed.
Add a placeholder widget to the top right corner of the dynamic panel. Adjust its size to 40 x 40. (Tip: you can edit the size in the toolbar.)
Add a case to the OnClick event of the placeholder with a "Hide" action to “Hide ProductPopup”.
Step 1: Add button to close ProductPopup
PART 5: HIDING/SHOWING THE PRODUCT INFO
With the hidden dynamic panel selected, select "Pin to Browser" in the Properties Tab. Choose "Center" and "Middle" and then click OK.
Step 3: Pin to Browser
MORE STEP BY STEP TUTORIALS ::
This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.