In today’s article, I will explain to you how to display messages in Javascript in the Hyva theme.

Hyvä, the modern Magento 2 front-end theme, introduces a convenient way to display messages using the global function window.dispatchMessages(). This function allows developers to show messages to users based on different types, such as success, notice, warning, or error.

Types of Messages

The type property in the message object allows you to categorize messages based on their purpose. 

Here are some commonly used types:

1. Success: Indicates successful operations.
2. Notice: Provides important information or updates.
3. Warning: Warns users about potential issues or actions.
4. Error: Alerts users about errors or unsuccessful operations.

dispatchMessages([
   {
       type: "success",
       text: "Well done! Make haste, my friend, because this message as ephemeral , all good things are!"
   }
], 2000);

Output:

This JavaScript code waits for the HTML document to fully load (DOMContentLoaded event). Upon loading, it logs a success message to the console after a 2-second delay, using the dispatchMessages function. 

The message is defined in an array with a type (“success”) and text.

New to Hyvä?? Learn about the Hyvä Theme from scratch!

<script>
   document.addEventListener('DOMContentLoaded', function() {
       function dispatchMessages(messages, delay) {
          
           messages.forEach(message => {
               setTimeout(() => {
                   console.log(`[${message.type}] ${message.text}`);
               }, delay);
           });
       }

       // Call the function with your example data
       dispatchMessages([{
           type: "success",
           text: "Well done! Make haste, my friend, because this message is ephemeral; all good things are!"
       }], 2000);
   });
</script>

The provided code exemplifies the usage of dispatchMessages by displaying a success message after a 2-second delay. This script is designed to wait for the HTML document to fully load, as indicated by the DOMContentLoaded event listener. Upon loading, the success message is logged to the console, showcasing the message type (“success”) and its corresponding text.

To comprehend the code structure, we define a function named dispatchMessages, which accepts an array of message objects and a delay time as parameters. Within this function, we use a forEach loop to iterate through each message and employ the setTimeout function to log the messages with a specified delay.

The provided example demonstrates the call to the dispatchMessages function with a success message, offering a glimpse into the seamless integration of messages within the Hyvä theme. Developers can customize the message types, texts, and delays to tailor the user experience on their Magento 2 store.

To run the above code, please use JavaSrcipt Playground.

You can copy and paste the provided code here, excluding any script tags. By doing so, you will be able to view the output as shown in the screenshot below.

Output:  

Conclusion

The window.dispatchMessages() function in Hyvä theme simplifies the process of communicating messages to users. By providing flexibility in message types and durations, it enhances the overall user experience on your Magento 2 store. 

Incorporate this functionality into your front-end development workflow to create informative and user-friendly interfaces.

Read more resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

In the realm of Hyva theme development, efficient data retrieval from the server is paramount for creating dynamic and responsive web applications. The fetch API in JavaScript provides a powerful and modern way to make HTTP requests. 

In this blog post, we’ll delve into how to use fetch in the Hyva theme with illustrative examples to demonstrate its versatility. We’ll cover obtaining the base URL, constructing custom URLs, handling parameters, and integrating these techniques into your Hyva theme.

Introduction to Fetch

In Luma, the jQuery functions $.ajax, $.get, and $.post are often used to exchange data with server-side Magento. In Hyvä, the native browser function window.fetch is used instead. 

The fetch is a modern replacement for the older XMLHttpRequest, offering a simpler and more flexible interface for making HTTP requests. It returns a Promise that resolves the Response to that request, whether it is successful or not.

A simple request to a controller returning JSON content might look like this:

fetch('https://dummyjson.com/products/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

In this example, we make a basic GET request to retrieve data from the server.

As a quick reminder, GET requests do not have request bodies, so any parameters need to be added to the requested URL before calling fetch.

We can perform this code online (https://playcode.io/javascript) or using javascript.

Please find the following screenshot of the output. 

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Basic Fetch Request with handling JSON Data

Let’s start with a simple example of making a GET request using fetch:

const fetchJsonData = async () => {
  try {
    const response = await fetch('https://api.zippopotam.us/us/33162');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const jsonData = await response.json();
    console.log('JSON Data:', jsonData);
  } catch (error) {
    console.error('Error:', error);
  }
};

// call the function
fetchJsonData();

We can perform this code online (https://playcode.io/javascript) or using javascript.

Please find the following screenshot of the output. 

POST Requests

If we need to tell the server we expect a JSON response, we can pass an Accept header:

fetch(url, {headers: {accept: 'application/json'}})

With fetch() HTTP Header names can be specified in camelCase or ‘Kebab-Case’ notation. For example:

{
  "Content-Type": "application/json", // Kebab-Case
   contentType: "application/json"    // camelCase
}

Making a POST request is a common requirement for sending data to the server. Here’s an example:

const postData = async () => {
  const url = 'https://api.example.com/post-endpoint';
  const data = {
    key1: 'value1',
    key2: 'value2',
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const responseData = await response.json();
    console.log('Response Data:', responseData);
  } catch (error) {
    console.error('Error:', error);
  }
};

// Call the function
postData();

In this example, we demonstrate making a POST request with JSON data.

We can perform this code online (https://playcode.io/javascript) or using javascript.

Please find the following screenshot of the output.

A simple Ajax POST fetch request with JSON data

For POST requests we can specify a request body. Because we send a body, we also need to set the Content-Type header.

fetch(
  url + '?form_key=' + hyva.getFormKey(),
  {
    method: 'post',
    body: JSON.stringify(data),
    headers: {contentType: 'application/json'}
  }
)

Similarly, we can make a simple Ajax form POST request by adding the form key as a parameter to the POST body.

const body = new URLSearchParams({form_key: hyva.getFormKey(), foo: 'bar'});
const contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
fetch(url, {method: 'post', body, headers: {'Content-Type': contentType}})

Form Ajax POST Ajax request with AlpineJS

This example showcases an Ajax POST request that is triggered from Alpine.js.

The result is displayed in a message.

<div x-data="initSomeComponent()">
    <button @click="doPostRequest(1)">Do Post</button>
</div>

<script>
  function initSomeComponent() {
    return {
      dispatchMessage(type, message, timeout) {
        typeof window.dispatchMessages && window.dispatchMessages(
          [{
              type: type,
              text: message,
          }],
          timeout
        );
      },
      doPostRequest(someId) {
        const postUrl = `${BASE_URL}path/to/ajax/call/`;
        fetch(postUrl, {
          headers: {
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
          },
          body: new URLSearchParams({
            form_key: hyva.getFormKey(),
            someId: someId
          }),
          method: "POST",
          mode: "cors",
          credentials: "include",
        })
          .then(response => {
            if (response.redirected) {
              window.location.href = response.url;
            } else if (response.ok) {
              return response.json();
            } else {
              this.dispatchMessage("warning", "Post request failed", 5000);
            }
          })
          .then(response => {
            if (!response) {
              return;
            }
            this.dispatchMessage(
              response.success ? "success" : "error",
              response.success
                ? "Post request was successful."
                : response.error_message,
              5000
            );

          })
          .catch(error => {
            this.dispatchMessage("error", error, 5000);
          });
      }
   };
  }
</script>

Conclusion

Incorporating the fetch API into your Hyva theme empowers you to create dynamic and interactive web applications. Whether you need to retrieve data from the server, handle JSON responses, make POST requests, or seamlessly integrate with your theme, the fetch API provides a flexible and modern solution for your data retrieval needs.

By understanding its intricacies and leveraging its capabilities, you can enhance the user experience in your Hyva theme.

Read more resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

In modern web development, creating dynamic and functional URLs is a crucial aspect of building a seamless user experience. In today’s article, we’ll explore how to work with URLs in JavaScript within the context of the Hyva theme, commonly used with Magento.

We’ll cover obtaining the base URL, constructing custom URLs, handling parameters, and integrating these techniques into your Hyva theme.

Understanding Base URL in Hyva Theme

In Hyva theme, Magento 2 is often used as the backend, and it provides a window.BASE_URL global variable that holds the base URL of your Magento 2 store.

// Get the base URL in Hyva theme

const baseURL = window.BASE_URL;
console.log('Base URL:', baseURL);

We can perform this code in browsers developer console.

Please find the following screenshot. 

Learn about the Hyvä Theme from scratch!

Building Custom URLs

You can use the base URL to build custom URLs by appending specific paths to it. Here’s an example.

// Build a custom URL using the base URL
const baseURL = window.BASE_URL;
const customPath = 'custom-path';
const customURL = baseURL + customPath;
console.log('Custom URL:', customURL);
// For the template literal version 
console.log(`${BASE_URL}customPath`);

We can perform this code in browsers developer console.

Please find the following screenshot. 

Handling URL Parameters

If your custom URL involves parameters, you can use the URLSearchParams API as below.

// Build a custom URL with parameters

const baseURL = window.BASE_URL;
const customPath = 'custom-path';
const customURL = baseURL + customPath;

const params = new URLSearchParams({
  param1: 'value1',
  param2: 'value2',
});

const customURLWithParams = baseURL + '/custom-path?' + params.toString();
console.log('Custom URL with Params:', customURLWithParams);

We can perform this code in browsers developer console.

Please find the following screenshot. 

Displaying on the Frontend

Finally, you can display the URLs on your frontend or use them as needed in your JavaScript logic. 

<!-- Displaying URLs on the frontend -->
<div>
  <p>Base URL: <span id="base-url"></span></p>
  <p>Custom URL: <span id="custom-url"></span></p>
  <p>Custom URL with Params: <span id="custom-url-params"></span></p>
</div>

<script>
  const baseURL = window.BASE_URL;
  const customPath = 'custom-path';
  const customURL = baseURL + customPath;

  const params = new URLSearchParams({
    param1: 'value1',
    param2: 'value2',
  });

  const customURLWithParams = baseURL + '/custom-path?' + params.toString();

  document.getElementById('base-url').textContent = baseURL;
  document.getElementById('custom-url').textContent = customURL;
  document.getElementById('custom-url-params').textContent = customURLWithParams;
</script>

We can perform this code in browsers developer console.

Please find the following screenshot. 

Integration with Hyva Theme

Make sure to integrate this JavaScript code into your Hyva theme appropriately. You may need to place it in the correct JavaScript file or customize your theme’s templates.

Remember to replace /custom-path, param1, and param2 with your actual paths and parameter names.

These steps should help you get started with obtaining the base URL and building custom URLs in the Hyva theme using JavaScript. Feel free to adapt the code to fit the specific requirements of your project.

Conclusion

Mastering the art of building URLs in JavaScript within the Hyva theme empowers developers to create dynamic and user-friendly web applications. Understanding the base URL, constructing custom URLs, handling parameters, and seamlessly integrating these techniques into your Hyva theme will contribute to a more efficient and engaging user experience.

Read more resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

In the Hyva theme for Magento 2, the Luma Theme Fallback is a feature that allows you to use the Luma theme as a fallback option for any missing or incomplete templates or styles in the Hyva theme. 

This means that if a specific template or style is not available in the Hyva theme, Magento will automatically fall back to using the corresponding template or style from the Luma theme.

When you install and enable the Hyva theme, it becomes the active theme for your Magento 2 store. The Hyva theme provides its own set of templates and styles that define the appearance and functionality of your storefront.

If the Hyva theme does not have a particular template or style, Magento will automatically fall back to using the corresponding template or style from the Luma theme. This means that the Luma theme acts as a fallback option.

 The Luma Theme Fallback ensures a seamless integration between the Hyva theme and the Luma theme. It allows you to benefit from the customization and features of the Hyva theme while still having access to the extensive template and style options provided by the Luma theme.

New to Hyvä?? Learn about the Hyvä Theme from scratch!

About the theme fallback

Specific routes can be configured to use a different theme (that is, Luma based theme) instead of Hyvä.

This feature is what allows the Luma Checkout to be used with Hyvä.

On those pages, the Hyvä theme is not active. Neither Tailwind CSS nor Alpine.js are loaded.

Instead, RequireJS and all other Luma theme dependencies are loaded by the browser.

As a consequence, any styling for the Hyvä theme will have to be rebuilt using the standard Magento approaches, for the pages that use the theme fallback.

Installation steps

To install the Luma Theme Fallback in the Hyva theme for Magento 2, you can follow these steps:

Execute the following composer commands to install theme fallback:

  composer require hyva-themes/magento2-theme-fallback

Next, run the Magento installer:

  php bin/magento setup:upgrade

Please add it as a dependency to your project using composer if you want to use the Luma theme fallback.

Configuration

Next, log in to Magento admin.

• Navigate to the Stores > Configuration > HYVA THEMES > Fallback theme > General Settings
  • Enable => Yes
  • Theme full path => Select your fallback theme (Default: ‘Magento Luma’)
  • Apply fallback to requests containing => Add path (For checkout: “checkout/index”)
    • To use the Luma checkout, configure the paths default checkout/index, PayPal/Express/review, and Paypal/Express/saveShippingMethod, These paths are supplied as the default configuration by the Hyva_LumaCheckout module.

Magento admin screenshot for reference:

How does it work?

Stated more explicitly the theme fallback is applied when: The current route/controller/action request path matches the configured URL pattern. Example: the configured URL is customer/account.

Then for all requests such as `customer/account/*` the fallback will be applied.

Example: the configured url is `customer/account/login`.

Then the fallback will be applied only for the login page.

Another Example: If you have added the product URL ‘aim-analog-watch.html’ in the fallback path theme, the product page will display according to the Luma theme. Please refer to the attached screenshot.

Hyva product page screenshot	Luma fallback product page screenshot

Conclusion

The Luma Theme Fallback in the Hyva theme for Magento 2 is a feature that allows for seamless integration between the Hyva theme and the Luma theme. It acts as a fallback option for any missing or incomplete templates or styles in the Hyva theme. 

When a specific template or style is not available in the Hyva theme, Magento automatically falls back to using the corresponding template or style from the Luma theme. 

This ensures that your storefront maintains a consistent and visually appealing appearance, combining the customization and features of the Hyva theme with the extensive options provided by the Luma theme.

Read more resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

With default Magento, we prioritize the use of view models over block classes whenever possible. This is because view models are more reusable and composable. In default Magento, you can add view models through the layout.xml file.

In a Hyvä theme, in every template, a variable $viewModels is automatically available, introduced by hyva-themes/magento2-theme-module, similar to the existing $block and $escaper variables. You can use it to fetch any view model (i.e. any class that implements ArgumentInterface).

Hyva is a Magento frontend development accelerator that utilizes View Models to manage the data and logic for rendering templates. To use View Models in Hyva, you typically follow these steps:

Here’s a general guide on how you might use View Models in the context of Hyva:

Create a View Model

Start by creating a PHP class for your View Model. This class should contain the data and logic needed for rendering a specific part of your frontend.

Create app/code/Aureatelabs/Hyva/ViewModel/YourViewModel.php

<?php


namespace Aureatelabs\Hyva\ViewModel;


use Magento\Framework\View\Element\Block\ArgumentInterface;


class YourViewModel implements ArgumentInterface
{

   protected $someData;

   public function __construct(
       // Add dependencies or services needed here
   ) {
       // Initialize data or inject necessary dependencies
       $this->someData = $this->fetchSomeData();
   }


   public function getSomeData()
   {
        return $this->someData;
   }

   public function fetchSomeData() {
       return $this->someData = "This is derived from the Hyva View Models.";
   }

   // Add other methods and logic as needed
}

           Want to learn more about Hyvä?? Here’s the complete tutorial on the Hyvä Theme.

Inject the View Model

Once you’ve created the View Model, inject it into your block or template file where you want to use it.

<?php
/** @var \Aureatelabs\Hyva\ViewModel\YourViewModel $viewModels */

$viewModels = $viewModels->require(Aureatelabs\Hyva\ViewModel\YourViewModel::class);

//access the View Model's methods
$result = $viewModels->getSomeData();
?>
<p>
   <?= $result ?>
</p>

After implementing the above code, the output will be displayed as shown in the screenshot on the frontend page where you place this code. In this example, I have placed this code on the Product view page.

After fetching data from the View Model in your template file, you can use it for rendering HTML or performing other frontend tasks.

Another example of View Model

1. Predefined icons

To use the list of predefined icons, find a full list of options in vendor/hyva-themes/magento2-theme-module/src/ViewModel/Heroicons.php. In the template, include this:

use Hyva\Theme\ViewModel\HeroiconsOutline;

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);

<?= $heroicons->fileNameHtml("", height, width) ?>

The above is the syntax for using the Heroicons view model. Please find the example below, which you can put in your template file:

<?php
use Hyva\Theme\ViewModel\HeroiconsOutline;

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);

$class = "w-2";
$width = 60;
$height = 100;
?>

<?= $heroicons->userHtml($class, $width, $height) ?>

The output of this code looks like the screenshot below:

2. Custom icons

Custom icons should be stored in app/design/frontend/Custom/hyva/Hyva_Theme/web/svg/

To use these icons, including this:

<?php
use Hyva\Theme\ViewModel\SvgIcons;

/**@varSvgIcons$hyvaicons*/
$hyvaicons = $viewModels->require(SvgIcons::class);
?>

<?= $hyvaicons->renderHtml('custom', 'w-10 h-10')?>

The output of this custom icon looks like the screenshot below:

If you would like to put custom icons in the custom folder, for example, svg/icons/, you should create a new ViewModel for these icons.

Remember, this is a general guideline for using View Models in Hyva. Adjust the namespaces, class names, and file paths according to your module’s structure. Additionally, follow Hyva’s documentation or best practices for more specific or advanced usage.

More resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

What is TailwindCSS and How does it work?

Tailwind is a utility-based CSS framework. This means building modern websites rapidly without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

We utilize the outstanding TailwindCSS framework to craft templates that are highly customizable, and visually appealing across various devices, and generate remarkably compact CSS stylesheets, minimizing the data load for your website visitors.

Exploring Tailwind CSS is strongly advised before delving into the setup of your Hyvä Theme.

Take a look at this example:

 <button class="inline-block px-8 py-2.5 bg-green-600 text-white
w-full md:w-auto">Login</button>

It translates to:

  
   button {
       display: inline-block;
       padding-left: 2rem;
       padding-right: 2rem;
       padding-top: 0.625rem;
       padding-bottom: 0.625rem;
       background-color: #16A34A;
       color: white;
       width: 100%;
   }
   @media (min-width: 768px) {
       button {
           width: auto;
       }
   }

What is PostCSS?

PostCSS was launched as a method to use JavaScript for CSS processing.

PostCSS is a Node.js tool that transforms your styles using JavaScript plugins.

It generates more downloads per week on NPM than other CSS preprocessors like Sass, Less, and Stylus combined.

PostCSS has a rich ecosystem of plugins that can be used to perform various tasks such as linting, minification, prefixing vendor-specific styles, and more.

PostCSS is also used by other technologies like Vite and Next.js, as well as the CSS framework TailwindCSS which is a PostCSS plugin.

PostCSS in PHPStorm

If you want to remove errors in PHPStorm due to nesting in .css files, install the PostCSS plugin.

When the PostCSS plugin is installed and active, open the PHPStorm settings and navigate to:

Languages & Frameworks > Style Sheets > Dialects.

Select PostCSS from the dropdown, then add the paths to web/tailwind in your themes.

For example:

• src/vendor/have-themes/magento2-default-theme/web/tailwind
• app/design/frontend/Acme/default/web/tailwind

PostCSS in VSCode

If you want to remove errors in VSCode due to nesting in .css files, install the PostCSS Language Support plugin.

Please see the plugin documentation for available configuration options.

Tailwind Purge Content Settings

PurgeCSS is the main benefit of Hyva Theme. because it eliminates all styles that are not utilized, retaining only the essential styles. PurgeCSS decreases the number of classes in the final CSS.

“PurgeCSS examines your content and CSS files, comparing the selectors utilized in your files with those in your content files. It eliminates unused selectors from your CSS, leading to smaller CSS files.”

In Hyvä’s purging process, the script identifies all the Tailwind classes employed in the theme and extracts them from the comprehensive original Tailwind stylesheet.

How to generate the styles and use Watcher while working with Hyva themes? You can read this article here: Guide to How to generate the styles and use Watcher while working with Hyvä themes.

Hyvä Theme CSS File Directory Structure

In a Hyvä theme, the source CSS files are located in the directories 

 app/design/frontend/Aureatelabs/hyva/web/tailwind/components/*.css

and 

 app/design/frontend/Aureatelabs/hyva/web/tailwind/theme/components/*.css

The tailwind/components directory is for reusable elements such as buttons, sliders, and inputs.

The tailwind/theme/components directory is intended for larger components or pages, such as the category page, account pages, the header, etc.

Nevertheless, this practice is not consistently adhered to. For instance, within tailwind/components, you will also find product-page.css and category-page.css.

Want to learn more about Hyvä?? Here’s the complete tutorial on the Hyvä Theme.

Add new CSS files Into Hyva theme

1. If you want to add a new small component like tables.css then create a new file in this path:

app/design/frontend/Aureatelabs/hyva/web/tailwind/components/tables.css

Then open the below file

app/design/frontend/Aureatelabs/hyva/web/tailwind/tailwind-source.css

and import file here ”@import url(FolderName/FileName)”.

@import url(components/page-builder.css);
@import url(components/tables.css);

2. If you want to add a new third-party slider and Team page then, for the slider, you need to create a new file (Ex: splide.min.css) in this path:

app/design/frontend/Aureatelabs/hyva/web/tailwind/theme/components/splide.min.css

Then open below file:

  app/design/frontend/Aureatelabs/icoffee/web/tailwind/theme.css

and import file here (@import “FolderName/FolderName/FileName”):

@import “theme/components/blogs.css”;
@import “theme/components/splide.min.css”;

Generating CSS

First, you will need to install all required node packages.

cd /path/to/project/app/design/frontend/Aureatelabs/hyva/web/tailwind/ npm install

We recommend using node version 16 or newer.

You can also use node version According to Hyva theme version:

• Hyvä 1.2.x: node 14.0.0
• Hyvä 1.1.x: node 12.13.0
• Minimum required Node.js version for any release of TailwindCSS is available in the tailwindcss packages.json file at engines.node.

1. Generating CSS for production: 

For Production mode, you can generate the styles using the command

   cd /path/to/project/app/design/frontend/Aureatelabs/hyva/web/tailwind/ npm run build-prod

2. Generating CSS during development: 

For Development mode, you can generate the styles using the command

   cd /path/to/project/app/design/frontend/Aureatelabs/hyva/web/tailwind/ npm run watch

This will start running the tailwind compiler continuously and any CSS classes added to templates in the purge configuration will be added to the styles.css file immediately.

Conclusion

Tailwind CSS Resources

• Check out this YouTube playlist for an outstanding crash course introduction to Tailwind CSS presented by its creators.
• Tailwind CSS Cheat Sheet: https://tailwindcomponents.com/cheatsheet/
• Tailwind CSS Cheat Sheet: https://nerdcave.com/tailwind-cheat-sheet
• If you are using VS Code, you can utilize the Tailwind CSS IntelliSense extension for suggestions of the class list. Your preview is as per the screenshot below.

More resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

There are two methods to develop your own theme with Hyva:

1. Creating a Child Theme, similar to the default Magento setup: As a beginner, this is the recommended approach. It involves establishing a child theme, allowing for customization while inheriting the core functionalities of the default Magento theme.
2. Duplicating the hyva-themes/magento2-default-theme and making modifications: For a more advanced approach, duplicating the hyva-themes/magento2-default-theme provides a robust foundation for customization. However, as a beginner, we’ll focus on the first method initially and reserve the second approach for a dedicated blog post.

In this blog, we will guide you through the process of creating a child theme in the Hyvä theme. While it closely aligns with the default Magento 2 method, there are a few additional steps unique to Hyvä, which we will explore in detail.

New to Hyvä?? Learn about the Hyvä Theme from basics!

Step 1

Create a folder Aureate/hyva inside the “app/design/frontend”.

Step 2

Create a theme.xml file inside the folder path “app/design/frontend/Aureate/hyva” and in the theme.xml file add a few lines of code.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Hyva Child</title>

<parent>Hyva/default</parent>

<media>

<preview_image>media/preview.png</preview_image>

</media>

</theme>

Note: Don’t forget to create the media folder and add ‘preview.png’ to the “app/design/frontend/Aureate/hyva”.

Step 3

create a registration.php file inside the folder path “app/design/frontend/Aureate/hyva” and in the registration.php file add a few lines of code.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

  \Magento\Framework\Component\ComponentRegistrar::THEME,

  'frontend/Aureate/hyva',

  __DIR__

);

Step 4

create a composer.json file inside the folder path “app/design/frontend/Aureate/hyva” and in the composer.json file add the few lines of code.

{

"name": "aureate/theme-frontend-hyva-child",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"magento/luma": "100.0.*",

"magento/framework": "100.0.*"

},

"type": "magento2-theme",

"version": "2.2.1",

"license": [

"OSL-3.0",

"AFL-3.0"

],

"autoload": {

"files": [

"registration.php"

]

}

}

Step 5

Duplicate the ‘web’ folder from vendor/hyva-themes/magento2-default-theme/web/ to app/design/frontend/Aureate/hyva. This step is crucial as, during later customization, when editing the CSS, you will need to ensure that the changes are incorporated into the purgeCSS configuration.

If you are not familiar with Tailwind CSS, I recommend checking out our blog post titled ‘How to generate the styles and use Watcher while working with Hyvä themes?‘ It provides valuable insights into integrating and utilizing Tailwind CSS within the Hyvä Theme environment.

Step 6

To set the parent theme path in your child theme’s web/tailwind/tailwind.config.js file, navigate to app/design/frontend/Aureate/hyva/web/tailwind/tailwind.config.js. Locate the commented line labeled ‘parent theme in Vendor,’ and simply uncomment the line below it. If this line is not present, add it to the code as demonstrated below. 

module.exports = {

...

// keep the original settings from tailwind.config.js

// only add the path below to the purge > content settings

...

purge: {

content: [

            // this theme's phtml files

            '../../**/*.phtml',

            // The theme-module templates are included automatically in the purge config since Hyvä 1.1.15, but

            // for themes based on earlier releases, enable the appropriate path to the theme-module below:

            // hyva theme-module templates (if this is the default theme in vendor/hyva-themes/magento2-default-theme)

            '../../../magento2-theme-module/src/view/frontend/templates/**/*.phtml',

            // hyva theme-module templates (if this is a child theme)

            '../../../../../../../vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/**/*.phtml',

            // parent theme in Vendor (if this is a child-theme)

            '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',

            // app/code phtml files (if need tailwind classes from app/code modules)

            '../../../../../../../app/code/**/*.phtml',

            // react app src files (if Hyvä Checkout is installed in app/code)

            //'../../../../../../../app/code/**/src/**/*.jsx',

            // react app src files in vendor (If Hyvä Checkout is installed in vendor)

            //'../../../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/reactapp/src/**/*.jsx',

            //'../../../../../../../vendor/hyva-themes/magento2-hyva-checkout/src/view/frontend/templates/react-container.phtml',

            // widget block classes from app/code

            '../../../../../../../app/code/**/Block/Widget/**/*.php'

]

}

}

...

Step 7

After completing the above steps, please run the following command:

 bin/magento setup:upgrade

Step 8

Navigate to the Admin Dashboard, then go to Content -> Design -> Configuration. Then, edit the theme. From the dropdown menu, select your child theme ‘Hyva Child,’ and proceed to save the configuration changes. Don’t forget to flush the cache after saving.

Then, check your front-end preview:

Extending your theme in Hyvä operates similarly to default Magento themes. You have the flexibility to override .phtml files and extend layout XML, following the same approach as you would with a default Magento theme based on Luma. 

Check out the Theme Development Best Practices for better outcomes!

That’s it !!

More resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

Magento 2, known for its robust e-commerce capabilities, becomes even more powerful with the implementation of the Hyva theme (what is Hyva theme?). This modern and responsive theme is crafted to provide an enhanced user experience, making your storefront visually appealing and intuitively navigable.

The Hyva theme is designed to provide a modern and responsive look for Magento 2 stores. Before you begin the installation, ensure that you have a backup of your Magento 2 store in case of any unforeseen issues. 

This step-by-step guide will lead you through the process of installing the Hyva theme in Magento 2, ensuring a smooth and hassle-free experience. So, if you’re ready to enhance your Magento store’s performance and user experience, let’s get started with this comprehensive Hyva theme installation guide.

Requirements

• Hyvä theme is compatible with Magento 2.4.3 or higher versions. Ensure your Magento version is older than 2.4.3, and we recommend upgrading first and then implementing the Hyvä theme.

• A valid license for Hyvä Themes (Check here: https://hyva.io/license)
• For licensees: A Private Packagist Key
• For partners: Access to Hyvä Gitlab
• PHP 7.4, 8.1 or 8.2

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Hyva Installation Process For Licensees (Merchants or Businesses)

Step 1: Execute the following composer commands to install Hyvä:

# this command adds your key to your projects auth.json file

# replace yourLicenseAuthentificationKey with your own key

composer config --auth http-basic.hyva-themes.repo.packagist.com token yourLicenseAuthentificationKey

# replace yourProjectName with your project name

composer config repositories.private-packagist composer https://hyva-themes.repo.packagist.com/yourProjectName/

Step 2: Then, install the theme package and its dependencies:

composer require hyva-themes/magento2-default-theme

For your information, the module below will be automatically installed when you run the above command.

• hyva-themes/magento2-email-module
• hyva-themes/magento2-graphql-tokens
• hyva-themes/magento2-graphql-view-model
• hyva-themes/magento2-reset-theme
• hyva-themes/magento2-theme-module

Step 3: Next, run the Magento installer:

  bin/magento setup:upgrade

Step 4: Now, log in to the Magento admin and follow the instructions below:

• Navigate to the Content > Design > Configuration > Edit your theme
• Activate the hyva/default theme
• Save the configuration
• In developer mode Navigate to System > Tools > Cache Management 
• Flush Magento Cache

• In deploy mode production below command is required

bin/magento setup:static-content:deploy

Step 5: After installing the Hyva theme, you will see a page similar to the screenshot below.

To create your child theme, continue with: Building your Hyva Theme!

Hyva Installation Process for Technology Partners and Contributions

To begin, ensure you have access to all Hyvä repositories at gitlab.hyva.io. If, for any reason, you don’t have access, please reach out to the Hyvä team for assistance.

Step 1: Run the following commands to install Hyvä directly from GitLab with composer:

# hosted on private gitlab:

composer config repositories.hyva-themes/magento2-theme-module git git@gitlab.hyva.io:hyva-themes/magento2-theme-module.git

composer config repositories.hyva-themes/magento2-reset-theme git git@gitlab.hyva.io:hyva-themes/magento2-reset-theme.git

composer config repositories.hyva-themes/magento2-email-module git git@gitlab.hyva.io:hyva-themes/magento2-email-module.git

composer config repositories.hyva-themes/magento2-default-theme git git@gitlab.hyva.io:hyva-themes/magento2-default-theme.git

composer require hyva-themes/magento2-default-theme --prefer-source

Step 2: Next, run the Magento installer:

bin/magento setup:upgrade

Step 3: Next, login to Magento admin

• Navigate to the Content > Design > Configuration > Edit your theme
• Activate the hyva/default theme
• Save the configuration
• In developer mode Navigate to System > Tools > Cache Management 
• Flush Magento Cache

• In deploy mode production below command is required

bin/magento setup:static-content:deploy

Congratulations, you have successfully installed the Hyva theme in Magento 2.

Conclusion

Overall, this step-by-step guide serves as a valuable resource for those seeking to seamlessly integrate Hyva Themes into their Magento 2 environments. Its clarity, attention to detail, and user-centric approach contribute to making the theme installation process an accessible and positive experience for Magento users at various skill levels.

Thank you for joining us in this journey towards installing and optimizing Hyva themes in Magento 2 from a professional’s perspective. We hope you found this guide valuable and wish you success in your online store venture!

More resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

Stay tuned for more insightful articles on Magento and web development best practices.

eCommerce is evolving, with new trends popping up every day, and old ones blowing out.

If your store isn’t updated with the latest eCommerce trends and is still stuck in the ’90s, it’s time for a change. Because staying updated with trends isn’t just an advantage — It’s a necessity.

Nowadays, people intensely follow trends even when they’re shopping. To match their preferences, eCommerce store owners need to embrace these changes. Because honestly, what was “great” yesterday, might not be so appealing today. 

For those looking to keep up with customer expectations and competition, I’m adding the most important eCommerce trends in this blog.

And I know it includes you, so, let’s hang in together.

Latest eCommerce Trends to Watch For in 2024

1. Augmented Reality (AR) & Virtual Reality (VR)

2. Voice Search

3. Chatbots as Personal Assistance

4. Visual Search

5. Social Commerce

6. Mobile Commerce (Mobile Shopping)

7. Live Streaming Commerce

8. Localization

9. Personalized Shopping Experiences

10. Buy Now, Pay Later

11. Payment Through Digital Currency

12. Sustainable eCommerce

Now, let’s understand these trends in detail and see how they impact your customer’s shopping journey and purchase decisions. Along with that, we’ll explore examples of how other eCommerce businesses have implemented these trends.

1. Augmented Reality (AR) & Virtual Reality (VR)

Augmented reality is a technology that showcases the real and virtual worlds together, by overlaying 3D visuals in a real-world environment. Virtual reality is when internet users are completely taken to a virtual world that doesn’t exist, often using headsets or goggles.

As per Gartner, customers focus more on the value provided by your brand. Due to these pressures, the eCommerce industry has turned its head towards AR and VR, which helps it provide impressive and interactive online shopping experiences.

Let’s check what AR and VR brought to spark customers’ buying interest.

How Do AR and VR Impact Customers’ Purchase Decisions?

One of the major reasons people hesitate to buy online is that they’re skeptical if the product is genuine or not. And that’s where AR and VR help by providing customers with a 360° view of products.

With AR and VR, it is possible for your customers to;

• Explore the products from all sides and angles
• Try the product virtually
• And make a better purchase decision

This often leads to a decrease in return rates and an increase in customer product knowledge.

Example of Augmented Reality (AR) & Virtual Reality (VR)

Here’s how Crate&Kids used AR and VR to enhance the online shopping experience on their site.

Here’s what this feature works like.

Here are some other examples of how eCommerce owners have started utilizing AR and VR technology.

• A skincare brand carries out an AR filter on Instagram to let people try their products before purchasing.
• A furniture-selling company uses AR to let customers measure sofa dimensions in their place (as shown above).
• A travel agency uses VR to provide customers with a sneak peek of destinations they can visit.

AR and VR are great at providing your customers with a valuable store visit, which can spark their interest in purchasing from you. For 2023 and the upcoming years, augmented reality and virtual reality are going to be in trend and will be staple needs for eCommerce website owners.

2. Voice Search

Instead of typing keywords, people now rely on voice assistants for internet searching.

Customers use this feature for exploring product collections, asking questions, ordering products, and completing the purchase process. As per Statista, the U.S. had 142 million voice assistant users in 2022, which is expected to increase by 157 million by 2026.

Let’s understand how implementing voice search can impact your customer’s buying decisions.

How Does Voice Search Impact Customers’ Purchase Decisions?

Customers find it easy to search through the voice search option, as they no longer need to type in long queries or keywords or deal with spelling errors. Voice search made customer journeys easy by allowing them to tap and speak their search queries simply.

So, if you have the voice search option on your eCommerce website, your customers will easily discover their desired products and services. The quick & accurate results through voice search will ultimately lead your customers to make a purchase.

Example of Voice Search in eCommerce

Here’s how Amazon implemented Alexa as a voice search assistant on its eCommerce website.

For implementing voice search on your website, here are some options to consider.

• Voice assistants, such as Alexa and Google Assistant
• Third-party voice search plug-ins
• Develop a custom voice search feature

No matter which option you choose, you’ll require technical expertise to implement a voice search feature. And our eCommerce experts can help you with that.

3. Chatbots as Personal Assistance

People shop online around the clock. Chatbots can support every stage of the customer journey, from conversion to retention, by answering their queries 24/7.

There are 3 types of chatbots:

1. AI-driven: It is also known as conversational AI, where it captures human behavior and speech patterns and answers accordingly. For example, Myntra’s FashionGPT.
2. Rule-based: It offers answers to predefined questions that a user may ask. For example, regular chatbots on websites.
3. Hybrid chatbots: It is a blend of both AI and rules-based chatbots. For example, Sephora’s Virtual Artist, and H&M’s Ada.

If we compare chatbots with human sales assistants, chatbots are quick at serving solutions — faster than you blink. Gartner predicts that by 2027 chatbots will become a primary channel for customer service.

Let’s check how implementing a chatbot will bring your customer closer to the “checkout” button.

How Do Chatbots Impact Customers’ Purchase Decisions?

With chatbots, your customers can get answers in seconds, without waiting for a human to consider their query and respond to it.

Moreover, chatbots can work as personal shopping assistants for your customers, by providing product suggestions, comparing different options, and more.

This often has 2 results:

• Increase in customer satisfaction and customer engagement, as their queries are answered quickly.
• Increase in eCommerce sales numbers, as people are getting all the necessary information quickly to proceed with the purchase.

Examples of Chatbots in eCommerce

Here is an example of a chatbot’ from our client’s website.

And here’s another example of an AI-based chatbot from Myntra, a fashion brand.

Myntra introduced an AI assistant named MyFashionGPT, powered by ChatGPT. This helps users find products that match their unique requirements.

You can also consider implementing this trending feature to your eCommerce site in a similar way.

4. Visual Search

Visual search is the process of searching directly through images instead of text. For example, you click a photo or take a screenshot of a dress and upload it on Google Images to buy or find a similar one.

It’s no surprise that visual search is one of the fastest-growing eCommerce trends. 45% of eCommerce business owners have implemented visual search on their websites. This list includes Asos, Boohoo, M&S, eBay, and more.

How Does Visual Search Impacts Customers’ Purchase Decisions?

With the visual search option, people can find exact or similar products they saw others wearing without the hassle of describing product designs, textures, or anything.

Products found through visual search engines can amaze and impress your shoppers, and they’ll look at them more positively than usual. So, if you have a visual search option implemented on your website, it will be easy for you to convince your customers.

Examples of Visual Search in eCommerce

Here’s how eBay, Asos, and H&M implemented visual search options on their eCommerce websites.

This feature helps simplify your customer’s search process and helps your shoppers reach their desired product quickly.

5. Social Commerce

We can call social commerce a branch of eCommerce business, that operates on social media platforms. Shoppers use social commerce to:

• Discover brands
• Research products
• Interact with customer support teams
• Purchase items

Social commerce creates the most interactive and convenient shopping experience for your customers. This is the reason, why social commerce revenue in the U.S. grew by $53.1 billion, in 2022 alone.

Let’s check how social commerce helps you boost sales and convince your customers to make a purchase.

How Does Social Commerce Impacts Customers’ Purchase Decisions?

Social media has changed the way people shop, by making it all about authenticity. Now, before making a purchase, people explore social media to:

• Know what’s trending
• Check the brand popularity
• Know stories/reviews from real people

And It’s true. Statista itself says that 28% of online shoppers take shopping inspiration from social commerce. This means you must consider social commerce to showcase your product collection, and invite your target audience to make a purchase.

Examples of Social Commerce

There are a variety of ways you can get started with social commerce, and below are some of the most common ways for you to follow.

• Storefronts or profiles on Social media
• Influencer Content
• Shoppable Organic Content
• Paid Ads

Here I’m adding examples of how other brands are implementing these trends on their social media channels.

You can take inspiration from these and join this trend of social commerce. By doing so, you can reach a wider target audience and offer your customers a platform to get more familiar with your brand. 

6. Mobile Commerce (Mobile Shopping)

Mobile Commerce is the online sale and purchase of products through wireless devices, such as smartphones and tablets — essentially, mobile shopping. It includes:

• Mobile native application
• Progressive Web Apps (PWA)
• Mobile Payments/Wallets
• Mobile Website

We live in an economy where people expect everything done within a few taps and swipes on their mobile devices. Right?

More than 60% of people in the world, prefer mobile devices to shop online in 2023. Now, this makes it your priority to jump into this booming trend of mobile commerce.

Let’s understand how holding hands with mobile commerce helps you convince your customers.

How Do Mobile Commerce Impact Customers’ Purchase Decisions?

Mobile commerce comes with many benefits for your customers and you. With mobile commerce, your customers:

• Can shop from anywhere and anytime, even while standing on the bus
• Can easily navigate, reach your social media handles, and gain more product information
• Can compare prices quickly within a few taps
• Can use the augmented reality (AR) features to shop in a better way
• Can pay through online wallets, such as Google Pay and Apple Pay

In short, mobile commerce can help you make your customers’ purchase journey more convenient, resulting in more online purchases.

Examples of Mobile Commerce

All the eCommerce mobile websites/applications that allow customers to buy and pay online, can be considered as an example here.

Some of those mobile applications/websites are:

• Amazon
• Etsy
• eBay

And more…

Moreover, adapting to mobile commerce trends can help acquire more customers, and provide them a better experience with your brand. So, it is always a good practice to make your eCommerce store mobile-friendly to get mobile shoppers.

7. Live Streaming Commerce

Live streaming commerce is when online retailers sell products online through live video while interacting with shoppers in real time.

It is in trend because it helps brands reach a wider audience, interact and engage with them in real time, to sell them products. Many companies say their conversion rates went 10x higher with live-streaming commerce.

So, what are some aspects of live-streaming commerce that convince your customers to buy more than usual? Let’s uncover.

How Does Live Streaming Commerce Impact Customers’ Purchase Decisions?

Live streaming is working well for eCommerce business owners, as it:

• Enables real-time interactions, leading to increased trust in your brand.
• Shows products in action, leading to improved product knowledge.
• Shares attractive or limited-time offers, leading to immediate purchase decisions.
• Includes social proof in the form of live chat and comments, leading to increased confidence to buy.

So, yes, all these were the reasons why live streaming is better at driving immediate purchase decisions.

Live streaming commerce attracts a huge list of new customers along with existing ones. This especially consists of youth, who are keen to understand and experiment with new formats of shopping online.

Example of Live Streaming Commerce

Here’s an example of live-streaming commerce from YouTube Live.

If you want to livestream your products you can choose TV channels, and platforms such as Instagram Live, Youtube Live, Amazon Live, Alibaba, and more.

8. Localization

eCommerce Localization aims at creating more personalized and relevant online shopping experiences for customers from different regions.

It includes all the aspects of your eCommerce stores, be it;

• Content
• UI/UX
• Language
• Marketing tactics
• Currency

… And more. The simple idea behind localization is to do business in multiple markets without facing any cultural barriers. Let’s check how your customer’s purchase decision can be influenced if you localize your eCommerce store.

How Does Localization Impact Customers’ Purchase Decisions?

When your website addresses your customer’s needs and queries in their local language and cultural preferences, they feel more emotionally connected and understood.

This connection helps customers build trust in your brand, which often convinces them to make a purchase.

Example of Localization

Here’s an example of how Crate & Barrel localized their eCommerce site while entering the UAE market.

This is the original version of Crate & Barrel’s website.

This is how they localized content and language to match the cultural preferences of the people in UAE.

If you’re looking to enter different regions with your eCommerce business, do consider localization. It allows your customers to welcome your brand and lets you build a strong brand presence.

9. Personalized Shopping Experiences

A personalized shopping experience involves providing an experience that is unique to each customer, depending on their browsing behavior and user profile.

For example, if you purchased a t-shirt online, on your next visit, the store might suggest their denim jeans collection that perfectly matches your purchase.

There are a variety of ways you can provide personalized shopping experience, such as;

• Personalized Product Recommendations
• Personalized Offers
• Personalized Emails
• Retargeting

… And more. A study also found that 71% of customers expect personalized shopping experiences.

So, why personalized shopping experiences are highly preferred by customers? Is this the thing that motivates them to buy? Let’s check.

How Does Personalized Shopping Experience Impact Customers’ Purchase Decisions?

The clothing store I often shop from knows my fashion preferences. Every time I visit them, they suggest products that match my interests.

What makes me a loyal customer — besides their amazing collection — is this personalized experience. Customers appreciate it when brands make an effort to understand individual choices and preferences, and then tailor offerings to meet those needs.

This results in higher customer loyalty, and satisfaction, which helps you boost eCommerce sales.

Example of Personalized Shopping Experience

Here’s an example of a personalized product suggestion from H&M that encourages customers to buy products that complement their current interests.

You can consider adapting this growing eCommerce trend to your store. Because personalization significantly helps improve customer experience.

10. Buy Now, Pay Later

Buy Now, Pay Later is a short-term loan, where customers can purchase a product and pay over time, usually for full amounts or installments (with no interest sometimes).

You’ve probably come across this trend, haven’t you? Initially, when I learned about it, I was skeptical. It seemed too convenient and advanced to be true. However, nowadays, I notice that a majority of eCommerce stores offer the option of buy now and pay later.

But why is this the case? Well, the reason is that more than 360 million people, worldwide, prefer the Buy Now Pay Later option. So, is it impactful for your customers?

How Does the Buy Now, Pay Later Option Impact Customers’ Purchase Decisions?

The name itself, “Buy Now, Pay Later”, is pretty convincing to customers. Shoppers are always mindful of prices, and they might hesitate to purchase;

• If something doesn’t quite fit their budget,
• Or if they’re trying to save up for emergencies.

But the “Buy Now, Pay Later” option comes in pretty handy. With this, your customers can get what they want without any immediate payment pressure. Moreover, customers prefer it over credit cards and personal loans since it’s easier to get approved and often comes without interest.

Examples of Buy Now, Pay Later

Here’s an example of Buy Now Pay Later, from a fashion brand Boohoo. 

This new eCommerce trend of Buy Now Pay Later can turn out a win-win situation for both your customers and your business. So, consider this trend for your eCommerce growth.

11. Payment Through Digital Currency

Digital currency is a currency, money, or money-like asset that is managed, stored, and exchanged by computer-based devices, over the Internet.

There is a trend flying over eCommerce world — payment through digital currency — where eCommerce stores have started to accept digital currencies as a payment. This often works around cryptocurrency, which is a type of digital currency.

So, is customer purchase decision really influenced by the existence of digital currency as a payment method? Or have customers never required this? Let’s check.

How Accepting Digital Currency for Payment Can Impact Customers’ Purchase Decisions?

Usage of digital currencies is growing widely, people have slowly but steadily started to embrace digital currency, as a way of investment and transaction. The reasons why people are switching to using digital currency are:

• It can be used globally
• Transactions are quick and easy in comparison to traditional banking system
• It’s highly secure and difficult to get hacked
• Protects against traditional money devaluation

… And more.

People are so attracted to digital currency, that more than 15000 businesses, till now, accept it as a payment option. So, when you start accepting digital currency as a payment option on your eCommerce store, your customers will definitely appreciate it.

Examples of brands that accept Digital Currency

Here are some top brands that accept digital currency as an option of payment.

• Tesla
• YSL
• Gucci
• Microsoft

… And many more. You can also look forward to this trend of cryptocurrency and wow your customers.

12. Sustainable eCommerce

Environment awareness has long been a trend in eCommerce.

Most eCommerce brands realize their responsibility towards nature and are in a try to get environment conscious. There are many ways they’re following this trend of sustainability, including:

• Launching sustainable and ethical product collections. For example, bamboo toothbrush, vegan leather wallet, and more.
• Providing sustainable and ethical packaging. For example, reusable glass jars, metal tins, paper bags, fabric bags, and more.
• Promoting second-hand products. For example, refurbished appliances, second-hand jewelry, used baby equipment, and more.

… And more. But do customers really care if an eCommerce brand labels itself as environment-conscious? Let’s check how customers are affected by this new trend of sustainability.

How Does the Sustainable Commerce Approach Impact Customers’ Purchase Decisions?

When brands make efforts to make and sell products in an ethical manner that are easy to recycle and cruelty-free, customers love to show support.

GenZ and millennials today understand how their choices impact the world, and that’s why they are always willing to choose sustainable products. This often helps brands build valuable connections with customers, making it a win-win situation for both customers and businesses.

Examples of the Sustainable Commerce Approach

Here’s an example of an eCommerce brand, named “A Good Company”, which sells sustainable & environment-friendly products — Which is a great initiative.

Some brands like Milk Makeup, also launch specific ethical product collections that are good for the environment and are cruelty-free. Here’s an example.

It’s great if you’re also looking to follow this trend of sustainability. Doing so will help you convince your customers better, and take a step for the future of our planet.

Here our list of the biggest eCommerce trends of 2024 ends. Now, let’s check the impact of not following these trends that your customers care most about.

Why Considering eCommerce Trends is Necessary?

In earlier times websites used to be a lot different than what is it today. There were issues such as:

• Tacky designs and visuals
• Improper product view
• Slow loading times
• Incompatibility with mobile devices

And a lot more, which resulted in poor customer experience, lower online sales and conversions, and a negative brand image. But slowly and steadily eCommerce websites have grown enough to provide the best kind of customer experience.

So, what helped make this progress? Is it all done overnight? NO.

It’s each and every eCommerce trend that catered to customer expectations and brought the eCommerce industry experience to what it is today.

As an eCommerce owner, you should focus on recent and upcoming trends that matter for your business. After all, following trends helps you match your customers’ preferences and provide them best experience with your brand. Ain’t it?

Another thing, you might be wondering is if you need to follow each of these eCommerce trends to watch your store’s success. So, let’s figure that out.

Do All Trends Matter for Online Store Success?

NO!

There are thousands of trends coming and going, and all of them don’t promise the success of your eCommerce store.

But many of those eCommerce trends, do matter. So, to figure out eCommerce trends you need to adapt, you can carry out research on stuff like;

• Does your business need this?
• Is it any way benefiting your customers?

If the answer is YES, go for it.

So, Joining the eCommerce Trend Evolution?

Well, you should.

Just look around — customer expectations are increasing every day and the eCommerce industry (including your competitors) is moving far enough to match them.

If you are not following these eCommerce trends that help improve customer experience with your brand, you may fall back on your success race.

So, why WAIT & RISK? Rather than getting started?

PS: We are a web development agency with a decade of experience (in eCommerce), that can help you get started with any of your web-related requirements. So, don’t hesitate to Contact Us today.