{"id":28490,"date":"2022-03-23T22:23:02","date_gmt":"2022-03-23T22:23:02","guid":{"rendered":"http:\/\/E-commerce-Product-Variant-Customization-in-Next.js"},"modified":"2026-03-15T12:56:29","modified_gmt":"2026-03-15T19:56:29","slug":"e-commerce-product-variant-customization-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/e-commerce-product-variant-customization-in-next-js\/","title":{"rendered":"E-commerce Product Variant Customization"},"content":{"rendered":"

In modern e-commerce applications, customers demand tailor-made products and the ability to customize their shopping experience for products.<\/p>\n

With product variant customizations, customers can personalize the products themselves in online stores, exactly how they want them before purchase.<\/p>\n

This post outlines how to create a customizable product component on a Next.js page.<\/p>\n

Sandbox<\/h2>\n

You can find a complete version of the application on Codesandbox<\/a> and GitHub<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

GitHub URL: https:\/\/github.com\/iamfortune\/cloudinary-product-customization-component\/tree\/main\/<\/a><\/p>\n

Prerequisites and Installation<\/h2>\n

Following through with this post requires basic knowledge of JavaScript and React.js.<\/p>\n

To get started, we install the Next.js CLI and create a Next application using NPX – a node package runner. We can also use yarn to install packages and create a new project. Next.js ships with starters, and in our application, we\u2019ll use the Next.js default starter.<\/p>\n

To get a Next.js project started, we navigate to our desired directory and run the terminal command below:<\/p>\n

    npx create-next-app \n<\/code><\/span><\/pre>\n
Follow the prompt to create a Next.js project using the default starter.<\/p>\n
This project uses Cloudinary<\/a> to store and transform media assets.<\/p>\n
Cloudinary provides a robust media experience for any media type, covering image and video storage, transformation, delivery, and optimization.\nWe\u2019ll use the cloudinary-react<\/a> package, which allows us to utilize Cloudinary assets in our Next.js application.<\/p>\n
We proceed to install the following dependencies using the command below:<\/p>\n
    npm install cloudinary-react react-icons\n<\/code><\/span><\/pre>\n
React-icons<\/a> is an icon library for React applications.<\/p>\n
TailwindCSS classes are used in styling the React components in this project. You can find how to install Tailwind in a Next.js project here<\/a>.<\/p>\n
Product Customization Components<\/h2>\n
The product customizer has the following parts:<\/p>\n
    \n
  1. A color selector with a custom color picker<\/li>\n
  2. A texture selector from two provided textures<\/li>\n
  3. A logo selector<\/li>\n
  4. A text input to add free text.<\/li>\n
  5. A rendered image of the product that updates with each modification.<\/li>\n<\/ol>\n
    We\u2019ll proceed to implement each component.<\/p>\n
    Creating the Color Selector<\/h2>\n
    We create a new directory called components<\/code>, which will contain our color schemes, elements and layout for our application.\nIn the components<\/code> folder,  we create new folder called Colors<\/code> and in it, we create a new file named ColorDropPicker.jsx<\/code> that will house the custom color picker<\/a> of our product customizer. Next, we import all required dependencies in the file.<\/p>\n
        \/\/ components\/Colors\/ColorDropPicker.jsx<\/span>\n    import<\/span> { FaCaretDown } from<\/span> 'react-icons\/fa'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
        const<\/span> ColorDropPicker = ({ onChange }<\/span>) =><\/span> {\n        return<\/span> (\n            <span<\/span> className<\/span>={<\/span>`flex<\/span> flex-row<\/span> justify-between<\/span> items-center<\/span> border<\/span> border-gray-500<\/span> bg-gray-200<\/span>`} style<\/span>={{<\/span> width:<\/span> 52<\/span>, padding:<\/span> `10px<\/span> auto<\/span>` }}><\/span>\n                <input<\/span>\n                    type<\/span>={<\/span>`color<\/span>`}\n                    style<\/span>={{<\/span> width:<\/span> 32<\/span>, height:<\/span> 32<\/span> }}\n                    className<\/span>={<\/span>`outline-none<\/span> cursor-pointer<\/span>`}\n                    onChange<\/span>={<\/span> e<\/span> =><\/span> onChange(e.currentTarget.value.slice(1)) }\n                    \/\/ slice to remove the '#' at the beginning of the hex color code\n                \/>\n                <FaCaretDown<\/span> size<\/span>={12}<\/span> \/><\/span>\n            <\/span<\/span>><\/span><\/span>\n        );\n    };\n    export<\/span> default<\/span> ColorDropPicker;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Finally, we set a size of 12 to faCaretDown<\/code>.<\/p>\n
    In the Colors directory, we proceed to create a new file called ColorPickerSquare.jsx<\/code>. This component will display a square containing the color selected using the color picker.<\/p>\n
        const<\/span> ColorPickerSquare = ({ color, onSelect, className, isFluid, isFocused, onClick }<\/span>) =><\/span> {\n        const<\/span> squareImage = `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30\/e_replace_color:${color}<\/span>:60:white\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg`<\/span>;\n        return<\/span> (\n            <div<\/span>\n                className<\/span>={<\/span>`${isFocused<\/span> && 'border-2<\/span> border-gray-500<\/span>'} transition<\/span> duration-300<\/span> cursor-pointer<\/span> ${className<\/span>} ${color<\/span> == 'white'<\/span> || color<\/span> == 'ffffff'<\/span> ? 'border<\/span> border-gray-500<\/span>' :<\/span> null<\/span>}`} \n                style<\/span>={{<\/span> \n                    backgroundColor:<\/span> color<\/span> ?? 'transparent<\/span>', width:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`, height:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`,\n                    backgroundImage:<\/span> `url<\/span>('${squareImage<\/span>}')`, backgroundRepeat:<\/span> `no-repeat<\/span>`, backgroundPosition:<\/span> `center<\/span>`,\n                    minWidth:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[0<\/span>], minHeight:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[1<\/span>]\n                }}\n                onClick<\/span>={<\/span> e<\/span> =><\/span> {\n                    onSelect ? onSelect(e) : null;\n                    onClick ? onClick(e): null;\n                }}\n            >\n                &nbsp;<\/span>\n            <\/div<\/span>><\/span><\/span>\n        );\n    };\n    \n    export<\/span> default<\/span> ColorPickerSquare;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    To the square component, we added styles for background color, image, minimum height and width. The functions passed to the component via the onClick<\/code> and onSelect<\/code> props are also propagated to the component\u2019s onClick<\/code> handler.<\/p>\n
    Next, in the Colors directory, we create a new file called ColorPickerArray.jsx<\/code>. This component will contain an array of data for specific product colors, CSS classes for each color, and an array of width and height for each color.<\/p>\n
        \/\/ components\/Colors\/ColorPickerArray.jsx<\/span>\n    import<\/span> { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { ColorPickerSquare } from<\/span> \".\"<\/span>;\n    \n    const<\/span> ColorPickerArray = ({ colorsArray, elementClassName, isFluid, onSelect }<\/span>) =><\/span> {\n        \/\/ SET INDEX OBJECT TO AUTO-FOCUSED<\/span>\n        const<\/span> [focusedSquare, setFocusedSquare] = useState(0<\/span>);\n        return<\/span> (\n            <div<\/span> className<\/span>={<\/span>`flex<\/span> flex-row<\/span>`}><\/span>\n                { \n                    colorsArray.map((color, index) => (\n                        <ColorPickerSquare<\/span>\n                            isFocused<\/span>={<\/span> index<\/span> === focusedSquare<\/span> }\n                            onClick<\/span>={<\/span> e<\/span> =><\/span> setFocusedSquare(index) }\n                            color={color}\n                            onSelect={e => onSelect ? onSelect(e, index) : null}\n                            className={elementClassName}\n                            isFluid={isFluid}\n                        \/>\n                    )) \n                }\n            <\/div<\/span>><\/span><\/span>\n        );\n    };\n    \n    export<\/span> default<\/span> ColorPickerArray;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the file above, we initialized a function component called ColorPickerArray<\/code> which takes in colorsArray<\/code>, elementClassName<\/code>, isFluid<\/code> and onSelect<\/code> as props.<\/p>\n
    Creating a Font Picker Component<\/h2>\n
    We require custom text in a select number of fonts which we will specify. We create a new component in components\/FontPicker\/index.js<\/code> with:<\/p>\n
        export<\/span> const<\/span> FontPicker = ({ fonts, className, onChange, value }<\/span>) =><\/span> {\n      const<\/span> renderOptionElements = ()<\/span> =><\/span>\n        fonts.map((font<\/span>) =><\/span> (\n          <option<\/span>\n            key<\/span>={font.id}<\/span>\n            value<\/span>={font.value}<\/span>\n            selected<\/span>={font.selected}<\/span>\n            hidden<\/span>={font.hidden}<\/span>\n          ><\/span>\n            {font.title}\n          <\/option<\/span>><\/span><\/span>\n        ));\n      return<\/span> (\n        <select<\/span>\n          key<\/span>={className.id}<\/span>\n          className<\/span>={className}<\/span>\n          onChange<\/span>={(e)<\/span> =><\/span> (onChange ? onChange(e) : null)}\n          value={value}\n        >\n          {renderOptionElements()}\n        <\/select<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Building an Overlay Picker Component<\/h2>\n
    We require logo overlays on the product. These logos can be selected from a list of rendered square logos. We will create an overlay selector which renders a provided logo enclosed in a square. In a new component components\/Overlays\/OverlayPicker.jsx<\/code>, we create a component which renders the overlay selector.<\/p>\n
        export<\/span> const<\/span> OverlayPickerSquare = ({\n      onSelect,\n      className,\n      isFluid,\n      isFocused,\n      onClick,\n      image\n    }) => {\n      return<\/span> (\n        <div<\/span>\n          className<\/span>={<\/span>`${\n            isFocused<\/span> && \"border-2<\/span> border-gray-500<\/span>\"\n          } transition<\/span> duration-300<\/span> cursor-pointer<\/span> ${className<\/span>}`}\n          style<\/span>={{<\/span>\n            width:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`,\n            height:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`,\n            backgroundImage:<\/span> `url<\/span>('${image<\/span>}')`,\n            backgroundRepeat:<\/span> `no-repeat<\/span>`,\n            backgroundPosition:<\/span> `center<\/span>`,\n            minWidth:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[0<\/span>],\n            minHeight:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[1<\/span>]\n          }}\n          onClick<\/span>={(e)<\/span> =><\/span> {\n            onSelect ? onSelect(e) : null;\n            onClick ? onClick(e) : null;\n          }}\n        >\n          &nbsp;<\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code snippet above, we created and exported an Over``lay``PickerSquare<\/code> component having props of onSelect<\/code>, className<\/code>, isFluid<\/code>, isFocused<\/code>, onClick<\/code>, and image<\/code>. We added custom style properties to the component and triggered the onSelect<\/code> and onClick<\/code> functions if passed, to the component when it\u2019s clicked.<\/p>\n
    To complete the overlay picker, we\u2019ll create a parent component that renders multiple overlay squares once we pass an array of image logos to it. We do this in a new component components\/Overlays\/OverlayPickerArray.jsx<\/code> with:<\/p>\n
        import<\/span> { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { OverlayPickerSquare } from<\/span> \".\/OverlayPicker\"<\/span>;\n    export<\/span> const<\/span> OverlayPickerArray = ({\n      overlaysArray,\n      elementClassName,\n      isFluid,\n      onSelect\n    }) => {\n      \/\/ SET INDEX OBJECT TO AUTO-FOCUSED<\/span>\n      const<\/span> [focusedSquare, setFocusedSquare] = useState(0<\/span>);\n      return<\/span> (\n        <div<\/span> className<\/span>={<\/span>`flex<\/span> flex-row<\/span>`}><\/span>\n          {overlaysArray.map((overlay, index) => (\n            <OverlayPickerSquare<\/span>\n              isFocused<\/span>={index<\/span> === focusedSquare}<\/span>\n              onClick<\/span>={(e)<\/span> =><\/span> setFocusedSquare(index)}\n              onSelect={(e) => (onSelect ? onSelect(e, overlay.overlay) : null)}\n              className={elementClassName}\n              isFluid={isFluid}\n              image={overlay.image}\n            \/>\n          ))}\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code snippet above, we created the OverlayPickerArray<\/code> component which takes props of provided logos with overlaysArray<\/code>, loops through each overlay and renders the imported OverlayPickerSquare<\/code> component for each logo.<\/p>\n
    The index of the currently selected square is stored in a focusedSquare<\/code> state variable for use in the isFocused<\/code> prop value of OverlayPickerSquare<\/code>.<\/p>\n
    Creating a Texture Picker Component<\/h2>\n
    Furthermore, we require a texture picker. This is similar to the overlay picker. We create similar components of TexturePickerSquare<\/code> and TexturePickerArray<\/code> in components\/Textures<\/code> to create squares of product texture selectors and render an array of provided textures.<\/p>\n
    In components\/Textures\/TexturePickerSquare.jsx<\/code> we have:<\/p>\n
        export<\/span> const<\/span> TexturePickerSquare = ({\n      onSelect,\n      className,\n      isFluid,\n      isFocused,\n      onClick,\n      image\n    }) => {\n      return<\/span> (\n        <div<\/span>\n          className<\/span>={<\/span>`${\n            isFocused<\/span> && \"border-2<\/span> border-gray-500<\/span>\"\n          } transition<\/span> duration-300<\/span> cursor-pointer<\/span> ${className<\/span>}`}\n          style<\/span>={{<\/span>\n            width:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`,\n            height:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> `auto<\/span>`,\n            backgroundImage:<\/span> `url<\/span>('${image<\/span>}')`,\n            backgroundRepeat:<\/span> `no-repeat<\/span>`,\n            backgroundPosition:<\/span> `center<\/span>`,\n            minWidth:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[0<\/span>],\n            minHeight:<\/span> !isFluid<\/span> ? 32<\/span> :<\/span> isFluid<\/span>[1<\/span>]\n          }}\n          onClick<\/span>={(e)<\/span> =><\/span> {\n            onSelect ? onSelect(e) : null;\n            onClick ? onClick(e) : null;\n          }}\n        >\n          &nbsp;<\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    And in component\/Textures\/TexturePickerArray.jsx<\/code> we have:<\/p>\n\n
    \n
    Comment: [William] No, the current naming is correct<\/p>\n<\/blockquote>\n
        import<\/span> { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { TexturePickerSquare } from<\/span> \".\/TexturePicker\"<\/span>;\n    export<\/span> const<\/span> TexturePickerArray = ({\n      texturesArray,\n      elementClassName,\n      isFluid,\n      onSelect\n    }) => {\n      \/\/ SET INDEX OBJECT TO AUTO-FOCUSED<\/span>\n      const<\/span> [focusedSquare, setFocusedSquare] = useState(0<\/span>);\n      return<\/span> (\n        <div<\/span> className<\/span>={<\/span>`flex<\/span> flex-row<\/span>`}><\/span>\n          {texturesArray.map((texture, index) => (\n            <TexturePickerSquare<\/span>\n              key<\/span>={texture.id}<\/span>\n              isFocused<\/span>={index<\/span> === focusedSquare}<\/span>\n              onClick<\/span>={(e)<\/span> =><\/span> setFocusedSquare(index)}\n              onSelect={(e) => (onSelect ? onSelect(e, texture.texture) : null)}\n              className={elementClassName}\n              isFluid={isFluid}\n              image={texture.image}\n            \/>\n          ))}\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Building the Product Image component<\/h2>\n
    In this component, we\u2019ll create an image viewer, which will act as a wrapper for our image. To do this, inside the components<\/code> directory we create a new folder called ImageViewer<\/code> and in it, create an index.j``sx<\/code> file with the following content:<\/p>\n
        import<\/span> {CloudinaryContext, Transformation, Image} from<\/span> 'cloudinary-react'<\/span>;\n    \n    const<\/span> ProductImage = ({ alt, displacement, productColor, overlay, texture, text, font}<\/span>) =><\/span> {\n        \n        return<\/span> (\n            <CloudinaryContext<\/span> cloudName<\/span>=\"demo-robert\"<\/span>><\/span>\n                <Image<\/span> publicId<\/span>=\"Hanging_T-Shirt_v83je9\"<\/span> width<\/span>=\"650\"<\/span> secure<\/span>=\"true\"<\/span>><\/span>\n                    <Transformation<\/span> width<\/span>=\"300\"<\/span> fetchFormat<\/span>=\"auto\"<\/span> \/><\/span>\n                    <Transformation<\/span> overlay<\/span>={texture}<\/span> quality<\/span>=\"auto\"<\/span> fetchFormat<\/span>=\"auto\"<\/span> \/><\/span>\n                    <Transformation<\/span> overlay<\/span>={overlay}<\/span> quality<\/span>=\"auto\"<\/span> fetchFormat<\/span>=\"auto\"<\/span> width<\/span>=\"110\"<\/span> \/><\/span>\n                    <Transformation<\/span> overlay<\/span>={{fontFamily:<\/span> font<\/span>, fontSize:<\/span> 33<\/span>, fontWeight:<\/span> \"bold<\/span>\", text:<\/span> text<\/span>}} gravity<\/span>=\"center\"<\/span> y<\/span>={<\/span> overlay<\/span> === ''<\/span> ? 40<\/span> :<\/span> 130<\/span> }  color<\/span>={<\/span>`#666<\/span>`} \/><\/span>\n                    <Transformation<\/span> rawTransformation<\/span>={<\/span>`e_replace_color:<\/span>${productColor<\/span>}`} \/><\/span>\n                <\/Image<\/span>><\/span>\n            <\/CloudinaryContext<\/span>><\/span><\/span>\n        );\n    };\n    \n    export<\/span> default<\/span> ProductImage;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code above, we wrapped our ProductImage<\/code> component in CloudinaryContext<\/code>. Cloudinary context specifies the cloud_name<\/code>, with which we fetch media assets from Cloudinary. All data passed to CloudinaryContext<\/code> as props are provided to its children Cloudinary components.<\/p>\n
    \n
    To obtain our cloud_name<\/code>, we need to create an account on Cloudinary<\/a> and get the cloud name value from our Cloudinary dashboard.<\/p>\n<\/blockquote>\n
    At the crust of this application is Cloudinary\u2019s robust transformation capabilities.\nWe rendered an image from Cloudinary using the Image<\/code> component, and applied Cloudinary transformations to it using the Transformation<\/code> component. We specified transformations for texture, an overlain text, general overlays and color.<\/p>\n
    Building app Navigation Bar<\/h2>\n
    To create our project\u2019s navbar, we create a new folder called base<\/code> inside our component directory, and inside it we create a new file Navbar.jsx<\/code>. We create a Navbar<\/code> component with the following:<\/p>\n
        import<\/span> Link from<\/span> \"next\/link\"<\/span>;\n    export<\/span> const<\/span> Navbar = ({ className }<\/span>) =><\/span> {\n      return<\/span> (\n        <nav<\/span>><\/span>\n          <div<\/span>\n            className<\/span>={<\/span>`flex<\/span> flex-row<\/span> justify-start<\/span> items-end<\/span> font-lighter<\/span> pb-3<\/span> pt-2<\/span> ${className<\/span>}`}\n          ><\/span>\n            <div<\/span>><\/span>\n              <Link<\/span> href<\/span>=\"\/\"<\/span>><\/span>\n                <img<\/span>\n                  src<\/span>=\"https:\/\/res-1.cloudinary.com\/cloudinary\/image\/asset\/dpr_2.0\/logo-e0df892053afd966cc0bfe047ba93ca4.png\"<\/span>\n                  width<\/span>={172}<\/span>\n                  height<\/span>={38}<\/span>\n                  alt<\/span>=\"logo\"<\/span>\n                \/><\/span>\n              <\/Link<\/span>><\/span>\n            <\/div<\/span>><\/span>\n            <h1<\/span>\n              className<\/span>=\"capitalize text-blue-deep relative top-2 ml-3\"<\/span>\n              style<\/span>={{<\/span> fontSize:<\/span> 26<\/span> }}\n            ><\/span>\n              Product personalization demo\n            <\/h1<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/nav<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code above, we added a logo with a home<\/code> route path. Next, we added a title to the navbar using a h1<\/code> tag.<\/p>\n
    Creating a Page Component<\/h2>\n
    We created a wrapper component for the page which contains the navigation bar and houses all other child elements. In the components<\/code> directory, we created a file with the path layout\/page.jsx<\/code> and the following content:<\/p>\n
        import<\/span> Head from<\/span> \"next\/head\"<\/span>;\n    import<\/span> { Navbar } from<\/span> \"..\/Base\/Navbar\"<\/span>;\n    \n    export<\/span> const<\/span> Page = ({ children }<\/span>) =><\/span> {\n      return<\/span> (\n        <div<\/span> className<\/span>=\"min-h-screen relative h-screen max-w-full\"<\/span>><\/span>\n          <Head<\/span>><\/span>\n            <meta<\/span> name<\/span>=\"author\"<\/span> content<\/span>=\"Fortune Ikechi\"<\/span> \/><\/span>\n            <meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>=\"Cloudinary Product Personalization\"<\/span> \/><\/span>\n            <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"initial-scale=1.0, width=device-width\"<\/span> \/><\/span>\n            <title<\/span>><\/span>Product Personalization Demo<\/title<\/span>><\/span>\n          <\/Head<\/span>><\/span>\n          <div<\/span> className<\/span>={<\/span>`flex<\/span> flex-col<\/span> items-center<\/span> min-h-screen<\/span> w-full<\/span>`}><\/span>\n            <div<\/span> className<\/span>={<\/span>`w-full<\/span> pl-44<\/span>`}><\/span>\n              <Navbar<\/span> className<\/span>={<\/span>`w-8<\/span>\/12<\/span> ml-20<\/span>`} \/><\/span>\n            <\/div<\/span>><\/span>\n            {children}\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the code above, we imported our Navbar<\/code> component from the B``ase<\/code> directory. Next, we created a Page<\/code> component that will take in a children<\/code> prop. In the component\u2019s head<\/code> element, we added the author and page information in meta<\/code> tags before rendering a child element or component.<\/p>\n
    Creating a Text Input<\/h2>\n
    Part of the product customization requires we add text content on the product. To do this, in the Base<\/code> directory, we create a new file TextInput.jsx<\/code> with the following content:<\/p>\n
        export<\/span> const<\/span> DefaultTextInput = ({ className, onChange, placeholder }<\/span>) =><\/span> {\n      return<\/span> (\n        <input<\/span>\n          type<\/span>=\"text\"<\/span>\n          className<\/span>={<\/span>`${className<\/span>} default-styled-input<\/span>`}\n          onChange<\/span>={(e)<\/span> =><\/span> (onChange ? onChange(e) : null)}\n          placeholder={placeholder || \"\"}\n        \/><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Here, we created a component DefaultTextInput<\/code> with an input element that takes a text<\/code> type and an onChange<\/code> function for updating the input text, we also added a placeholder text.<\/p>\n
    Creating a Default Button<\/h2>\n
    Similar to a default text input, we will create a default button component with an onClick<\/code> function and a title tag for the button. In the Base<\/code> folder, create a new file DefaultButton.jsx<\/code> with the content:<\/p>\n
        export<\/span> const<\/span> DefaultButton = ({ title, onClick }<\/span>) =><\/span> {\n        return<\/span> (\n            <button<\/span>\n                className<\/span>={<\/span>`bg-orange<\/span> rounded-sm<\/span> px-5<\/span> py-1<\/span> text-white<\/span> flex<\/span> flex-row<\/span> items-center<\/span> justify-center<\/span> outline-none<\/span> focus:ring-2<\/span> focus:ring-yellow-300<\/span>`}\n              onClick<\/span>={(e)<\/span> =><\/span> (onClick ? onClick(e) : null)}\n        >\n          {title}\n        <\/button<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Creating a Product Customization Component<\/h2>\n
    In this section, we\u2019ll put together all the different parts of our application. To do this, we navigate to the pages\/i``ndex.js<\/code> file and add all the features needed by the user to customize a product.<\/p>\n
        import<\/span> { useState, useEffect } from<\/span> 'react'<\/span>;\n    import<\/span> { ProductImage } from<\/span> \"..\/components\/ImageViewer\"<\/span>;\n    import<\/span> { Page } from<\/span> \"..\/components\/layout\/Page\"<\/span>;\n    import<\/span> { ColorDropPicker } from<\/span> \"..\/components\/Colors\/ColorDropPicker\"<\/span>;\n    import<\/span> { ColorPickerArray } from<\/span> \"..\/components\/Colors\/ColorPickerArray\"<\/span>;\n    import<\/span> { FontPicker } from<\/span> \"..\/components\/FontPicker\"<\/span>;\n    import<\/span> { DefaultTextInput } from<\/span> \"..\/components\/Base\/TextInput\"<\/span>;\n    import<\/span> { DefaultButton } from<\/span> \"..\/components\/Base\/DefaultButton\"<\/span>;\n    import<\/span> { OverlayPickerArray } from<\/span> \"..\/components\/Overlays\/OverlayPickerArray\"<\/span>;\n    import<\/span> { TexturePickerArray } from<\/span> \"..\/components\/Textures\/TexturePickerArray\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n        \/\/ COLORS<\/span>\n        const<\/span> availableColors = [`ffffff`<\/span>, `47E8D2`<\/span>, `DCA381`<\/span>, `702C3C`<\/span>, `E9C660`<\/span>, `A11D1F`<\/span>, `897115`<\/span>, `598DE6`<\/span>];\n        \n        \/\/OVERLAYS<\/span>\n        const<\/span> overlayOptionsArray = [\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30,e_red:0\/e_green:0\/e_blue:0\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg`<\/span>, overlay<\/span>: ``<\/span> },\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/q_auto,f_auto,h_30\/cloudinary-logo.jpg`<\/span>, overlay<\/span>: `cloudinary-logo`<\/span> },\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/q_auto,f_auto,h_30\/fire.png`<\/span>, overlay<\/span>: `fire`<\/span> }\n        ];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Here, we created data for customizable colors and the overlain logo.<\/p>\n
    Next, we add default data for textures, and fonts.<\/p>\n
        \/\/ TEXTURES<\/span>\n        const<\/span> textureOptionsArray = [\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30,e_red:0\/e_green:0\/e_blue:0\/l_heather_texture,o_0,w_30,h_30,c_crop\/white-bar.jpg`<\/span>, texture<\/span>: ``<\/span> },\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/image\/upload\/w_30,h_30,e_red:0\/e_green:0\/e_blue:0\/l_heather_texture,o_30,w_30,h_30,c_crop\/white-bar.jpg`<\/span>, texture<\/span>: `hanging-shirt-texture`<\/span> },\n        ];\n    \n        \/\/ PERSONALIZATION TEXT FONTS<\/span>\n        const<\/span> availableFonts = [\n            { title<\/span>: `Arial`<\/span>, value<\/span>: `Arial`<\/span>, selected<\/span>: true<\/span> },\n            { title<\/span>: `Georgia`<\/span>, value<\/span>: `Georgia`<\/span> },\n            { title<\/span>: `Sacremento`<\/span>, value<\/span>: `Sacramento`<\/span> },\n            { title<\/span>: `Roboto`<\/span>, value<\/span>: `Roboto`<\/span> },\n            { title<\/span>: `Montserrat`<\/span>, value<\/span>: `Montserrat`<\/span> },\n            { title<\/span>: `Bitter`<\/span>, value<\/span>: `Bitter`<\/span> }\n        ];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Next, we add data on perspectives and displacements for a user\u2019s product:<\/p>\n
        \/\/ PERSPECTIVES<\/span>\n        const<\/span> imagePerspectives = [\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/q_auto,f_auto\/$text_!%20!\/o_0\/l_sample,o_0,w_220,ar_30:25,c_fit,y_-40,x_-5,e_overlay\/l_text:arial_100_bold:$(text),y_90,co_rgb:333,o_70,w_250\/l_hanging_displace,e_displace,x_10,y_10\/u_Hanging_T-Shirt_v83je9,e_replace_color:white:60:white\/l_hanging-shirt-texture,o_0\/l_Hanger_qa2diz,fl_relative,w_1.0\/w_75,ar_1:1,c_pad\/shirt_only.jpg`<\/span> },\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/q_auto,f_auto\/$text_!%20!\/o_0\/l_sample,o_0,w_330,ar_30:25,c_fit,y_-30,x_-5,e_overlay\/l_text:arial_100_bold:$(text),y_150,co_rgb:333,o_70,w_350\/l_laying_displace,e_displace,x_10,y_10\/u_laying-shirt_xqstgr,e_replace_color:white:60:white\/l_laying-shirt-texture,o_0\/w_75,ar_1:1,c_pad\/shirt_only.jpg`<\/span> },\n            { image<\/span>: `https:\/\/res.cloudinary.com\/demo-robert\/q_auto,f_auto\/$text_!%20!\/o_0\/l_sample,o_0,w_300,ar_30:25,c_fit,y_-200,x_-5,e_overlay\/l_text:arial_100_bold:$(text),y_-40,co_rgb:333,o_70,w_300\/l_shirt_displace,e_displace,x_10,y_10\/u_shirt_only,e_replace_color:white:60:white\/l_heather_texture,o_0\/u_model2\/w_75,ar_1:1,c_pad\/shirt_only.jpg`<\/span> },\n        ];\n        \/\/ DISPLACEMENTS<\/span>\n        const<\/span> availableImageDisplacements = [\n           `hanging_displace`<\/span>, `laying_displace`<\/span>, `shirt_displace`<\/span>\n        ];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    To complete our customization component, we will add functions enabling users to add or update the color, texture, text, images, and logos on products.<\/p>\n
        \/\/ PRODUCT IMAGE<\/span>\n        const<\/span> [productColor, setProductColor] = useState(availableColors[0<\/span>]);\n        const<\/span> [productOverlay, setProductOverlay] = useState(''<\/span>);\n        const<\/span> [productTexture, setProductTexture] = useState(''<\/span>);\n        const<\/span> [productText, setProductText] = useState(' '<\/span>); \/\/ space important here, or image will not be displayed<\/span>\n        const<\/span> [tempText, setTempText] = useState(''<\/span>);\n        const<\/span> [productFont, setProductFont] = useState(availableFonts[0<\/span>].value);\n        const<\/span> [productDisplacement, setProductDisplacement] = useState(availableImageDisplacements[1<\/span>]);\n    \n        \/\/ CHANGE TEXT ON TEXT OVERLAY<\/span>\n        const<\/span> changeProductText = e<\/span> =><\/span> {\n            tempText == ''<\/span> ? setProductText(' '<\/span>) : setProductText(tempText);\n        };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    We created state variables with their update methods for each transformation type. We also created a function to update or add a text on a product.\nNext, we will update the rendered JSX with the components, state variables and update methods as in this final GitHub Gist.<\/p>\n
    https:\/\/gist.github.com\/Chuloo\/cc50dcb4db88e695f9d7025dfd42b818<\/a><\/p>\n
    https:\/\/gist.github.com\/Chuloo\/cc50dcb4db88e695f9d7025dfd42b818<\/a><\/p>\n
    Our final application should look like this:<\/p>\n
    \"Product<\/p>\n
    Summary<\/h2>\n
    In this post, we created a product variant customization component using Next.js and Cloudinary. Customization features include color, text, texture, and logo. Furthermore, we can improve the application by utilizing other image transformation properties.<\/p>\n
    Resources<\/h2>\n
    You can check out the following valuable resources.<\/p>\n
    In the created FontPicker<\/code> component, we defined props of fonts<\/code>, className<\/code>, onChange<\/code>, and value<\/code>. Using the native Javascript map<\/a> object, we iterate over the list of fonts and display the font title. The list of font options are rendered in a select<\/code> element and selecting a font option triggers the function passed in the onChange<\/code> props.<\/p>\n
    We created a state variable using the useState<\/code> hook to store the index of any selected color. Using the native JavaScript map<\/a> method, we loop through the provided colors and render a ColorPickerSquare<\/code> component for each.<\/p>\n
    In the code above, we added a square image<\/a> from Cloudinary which accepts a variable color transformation. This color will be updated based on the user selected product color. We added variable tailwind classes to the component to handle transitions and border styling.<\/p>\n
    We created a component ColorDropPicker<\/code> which takes in an onChange<\/code> prop. The component returned an input for a user to input colors that will apply to the product. We defined some default color schemes, to update a product\u2019s color scheme with one chosen by a user. We used the native JavaScript Slice<\/a> to remove the #<\/code> in the array containing our default color code.<\/p>\n
    FaCaretDown<\/code> is a caret icon component from react-icons<\/a>. With it, users can toggle to display a list of colors to choose from.<\/p>\n