7/2/2014
eCommerce Tutorial | Axure
Axure Share
Features
Learn
Community
Company
Download
Forum
Manage Licenses
Buy
Axure > Learn > Step b y Step Tutorials > eCommerce Tutorial
ECOMMERCE TUTORIAL
Build a sample eCommerce
website from scratch
DOWNLOAD
Preview
INTRODUCTION
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.
Let's Begin
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.
PART 1: CREATE A MASTER FOR THE HEADER
Step 1: Create
a new Master
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 youre in the right place.
http://www.axure.com/ecommerce-tutorial
1/11
7/2/2014
eCommerce Tutorial | Axure
Step 2: Add a logo image
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.
Step 3: Add
buttons for navigation
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 Mens,
Womens, 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.
Step 4: Add
a horizontal line
To separate the header from the content below,
lets 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.
Lets make it a blue, dotted line.
http://www.axure.com/ecommerce-tutorial
2/11
7/2/2014
eCommerce Tutorial | Axure
Step 5: Add Header
to the Home page
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.
PART 2: CREATE PRODUCT THUMBNAILS & "QUICK VIEW" BUTTONS
Step 1: Add
product thumbnails
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.
Step 2: Add
"Quick View" button
Drag a button shape widget on top of the first
product. Double-click it and change the text to
Quick View.
http://www.axure.com/ecommerce-tutorial
3/11
7/2/2014
eCommerce Tutorial | Axure
Step 3: Label and
hide Quick View button
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.
Step 4: Dynamically
show the button
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 doubleclicking OnMouseEnter. This will open the Case
Editor.
Step 5: Add "Show
QuickViewButton"
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.
Lets 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.
http://www.axure.com/ecommerce-tutorial
4/11
7/2/2014
eCommerce Tutorial | Axure
PART 3: PRODUCT DETAILS POPUP & SLIDESHOW
Step 1: Create the
Product Details Popup
Add a rectangle widget to the design area
below all of your content. Then, resize the
rectangle to 600 x 450.
Step 2: Add large
product image
In this step, were going to add a slideshow of
product images that animate into view when you
click on thumbnails.
While editing the popup, drag an image widget
into the design area and double-click to import
the Jeans1-1.png. Place this picture in the
upper left corner.
Step 3: Convert
to Dynamic Panel
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.
http://www.axure.com/ecommerce-tutorial
5/11
7/2/2014
eCommerce Tutorial | Axure
Step 4: Insert Jeans-2
and
Jeans-3 in states
Open State2 and replace the Jeans-1 image
with Jeans-2 by double-clicking the image. Do
the same for State 3 so that each state has a
different Jeans image.
Step 5: Add product
image thumbnails
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 images aspect ratio.
Step 6: Add OnClick
event to thumbnails
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 7: Copy/paste
case to thumbnail 2 & 3
Copy and paste the new case from the first
http://www.axure.com/ecommerce-tutorial
6/11
7/2/2014
eCommerce Tutorial | Axure
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.
PART 4: "ADD TO CART"
Step 1: Create
Add to Cart button
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.
Step 2: Create popup
panel for cart messages
Now were 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.
Step 3: Include
"Added to Cart" state
Label the dynamic panel MessagesPopup and
label the first state Processing.
http://www.axure.com/ecommerce-tutorial
7/11
7/2/2014
eCommerce Tutorial | Axure
With the Processing state selected, click the
Duplicate State icon to add a second state.
Label this one AddedToCart.
Step 4: Create
"added to cart" message
Open the AddedtoCart state and change the
rectangle color to blue since we are confirming
that the item was added to the Cart. Doubleclick and change the text Successfully added
to Cart
Step 5: Include Add
to Cart interactions
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. Were
going to add 5 actions to this case.
Step 6: Add actions
to show/hide message
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 dont need to add a Show Panel action.
http://www.axure.com/ecommerce-tutorial
8/11
7/2/2014
eCommerce Tutorial | Axure
2: Wait 1000ms. This will make our first panel
stay up for a second before the next action
happens. 1000ms = 1 second.
Step 7: Change
MessagePopup
Panel state
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).
Step 8: Add Hide
the Panel interaction
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.
PART 5: HIDING/SHOWING THE PRODUCT INFO
Step 1: Add Hide
Panel to close button
Next, well add a button to the popup so it can
be closed.
In the Dynamic Panel Manager, double-click on
State1 under ProductPopup to open the Popup
Box. Add a placeholder widget to the top right
corner. Adjust its size to 40 x 40. Tip: you can
http://www.axure.com/ecommerce-tutorial
9/11
7/2/2014
eCommerce Tutorial | Axure
edit the size in the toolbar.
Add a case to the OnClick event of the
placeholder with a "Hide Panel" action to Hide
ProductPopup.
Step 2: Convert
to dynamic panel
& set hidden
The popup will be dynamically shown when the
Quick View button is clicked so we need to
convert it into a Dynamic Panel.
Right-click on the rectangle and select Convert
> Convert to Dynamic Panel. Label this dynamic
panel ProductPopup.
This panel is going to be hidden until Quick
View is clicked, so right-click on the panel and
select Edit Dynamic Panel > Set Hidden.
Step 3: Pin to Browser
With the hidden dynamic panel selected, select
"Pin to Browser" in the Properties Tab. Choose
"Center" and "Middle" and then click OK.
Step 4: Add Show
Panel to Quick View
Now, were 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
http://www.axure.com/ecommerce-tutorial
10/11
7/2/2014
eCommerce Tutorial | Axure
our eCommerce Walkthrough, congrats!
THE ROUND UP
Nice work! You've covered some key interactions including hiding & showing widgets and swapping dynamic panel states.
Still need help? Check out the forum or drop us a line at [email protected].
MORE STEP BY STEP TUTORIALS ::
Mobile Website Design Tutorial >
Axure > Learn > Step b y Step Tutorials > eCommerce Tutorial
Home
Features
Learn
Community
Support
Company
Dow nload
Buy
Contact
Privacy
Legal
Patents
Sitemap
Use Axure RP as:
Mockup Softw are
Flow chart Softw are
SRS Document
Visio Alternative
iPhone Mockup Tool
Wireframe Softw are
Prototyping Softw are
Web Design Softw are
Pow erPoint Alternative
iPad Mockup App
WYSIWYG Editor
2002-2014 Axure Softw are Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Softw are Solutions Inc.
http://www.axure.com/ecommerce-tutorial
11/11
