Practical Ecommerce

5 Ecommerce Site Design Trends for 2018

New techniques, technologies, and user behaviors drive ecommerce website and application design every year. In 2018, expect ecommerce sites to employ the CSS Grid Layout, use mobile-friendly full-screen modal windows, offer a lot more video, and include microinteractions and guided selling.

1. CSS Grid Layout

CSS Grid Layout is a two-dimensional layout model and part of the CSS standard from the World Wide Web Consortium.

It gives designers significantly more control over how a web page is laid out and helps make much better use of space across devices and screen sizes. Put another way, CSS Grid Layout makes optimizing user interfaces relatively easy when compared to other methods.


“As websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout,” wrote World Wide Web Consortium editors in the CSS Grid Layout recommendation.

“By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counterintuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.”

CSS Grid Layout addresses those problems and makes web design a lot better all around.

In 2018, look for ecommerce website designers and theme makers to include CSS Grid Layout, especially on product category pages or on search results pages.

The only possible barrier may be that some early versions of web browsers do not completely support CSS Grid. But the most recent versions of all leading browsers — including Chrome, Firefox, Safari, Opera, and Edge — do support it.

2. Full-screen Search, Forms

In web design, a modal, modal box, or modal window is an element, typically controlled with a script, that is overlaid on top of other elements (content) to permit user interaction.

Modals have been an effective user interface for several years and are common on many ecommerce websites. What may change for 2018 is the use of full-screen modals for search and forms.

The trend comes from mobile-first web design. On a mobile device, many modals take up most or all of the available space on the screen.

Overstock's newsletter subscription form uses a full-screen modal box.

Overstock’s newsletter subscription form uses a full-screen modal box.

Overstock, as an example, is using a full-screen modal for its newsletter registration form, which pops up for new site visitors. On a mobile device, the form is centered and full-screen and even on a much larger screen the translucent gray stretches end to end.

The Ralph Lauren website includes a search modal that covers nearly all of the content on the page when displayed on desktop or laptop computers, and is, in fact, full-screen on a mobile device.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

Look for designers who are building for mobile first to use full-screen modals for search and other forms and carry those full-screen implementations into larger layouts, too.

3. Much More Video

Video is an excellent medium for conveying complex information, telling stories, and evoking emotion. The amount of videos distributed on the web and watched by Internet users rises every day. So it should not be a surprise that online retailers are also using more video elements in web design.

Sites such as Beardbrand, which has been using videos and content marketing for several years, lead the way by adding video inline on product detail pages.

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. <em>Source: Beardbrand.</em>

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. Source: Beardbrand.

You may also see video used as backgrounds, on-site merchandising, or hero images.

4. More Microinteractions

Microinteractions have been around at least since Facebook added the “Like” button to its posts. What started as a way to rate social media contributions has grown into one of the most popular website and application trends for 2018.

An animated success message tells a user he has successfully joined the mailing list.

An animated success message tells a user he has successfully joined the mailing list.

For online sellers, a microinteraction’s best trick may be its ability to help create habits or, at the very least, reward users for completing specific tasks, such as adding a product to the shopping cart, reviewing a product, or subscribing to an email newsletter.

As Nick Babich, editor-in-chief of Planet UX, points out, “Microinteractions have the power to encourage users to actually interact. They are strong instruments that help to form habit loops.”

Shoppers on an ecommerce website, for example, might write a review for recently purchased products. When they submit the review, a small animation (microinteraction) rewards them for the submission, encouraging them to write another review.

There are four main parts to a microinteraction, according to Dan Saffer, author of the book Microinteractions.

  • A trigger that initiates or begins the microinteraction.
  • Rules that define or determine what happens in the interaction.
  • Feedback communicates what is happening or what just happened.
  • Loops and modes which govern, if you will, the content.

In 2018, expect ecommerce site and application designers to season their designs with microinteractions.

5. Guided Selling

Guided selling is the act of asking shoppers questions about features and usage to help them discover specific products.

In ecommerce, guided selling has been around for several years. Victoria’s Secret, for example, has a sports bra selector. The North Face will help you find jackets. And has a three-step supplement finder to help you meet your fitness goals.'s simple supplement finder leads shoppers to a good solution.’s simple supplement finder leads shoppers to a good solution.

Like some other design trends on this list, guided selling could become much more common in 2018.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


Sign up for our email newsletter

  1. Maryna November 28, 2017 Reply

    Hi Armando, thanks for the great article! What’s interesting is that we’ve seen that Guided Selling is not exclusive to B2C any longer. This year we’ve seen companies in various industries including B2B embrace this approach. Here are some interesting examples:

    •Swisscom, telco and digital transformation company in Switzerland, launched a Smart Business Connect Consultant ( It asks their visitors targeted questions about their industry, size, business needs and challenges and suggests the right business solutions.

    •SMARTASSISTANT launched an interactive B2B Solution Advisor ( It helps buyers and sales reps understand product benefits and quickly figure out the perfect product mix according to given business needs and goals. This means more informed leads, more focused inquiries and shorter sales cycles.

  2. Ivan Burmistrov November 28, 2017 Reply

    1. Don’t know about CSS.
    2. Full-screen modals are definitely a wrong trend because users mistakenly perceive them as new pages and use browser’s “back” button to close them. I hope, the consequences of this mistake is understandable. Normal lightboxes should be always used instead of full-screen modals. (And, yes, people hate any automatic modals. Only user-initiated modals are acceptable.)
    3. People do not have enough leisure time to watch videos. In most cases photos and textual descriptions beat videos with a lopsided score. Pioneers of introducing videos on apparel websites like ASOS, Zappos and KnickerPicker were not successful with the results they achieved and either removed videos or lowered their priority on webpages.
    Background/hero videos are a well-known disaster. People hate them.
    4. Don’t confuse microinteractions with normal feedback that should acknowledge any user action (a basic usability principle known from early 90s).
    5. Any research in support of using guided selling over conventional methods of presenting products?

    Armando, your serious mistake is that you perceive any trends positively. In reality, 99% of trends in webdesign and ecommerce are harmful to customers and businesses. So I expect a more sceptical approach to any trends.

  3. Pranoy December 22, 2017 Reply

    I totally agree with the “full screen modal box” being a trend in 2018. Everybody is going after mobile first approach in 2018. More people are accessing internet through mobile devices, even google had made it clear that they will be going for a mobile first approach in 2018 and will index pages based on how they look on mobile device. If you don’t believe it, read it straight from google’s official webmasters blog (

    Earlier designs was made for desktop and compromised some of elements in mobile view due to the limitation of screen size. But starting in 2017 people Have to design websites for mobile devices and even may be compromise on desktop views.

    About videos being a major medium in 2018… It was the major medium in 2017 also.
    Videos are an excellent medium to convey complex things in a very short time. It is the most popular type of content in social medias, generally people are becoming more accustomed to videos than textual content.

    You will see videos used in-line and as background a lot in 2018 web designs. Competitive web design market like Dubai is adopting more videos into their website. See this recently revamped site ( of one of the top web design company in Dubai which uses video to convey the business message in home page.

    Micro interactions being crucial in 2018, is very true. Normal Blogs doesn’t necessarily need to spent time and effort to incorporate micro interactions. But as you’ve mentioned it is a critical element for ecommerce websites.
    I like to add a very pressing point which can benefit free lance web designers. Just being technically sound in web design is not going to cut it in 2018. You have to be good at marketing and be able to think how audience think. If you think micro interactions are a waist of time and effort, you are not fit for the 2018 market.

  4. Tom Clark March 31, 2018 Reply

    Well done! I completely agree with the writer that CSS Grid Layout model is extremely important and it is now one of the most important parts of the CSS standard in the World Wide Web Consortium. Be in eCommerce sites or even in the mobile operating system, grids have indeed become one of the most crucial forms of design that every business involved in eCommerce industry should consider. The best thing is that makes the optimization process of the user interfaces very easy when compared with other available methods. So, for me, it’s a big yes and kudos to the writer for coming up with such a useful post. Looking forward to have more in future too! Good luck!