Responsive Web Design for E-commerce Site

Web Designer

UX Designer

Webflow Developer

Figma

Shopify

Webflow

E-Commerce Website

Design Stunning E-Commerce experience that communicate your brands value to new and existing customer. By working with me, you'll be able to create an incapsulating digital experience like no other.

Gallery of Examples

Outdoor Entertainment and Equipment

Online Farm Store and Landing Page

Stunning Visuals and Excellent Understanding of the project. We'd working with Mark again, anytime!

-Lindsey Graham

Examples of Custom Code Used

Adding a Quantity Button to Your

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // add one to the current value
  $input.val(val + 1);
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});

// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // minus one from the current value while it's more than one
  // the value never goes below 1
  $input.val(Math.max(val - 1, 1));
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});
</script>

More Awesome Examples

Travel Agency Website and Booking Platform

Travel Agency Page

Travel Agency Landing and Booking Page

Project Research

This project was careful built and researched to help client the client address their users pain points and create an immersive, interactive experience. Using color psychology, design principals and our extensive research, I created a simple, intuitive experience with fantastic communication.