Cart
Your cart is currently empty.

eCommerce Web Design Trends 2020 Part 1 of 2

With new technologies evolving every day on the web front, focusing on the key trends that will impact your eCommerce site have to be noticed. Some of these will be relevant to your store, so picking and choosing which ones can be prioritized to look into further, and maybe get your web design team to investigate further might be on the to-do list. Focusing on Shopify and the complementary apps, we cover two lists in this two-part Blog for your review. WebXR API in Chrome Late October 2019, the
eCommerce Web Design Trends 2020 Part 1 of 2

With new technologies evolving every day on the web front, focusing on the key trends that will impact your eCommerce site have to be noticed. Some of these will be relevant to your store, so picking and choosing which ones can be prioritized to look into further, and maybe get your web design team to investigate further might be on the to-do list. Focusing on Shopify and the complementary apps, we cover two lists in this two-part Blog for your review.

WebXR API in Chrome

Late October 2019, the WebXR in Chrome was announced to be available. WebXR API gives you an interface for your store to run Augmented Reality (AR) and Virtual Reality (VR) experiences in the Chrome Browser.

The main framework used in creating VR content is via WebGL, which greatly simplifies the creative process of your 3D scenes, as opposed to raw WebGL. Some of the more popular examples are three.js, babylon.js, and PlayCanvas.

https://threejs.org/

https://www.babylonjs.com/

https://playcanvas.com/

Frameworks that are aimed to create XR content on the web such as A-Frame is available to provide you with amazing libraries to work with. Finding the tools you might need for your project is the way forward rather than attempting to build your own rendering system.

https://aframe.io/

An excellent place to learn more about WebXR to understand more of its capabilities is at https://codelabs.developers.google.com/codelabs/ar-with-webxr/#0


For more background on the direction of VR/AR and how it will impact

eCommerce stores – please refer back to our article: https://www.thegenielab.com/blogs/articles/enhance-your-conversion-with-3d-video-ar-content-in-your-ecommerce-store

Source: https://www.chromestatus.com/feature/5680169905815552

Source: https://immersive-web.github.io/webxr-samples/explainer.html

Dark Mode Color Scheme

With today’s iOS and Andriod trends to use a Dark Color Mode within the portable mobile devices, it is only natural for websites to follow suit. There are a couple of approaches to take – either a theme has dark color mode being integrated into it, or you can add it to your theme via CSS.


The problem you do encounter is that some older themes in the Shopify world use Dark Style as a design description, not a color reversal that the iOS defines – therefore finding the appropriate and relevant feature will take some time.

At this time, most of the themes available will not have this Dark Mode built-in. Given the style of your eCommerce site will have many other considerations, the best approach is to find the Theme you desire and add it in. In late January 2020, the below Blog covers how to best approach inserting Dark Mode into your Theme: https://www.launchtip.com/how-to-add-a-dark-mode-to-your-shopify-store-theme/


Dark Mode CSS: https://developer.mozilla.org/enUS/docs/Web/CSS/@media/prefers-color-scheme

SVG Filters

Why settle with just a still image – why not give it some movement with SVG Filters. There are various effects you can apply to your main image, and therefore your choice is not just based on the main image, but also the influencer image called a Displacement Map that produces the effect on it. Why would you consider this? It’s about standing out on your home page, or even a standout product page. Giving your image motion will capture the imagination, and set the mood of what you are communicating.


It may be overboard for some, however, if you are looking to imitate an active overhead ocean/beach scene – this may be the right approach for you. Here is an example: https://redstapler.co/realistic-water-effect-svg-turbulence-filter/


Now, an example of how you make this SVG Image stand out into your theme in your eCommerce store, on its main banner image. The example and steps approached to get to the end result are in this following article:


https://medium.com/swlh/using-the-svg-feturbulence-filter-for-wave-effects-2b8cb2546ee6

These SVG effects/filters keep the page load fast, all the while making your home page stand out – to see what kind of filters are available, searching SVG Displacement Maps in your browser will yield a large library of options to apply to your favorite image.


Work with us

Ready to take your business to the next level? We'll help you create the website you deserve.