Interactive E-Com UI Tutorial: Rotating Sale Indicator
Tags: ux, animation, shopif, frontend
Published: 2023-06-23 14:23:07

## Introduction

In the fast-paced world of e-commerce, engaging users with interactive and visually appealing elements is crucial. Animations play a significant role in capturing the user's attention and influencing their behavior. In this article, we will be adding o a rotating sales sign to a Shopify Hydrogen store, that dynamically animates a sales offer on your website. We will leverage the power of the framer-motion library to achieve the animation effect.


![Rotating Sale Indicator Product Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjt412u1x7q7ab184v9z.gif)

## Setting the Stage

When implementing new features or animations, the goal is to influence user behavior. One effective way to achieve this is by tapping into human behavior patterns.For this animation, we had the following pattern in mind:

**Breaking Rules**
Breaking established norms and patterns can capture attention effectively. When something deviates from the expected or challenges familiar conventions, it immediately grabs the user's interest and attention. By introducing unexpected and unconventional elements in your design, you can pique curiosity and draw focus to specific areas.
You can see this effect come into play in this example:

![Breaking Rules Behavior Pattern in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/senywm24z7k2qnkft167.gif)

Just as in out last articles we would use those behavior patterns to form an educated hypothesis for testing the new component.
But now, let's get coding!

## Getting Started

Before we dive into the implementation, let's understand the goal and the technology stack we'll be using.

**Goal**
The main objective of our rotating sales sign is to attract users and encourage them to explore the available offers on your e-commerce website. By creating an eye-catching animation, we aim to pique the user's curiosity and motivate them to take action.

**Technology Stack**
To achieve our goal, we will utilize the following technologies:
Shopify Hydrogen: Shopifys headless framework utilizing React
framer-motion: A library that provides a set of easy-to-use motion components for creating animations in React.

## Implementing the RotatingSaleSign Component

Let's start implementing our RotatingSaleSign component step by step.

**Step 1: Defining the Props Interface**
Before diving into the component implementation, let's define the interface for the component props. This interface helps ensure that the correct props are passed to the component and provides type safety within our codebase.

```tsx
interface RotatingSaleSignProps {
  cardLabel: string | undefined;
}
```

In this code snippet, we define an interface called `RotatingSaleSignProps`, which specifies the props expected by the `RotatingSaleSign` component. The interface has a single prop called `cardLabel`, which represents the label for the sales sign. The prop is of type `string | undefined`.

**Step 2: Creating the RotatingSaleSign Component**
Now, let's create the RotatingSaleSign component. This component will render the rotating sales sign based on the provided cardLabel prop.

```tsx
export function RotatingSaleSign({ cardLabel }: RotatingSaleSignProps) {
  return (
    cardLabel === 'Sale' && (
      <motion.div
        className="absolute top-0 right-0 m-4 text-right text-notice"
        style={{
          width: 80,
          height: 80,
        }}
        animate={{ rotate: 360 }}
        transition={{
          duration: 15,
          repeat: Infinity,
          ease: "linear",
        }}
      >
        <img src={saleImage} alt="sale" /> {/* Use the img element here */}
      </motion.div>
    )
  );
}
```

In this code snippet, we define the `RotatingSaleSign` component as a functional component. It receives the `RotatingSaleSignProps` object as its parameter, which is destructured to extract the `cardLabel` prop.

The component uses conditional rendering to determine whether to display the rotating sales sign. If the `cardLabel` is equal to `'Sale'`, the component renders a `<motion.div>` element from the `framer-motion` library. This `<motion.div>` represents the container for the rotating sales sign.

Inside the `<motion.div>,` we define the styling for the container using the `style` prop. The container has a fixed width and height of 80 pixels.

The animation is achieved using the `animate` and `transition` props provided by `framer-motion`. We set the `animate` prop to `{ rotate: 360 }`, which rotates the sales sign continuously by 360 degrees. The `transition` prop defines the duration of the animation, the number of times it repeats (`Infinity` for infinite looping), and the easing function to use.
Finally, we include an `<img>` element inside the `<motion.div>`. This `<img>` represents the sales sign image to be displayed. Make sure to provide the appropriate `src` and `alt` attributes for the image.

**Step 3: Exporting the RotatingSaleSign Component**
To make the `RotatingSaleSign` component accessible to other parts of our application, we export it using the `export` keyword.

```tsx
export default RotatingSaleSign;
```
This allows us to import and use the `RotatingSaleSign` component in other files within our project.

**Implementing the Component**
We can the use our created component to implement it anywhere in out store.In this case, we're implementing it into the `ProductCard.tsx` utilizing the existing `cardLabel` variable to render our sign on top of the product image, only when the product is on sale.

```tsx
          <div className="card-image aspect-[4/5] bg-primary/5">
            {image && (
              <Image
                className="object-cover w-full fadeIn"
                sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                aspectRatio="4/5"
                data={image}
                alt={image.altText || `Picture of ${product.title}`}
                loading={loading}
              />
            )}
            {cardLabel === 'New' && (
              <Text
                as="label"
                size="fine"
                className="absolute top-0 right-0 m-4 text-right text-notice"
              >
                {cardLabel}
              </Text>
            )}
            <RotatingSaleSign 
              cardLabel={cardLabel} 
            />
          </div>
```

## Conclusion
That's all for today!

In this article, we explored how to create an animated rotating sales sign in Shopify Hydrogen. By leveraging the power of the framer-motion library, we were able to implement a visually appealing and attention-grabbing animation. The rotating sales sign serves as a powerful tool to engage users and encourage them to explore the available offers on your e-commerce website.

Remember, animations can have a significant impact on user behavior, and implementing interactive elements can lead to increased user engagement and conversions.

Happy coding!