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 

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.


Let's Begin


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


Step 1: Add

product thumbnails

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"


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

product image

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.

u126_start u126_end u126_line

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.


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

Panel state

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


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

Still need help? Check out the forum or drop us a line at



u222_start u222_end u222_line
u224_start u224_end u224_line
u226_start u226_end u226_line
u228_start u228_end u228_line
u230_start u230_end u230_line
u232_start u232_end u232_line
u234_start u234_end u234_line
u236_start u236_end u236_line
u238_start u238_end u238_line
u240_start u240_end u240_line
u242_start u242_end u242_line
u244_start u244_end u244_line
u246_start u246_end u246_line
u248_start u248_end u248_line
u250_start u250_end u250_line
u252_start u252_end u252_line
u254_start u254_end u254_line
u256_start u256_end u256_line
u258_start u258_end u258_line
u260_start u260_end u260_line
u262_start u262_end u262_line
u264_start u264_end u264_line
u266_start u266_end u266_line
u268_start u268_end u268_line
u270_start u270_end u270_line
u282_start u282_end u282_line


u298_start u298_end u298_line

u352_start u352_end u352_line

This is an archived Axure 7 training resource. You can update to Axure 8 for free at