Mock up long product sales very rough

Notes: We can remove the header/footer on the page if you don't want them showing (if you are looking for 'landing page').

For the images on the mock up, I've just used ones at the front of the 'insert image' box.

All the buy now/choose your option etc. buttons would then go to the next page for them to make their actual choices.... Or we can have it ping them to the bottom of this page (as I've done in the mock up) --- so they could still scroll back up if they like to see the images.

Sales Headline

This image would be of the selection of mats shown on the form together
Sales blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Buy Now



Black       , white     , or grey     

Open Spaces:

black and white image showing 15 spaces layout black and white image showing 13 spaces layout


Central design:

 School Mascot (adds $2)

+ image

Graduation Year

+ image

The days are long

+ image


Add a frame for $22

(Choose from colors: x,y,z,)

Frame color x label and image Frame color y label and image Frame color z label and image


"Choose your options here"


Example mats:

 Black Mat 15 squares Example

Product details

"Browse options" (or could be labelled "buy now" or similar)

White Mat 15 squares Example

Product details

"Browse options" button (or could be labelled "buy now" or similar)

Grey Mat 13 squares Example

Product details

"Browse options" button (or could be labelled "buy now" or similar)


Buy Now:

This would be a webform (each option can be either as a dropdown, or radio buttons). I could program a preview so that when someone changes a dropdown the preview changes to match what they are buying (although I'd need an example image of every set of options available for that to work - so this may be something to add for the future if you like). I can also show on screen what the current item cost is based on the current selections.

No. of Squares:
Central design:
Add a frame: (No thanks, or colours)

(Current item cost)

Confirm Order Details (this button takes them to a page with just their selected product details they just input into this form and the text "go back to edit your order form if anything is incorrect" and a "Buy Now" button which will direct them to the checkout page for the correct product variant (programmed in based on their options from the form above) ---- then the normal checkout process occurs.