{"id":28506,"date":"2022-08-17T07:38:10","date_gmt":"2022-08-17T07:38:10","guid":{"rendered":"http:\/\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs"},"modified":"2024-02-01T09:47:06","modified_gmt":"2024-02-01T17:47:06","slug":"deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/","title":{"rendered":"Composable Images with Cloudinary and BigCommerce"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>The Jamstack architecture has revolutionized how E-commerce platforms are built. It leverages technologies like <a href=\"https:\/\/www.netlify.com\/blog\/2016\/11\/22\/prerendering-explained\/\">Pre-rendering<\/a>, Markups (HTML), and <a href=\"https:\/\/jamstack.org\/glossary\/api-economy\/\">API economy<\/a> to build platforms that are fast, secure, and easier to scale.<\/p>\n<p>As the popular saying goes, \u201cWith great power comes great responsibility\u201d. Jamstack offers a variety of APIs to build different features of an E-commerce platform, and developers are burdened with constant context switching when using and managing the provided APIs.<\/p>\n<p>In this post, we will learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.<\/p>\n<h2>Technology Overview<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> is a visual media service we use to upload, store, manage, transform, and deliver images and videos for websites and applications.<\/p>\n<p><a href=\"https:\/\/www.bigcommerce.com\/\">BigCommerce<\/a> is a software as a service company offering retailers and developers a platform to build e-commerce applications.<\/p>\n<p><a href=\"https:\/\/uniform.dev\/\">Uniform<\/a> is a digital experience platform that supports the composition, delivery, and management of building blocks required to build an application. It allows developers to seamlessly adapt and manage Jamstack technologies like headless content management systems, commerce APIs, and CDNs and deliver it as a single source of truth instead of making multiple requests.<\/p>\n<h2>Github<\/h2>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><p>The source code is on <a href=\"https:\/\/github.com\/Mr-Malomz\/commerce-img\/tree\/dev\">Github<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To fully grasp the concepts presented in this tutorial, the following requirements apply:<\/p>\n<ul>\n<li>Basic understanding of JavaScript and React<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> account (Create an account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">here<\/a>)<\/li>\n<li>\n<a href=\"https:\/\/www.bigcommerce.com\/\">BigCommerce<\/a> account. <strong>BigCommerce offers a<\/strong> <a href=\"https:\/\/www.bigcommerce.com\/start-your-trial\/\"><strong>15-day<\/strong><\/a> <strong>trial we can leverage<\/strong>\n<\/li>\n<li>\n<a href=\"https:\/\/uniform.dev\/\">Uniform<\/a> account (Create an account <a href=\"https:\/\/uniform.app\/?signup=true\">here<\/a>)<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>In this post, we will focus on implementations only. The project UI has already been set up.<\/p>\n<p>To get started, we need to clone the project by navigating to the desired directory and running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    git <span class=\"hljs-keyword\">clone<\/span> https:<span class=\"hljs-comment\">\/\/github.com\/Mr-Malomz\/commerce-img.git &amp;&amp; cd commerce-img<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Running the Project<\/h2>\n<p>First, we need to install the project dependencies by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm i \n<\/code><\/span><\/pre>\n<p>Then run the project using the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm run dev\n<\/code><\/span><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658139925006_screencapture-localhost-3000-2022-07-18-11_24_54.png\" alt=\"Running App with Sample Data\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1419\" height=\"1076\"\/><\/p>\n<h2>Image Sourcing and Upload to Cloudinary<\/h2>\n<p>With our application up and running, we need to upload sample images for our e-commerce products.<\/p>\n<p>Sample Images<\/p>\n<ul>\n<li>\n<strong>hero<\/strong> &#8211; <a href=\"https:\/\/bit.ly\/3SzKUAK\">https:\/\/bit.ly\/3SzKUAK<\/a>\n<\/li>\n<li>\n<strong>1<\/strong> &#8211; <a href=\"https:\/\/bit.ly\/3SJ4Y3S\">https:\/\/bit.ly\/3SJ4Y3S<\/a>\n<\/li>\n<li>\n<strong>2<\/strong> &#8211; <a href=\"https:\/\/bit.ly\/3Qf1gxi\">https:\/\/bit.ly\/3Qf1gxi<\/a>\n<\/li>\n<li>\n<strong>3<\/strong> &#8211; <a href=\"https:\/\/bit.ly\/3P9Jjic\">https:\/\/bit.ly\/3P9Jjic<\/a>\n<\/li>\n<\/ul>\n<p>In our Cloudinary dashboard, we uploaded the image by clicking on the <strong>Media Library<\/strong> tab, clicking on <strong>Upload<\/strong>, selecting the <strong>Web Address<\/strong> option, inputting the <strong>URL<\/strong>, and finally clicking on the <strong>Arrow Button<\/strong> to upload.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_09154C99BD025007588E7E863D13AB13FE936D0B55FA69EF06F32C362371F6D6_1635104341304_Screenshot+2021-10-24+at+20.37.46.png\" alt=\"Cloudinary Console and Upload Dutton for Other Formats of Upload\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"275\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_83F3FBD7ECC4D58C256BC95B11E26148AE441C8ED8A1FF0E7E7D0A2229B1C1FD_1642503859751_Screenshot+2022-01-16+at+22.15.17.png\" alt=\"Select Web Address and Enter URL\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"958\"\/><\/p>\n<p>After uploading the images, we will see them displayed on the console.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658143284954_Screenshot+2022-07-16+at+18.30.47.png\" alt=\"Uploaded Images\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1419\" height=\"682\"\/><\/p>\n<h2>Configuring BigCommerce<\/h2>\n<p><strong>Product data upload to BigCommerce<\/strong>\nNext, we need to upload sample data for our e-commerce products.<\/p>\n<figure class=\"table-wrapper\"><table>\n<thead>\n<tr>\n<th>Product Name<\/th>\n<th>Default Price<\/th>\n<th>Weight<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Hero<\/td>\n<td>500<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Pattern 1 active store<\/td>\n<td>450<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Pattern 2 active store<\/td>\n<td>270<\/td>\n<td>2<\/td>\n<\/tr>\n<tr>\n<td>Pattern 3 active store<\/td>\n<td>270<\/td>\n<td>2<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n<p>On the homepage, navigate to the <strong>Products<\/strong> menu and click on <strong>Add<\/strong>; input the <code>Product Name<\/code>, <code>Default Price<\/code>, and <code>Weight<\/code>, then <strong>Save<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658144822355_Screenshot+2022-07-18+at+12.38.24.png\" alt=\"Select Product\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658144822364_Screenshot+2022-07-18+at+12.41.27.png\" alt=\"Add Product and Save\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/><\/p>\n<p><strong>Create<\/strong> <strong>an<\/strong> <strong>API<\/strong> <strong>A****ccount<\/strong>\nNext, we need to create an API account that exposes our products to 3rd party applications. To do this, navigate back to the main menu by clicking on the <strong>Product<\/strong> menu, navigate to the <strong>Settings<\/strong> menu, scroll to the API section and click on  <strong>API accounts<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658146041048_Screenshot+2022-07-18+at+12.41.27.png\" alt=\"Navigate to the Main Menu\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658146041032_Screenshot+2022-07-17+at+00.02.10.png\" alt=\"Click on API Account\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"961\"\/><\/p>\n<p>Click on the Create API account button, input <code>pattern_store<\/code> as the name, scroll down to the Product section, and select <strong>read-only<\/strong>. The permission selected will give 3rd party applications read-only access to our products.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658146523478_Screenshot+2022-07-18+at+13.15.06.png\" alt=\"Input Name\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658146618564_Screenshot+2022-07-18+at+13.15.44.png\" alt=\"Give Permission\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/><\/p>\n<p>Before we save the settings, we need to create a <code>.env<\/code> file in the root directory of our application and add the snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">NEXT_PUBLIC_BIGCOMMERCE_STORE_HASH=<span class=\"hljs-regexp\">\/YOUR STORE HASH HERE\/<\/span>\nNEXT_PUBLIC_BIGCOMMERCE_TOKEN=<span class=\"hljs-regexp\">\/YOUR ACCESS TOKEN HERE\/<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>By scrolling up to the API path and copying the characters after  <code>\/stores\/<\/code> and before the <code>\/v3\/<\/code> , we can get our Store Hash.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658147096871_Screenshot+2022-07-17+at+00.04.27.png\" alt=\"Store Hash\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"961\"\/><\/p>\n<p>Finally, we can click on the <strong>Save<\/strong> button. The application will reveal and download our <strong>Access Token<\/strong> and other credentials on save. We can copy the <strong>Access Token<\/strong> and update the <code>.env<\/code> file.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658147334094_Screenshot+2022-07-17+at+00.07.03.png\" alt=\"Access Token\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"961\"\/><\/p>\n<h2>Putting it all Together on Uniform<\/h2>\n<p>With our images and product data uploaded, we need to unify them and create a seamless digital experience using Uniform. To do this, we must <a href=\"https:\/\/uniform.app\/?signup=true\">sign up<\/a> and fill in the required information.<\/p>\n<p>Next, input <code>commerce_image<\/code> as the project name and click <strong>Continue<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1660257136355_Screenshot+2022-08-11+at+23.26.13.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1427\" height=\"675\"\/><\/p>\n<p>Next, navigate to the <strong>Security<\/strong> tab, select the <strong>API Keys<\/strong>, and click on the rounded <strong>Plus Icon<\/strong> to create one. Input <code>patter_store<\/code> as the API name, click on <strong>Add to Project<\/strong>, mark all the permissions, and click on <strong>Set Permissions<\/strong>. Then click on the <strong>Create API Key<\/strong> to create the API key<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658155631574_Screenshot+2022-07-18+at+15.41.27.png\" alt=\"Create API Key\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658155631581_Screenshot+2022-07-18+at+15.44.19.png\" alt=\"Input Details\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658155631590_Screenshot+2022-07-18+at+15.46.02.png\" alt=\"Set Permissions\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/><\/p>\n<p>With this done, we should see a screen containing our API Key and Project ID. The <code>.env<\/code> file needs to be updated with these parameters, as shown in the screenshot below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_4EA8BAE41D754FD0B6BFD11056344983DB5D1A99848BDA85FB9971C809939F43_1660154245803_Create+API+Key.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"975\" height=\"486\"\/><\/p>\n<p>Updated <code>.env<\/code><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">NEXT_PUBLIC_BIGCOMMERCE_STORE_HASH=<span class=\"hljs-regexp\">\/YOUR STORE HASH HERE\/<\/span>\nNEXT_PUBLIC_BIGCOMMERCE_TOKEN=<span class=\"hljs-regexp\">\/YOUR ACCESS TOKEN HERE\/<\/span>\nNEXT_PUBLIC_API_KEY=<span class=\"hljs-regexp\">\/YOUR API KEY GOES HERE\/<\/span>\nNEXT_PUBLIC_PROJECT_ID=<span class=\"hljs-regexp\">\/PROJECT ID GOES\/<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Add BigCommerce and Cloudinary<\/strong> <strong>I****ntegration<\/strong> <strong>S****upport<\/strong>\nUniform improves the product\u2019s digital experience through integration with an existing system. To connect BigCommerce and Cloudinary to our project, we need to navigate to the <strong>Projects<\/strong> tab, click on the project, and click on any of the highlighted sections to add <strong>integrations<\/strong> to our project.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658157231327_Screenshot+2022-07-18+at+16.11.44.png\" alt=\"Click on the Project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1363\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659483421031_Screenshot+2022-08-03+at+00.33.31.png\" alt=\"Add Integration\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>Search or browse through the available integrations, select the <strong>BigCommerce<\/strong> integration, click on the <strong>Add to project<\/strong> button, input the <code>Store Hash<\/code> and <code>API Token<\/code> we added to our <code>.env<\/code> file earlier, and <strong>Save<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659483611188_Screenshot+2022-08-03+at+00.39.43.png\" alt=\"Select BigCommerce\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659483709091_Screenshot+2022-08-03+at+00.40.42.png\" alt=\"Add Integration\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659483719213_Screenshot+2022-08-03+at+00.41.26.png\" alt=\"Input Details and Save\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>Following the same step as above, we must navigate to the <strong>All Integration<\/strong> tab, and add <strong>Cloudinary<\/strong> to our project.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484136148_Screenshot+2022-08-03+at+00.48.44.png\" alt=\"Add Cloudname &amp; API Key\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>We can get our <strong>Cloud Name<\/strong> ****and <strong>API Key<\/strong> from our Cloudinary dashboard.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_206E4126DDC79F22A5BA4F5532C504E555C0ED4A5B8EF5C71465200583830900_1643493328683_Screenshot+2022-01-29+at+22.53.26.png\" alt=\"Cloudinary Details\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"949\"\/><\/p>\n<p><strong>Understanding Components and Compositions on Uniform<\/strong>\nBefore we start modeling our project on Uniform, it\u2019s paramount we understand the features we will be leveraging to achieve this. <strong>Components<\/strong> in Uniform application work similarly to those in a React application; it lets us break our application into smaller reusable building blocks with properties, while a <strong>Composition<\/strong> is the combination of one or more components. For our project, we will create an <code>Item<\/code> component with an <code>img<\/code> and <code>details<\/code> properties.<\/p>\n<p>To get started, navigate to the <strong>Canvas<\/strong> tab, select the <strong>Component Library<\/strong>, and click on the <strong>Plus Icon<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484289057_Screenshot+2022-08-03+at+00.50.09.png\" alt=\"Create Component\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<figure class=\"table-wrapper\"><table>\n<thead>\n<tr>\n<th><strong>Parameter Name<\/strong><\/th>\n<th><strong>Help Text<\/strong><\/th>\n<th><strong>Type<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>img<\/td>\n<td>item image<\/td>\n<td>Cloudinary<\/td>\n<\/tr>\n<tr>\n<td>details<\/td>\n<td>item details<\/td>\n<td>BigCommerce Product<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n<p>Input <code>Item<\/code> as the component, Add properties of <code>img<\/code> and <code>details<\/code> as shown above, and then click on <strong>OK<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658173562688_Screenshot+2022-07-18+at+20.26.57.png\" alt=\"Component Name\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658173562682_Screenshot+2022-07-18+at+20.40.33.png\" alt=\"Component Properties\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658173562694_Screenshot+2022-07-18+at+20.45.37.png\" alt=\"Added Properties\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p>Then click on the <strong>Save and Close<\/strong> button.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484510163_Screenshot+2022-08-03+at+00.54.48.png\" alt=\"Save and Close\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>Now that we have created the <code>Item<\/code> Component, it will serve as a blueprint for creating other components for our e-commerce product.<\/p>\n<p>With that done, we can leverage the <code>Item<\/code> blueprint component to create our e-commerce landing page component. To get started, click on the <strong>Plus Icon<\/strong>, input <code>EcommItem<\/code> as the component name, check the <strong>Composition Component<\/strong>, navigate to the <strong>Slots<\/strong> section, and click on the Plus Icon to create a slot.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658174660739_Screenshot+2022-07-18+at+21.02.29.png\" alt=\"Create Slot\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p><em><strong>PS<\/strong><\/em>*: Slots help us create instances of our component (4 in our case) and allow them to accept data dynamically.*<\/p>\n<p>Input <code>EcomProduct<\/code> as the Slot Name, <strong>0<\/strong> as the Minimum, <strong>4<\/strong> as the Minimum (The hero section and the remaining 3 product features), select the <code>Item<\/code> component as the allowed component, and click <strong>OK<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658175129517_Screenshot+2022-07-18+at+21.11.55.png\" alt=\"Create Slot\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p>Then click on the <strong>Save and Close<\/strong> button.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484695009_Screenshot+2022-08-03+at+00.57.49.png\" alt=\"Save and Close\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>With that done, we can start using the <code>EcommProduct<\/code> component to compose our e-commerce landing page. To do this, navigate to the <strong>Composition<\/strong> tab, and click on the <strong>Plus Icon<\/strong> to create a composition.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484772361_Screenshot+2022-08-03+at+00.59.05.png\" alt=\"Create Composition\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>Select the <code>EcommItem<\/code> as the composition type, input <code>EcommPage<\/code> as the name, and <strong>Create<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484808033_Screenshot+2022-08-03+at+00.59.56.png\" alt=\"Create Composition\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<p>Input <code>homepage<\/code> as the slug and click on the <strong>Plus Icon<\/strong> to add a component to our <code>EcommPage<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658178442012_Screenshot+2022-07-18+at+22.04.45.png\" alt=\"Create Component\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p><em><strong>PS<\/strong><\/em>*: The slug inputted will come in handy when searching for our composition.*<\/p>\n<p>Select the <strong>Item<\/strong> component, add the matching image from Cloudinary, and the product data from BigCommerce.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484926396_Screenshot+2022-08-03+at+01.01.49.png\" alt=\"Select Item\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658179672670_Screenshot+2022-07-18+at+22.08.42.png\" alt=\"Select Image and Product Data\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658179925642_Screenshot+2022-07-18+at+22.22.41.png\" alt=\"Image Selection from Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658179925622_Screenshot+2022-07-18+at+22.11.53.png\" alt=\"Product Selection from BigCommerce\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p>We need to repeat the steps above to add the remaining products. Then click on <strong>Save and Publish<\/strong> option.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658180198098_Screenshot+2022-07-18+at+22.23.15.png\" alt=\"Hover on the item and click on the plus icon to add product\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658180198118_Screenshot+2022-07-18+at+22.25.18.png\" alt=\"Save and publish changes\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1417\" height=\"680\"\/><\/p>\n<p>Finally, we need to navigate back to the <strong>Canvas<\/strong> tab and click on the <strong>Publish<\/strong> button. This makes our composition available to third-party applications.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659485308004_Screenshot+2022-08-03+at+01.07.54.png\" alt=\"Publish Composition\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1415\" height=\"683\"\/><\/p>\n<h2>Integrating Uniform with Next.js<\/h2>\n<p>First, we need to install the required dependencies by running the command below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">i<\/span> <span class=\"hljs-keyword\">@uniformdev<\/span>\/canvas @uniformdev\/canvas-bigcommerce\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Add an Enhancer<\/strong>\nEnhancers in Uniform are a system used to control the layout of data sent through compositions. Basically, it gives us the power to ask for the exact data needed. To do this, we need to create a <code>utils.js<\/code> file inside the <code>components<\/code> folder and add the snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> {\n  createBigCommerceClient,\n  createBigCommerceEnhancer,\n} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@uniformdev\/canvas-bigcommerce'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> bigCommerceEnhancer = createBigCommerceEnhancer({\n  <span class=\"hljs-attr\">client<\/span>: createBigCommerceClient({\n    <span class=\"hljs-attr\">storeHash<\/span>: process.env.NEXT_PUBLIC_BIGCOMMERCE_STORE_HASH,\n    <span class=\"hljs-attr\">token<\/span>: process.env.NEXT_PUBLIC_BIGCOMMERCE_TOKEN,\n  }),\n  <span class=\"hljs-attr\">createProductOptions<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">include_fields<\/span>: &#91;<span class=\"hljs-string\">'id'<\/span>, <span class=\"hljs-string\">'name'<\/span>, <span class=\"hljs-string\">'price'<\/span>],\n    };\n  },\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The snippet above does the following:<\/p>\n<ul>\n<li>Imports required dependencies<\/li>\n<li>Creates a <code>bigCommerceEnhancer<\/code> using the <code>createBigCommerceEnhancer<\/code> functions that also configures the <code>client<\/code> using the Store Hash and Token we saved earlier. Uses the <code>createProductOptions<\/code> to specify required product fields (<code>id<\/code>, <code>name<\/code>, and <code>price<\/code>)<\/li>\n<\/ul>\n<p><strong>Getting composable data from Uniform<\/strong>\nWith that done, we can use the <code>bigCommerceEnhancer<\/code> to enhance returned data from Uniform. To do this, we need to modify the <code>index.js<\/code> file inside the <code>pages<\/code> folder as shown below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next\/head'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Item } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/Item'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> LogoIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/LogoIcon'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CanvasClient, EnhancerBuilder, enhance } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@uniformdev\/canvas'<\/span>; <span class=\"hljs-comment\">\/\/add<\/span>\n<span class=\"hljs-keyword\">import<\/span> { CANVAS_BIGCOMMERCE_PARAMETER_TYPES } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@uniformdev\/canvas-bigcommerce'<\/span>; <span class=\"hljs-comment\">\/\/add<\/span>\n<span class=\"hljs-keyword\">import<\/span> { bigCommerceEnhancer } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/utils'<\/span>; <span class=\"hljs-comment\">\/\/add<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\">{ composition }<\/span>) <\/span>{ <span class=\"hljs-comment\">\/\/modify<\/span>\n  <span class=\"hljs-keyword\">const<\/span> {slots} = composition <span class=\"hljs-comment\">\/\/add<\/span>\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Commerce IMG<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">'description'<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">'Commerce Landing Page in Nextjs'<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">'icon'<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">'\/favicon.ico'<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'p-5 bg-&#91;#292961] shadow-slate-400'<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'flex items-center'<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">LogoIcon<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'text-white ml-4'<\/span>&gt;<\/span>Pattern Store<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'flex h-&#91;500px]'<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'w-1\/2 bg-&#91;#d8dbe2] h-full flex justify-center items-center'<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'text-4xl px-4 lg:px-5 font-medium'<\/span>&gt;<\/span>\n              {' '}\n              Uniform, Bigcommerce, and Cloudinary{' '}\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'text-&#91;#292961]'<\/span>&gt;<\/span>powered<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> pattern store\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'w-1\/2 h-full'<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n              <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">'hero'<\/span>\n              <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{slots.ecomproduct&#91;0].parameters.img.value&#91;0].url}<\/span>\n              <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'h-full w-full object-fit'<\/span>\n            \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'px-5 py-10'<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'mb-4 font-medium capitalize text-&#91;#292961]'<\/span>&gt;<\/span>\n            featured products\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">'grid grid-col-1 lg:grid-cols-3 w-full h-96'<\/span>&gt;<\/span>\n            {slots.ecomproduct.slice(1).map((item, i) =&gt; (\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Item<\/span>\n              <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{i}<\/span>\n              <span class=\"hljs-attr\">img<\/span>=<span class=\"hljs-string\">{item.parameters.img.value&#91;0].url}<\/span>\n              <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">{item.parameters.details.value.name}<\/span>\n              <span class=\"hljs-attr\">price<\/span>=<span class=\"hljs-string\">{item.parameters.details.value.price}<\/span>\n            \/&gt;<\/span>\n            ))}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-comment\">\/\/add<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getStaticProps<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/fetching data from uniform<\/span>\n  <span class=\"hljs-keyword\">const<\/span> client = <span class=\"hljs-keyword\">new<\/span> CanvasClient({\n    <span class=\"hljs-attr\">apiKey<\/span>: process.env.NEXT_PUBLIC_API_KEY,\n    <span class=\"hljs-attr\">projectId<\/span>: process.env.NEXT_PUBLIC_PROJECT_ID,\n  });\n\n  <span class=\"hljs-keyword\">const<\/span> { composition } = <span class=\"hljs-keyword\">await<\/span> client.getCompositionBySlug({\n    <span class=\"hljs-attr\">slug<\/span>: <span class=\"hljs-string\">'homepage'<\/span>,\n  });\n\n  <span class=\"hljs-comment\">\/\/enhancing with bigcommerce<\/span>\n  <span class=\"hljs-keyword\">const<\/span> enhancers = <span class=\"hljs-keyword\">new<\/span> EnhancerBuilder().parameterType(\n    CANVAS_BIGCOMMERCE_PARAMETER_TYPES,\n    bigCommerceEnhancer\n  );\n\n  <span class=\"hljs-keyword\">await<\/span> enhance({ composition, enhancers, <span class=\"hljs-attr\">context<\/span>: {} });\n\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">props<\/span>: {\n      composition,\n    },\n  };\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The snippet above does the following:<\/p>\n<ul>\n<li>Imports the required dependencies<\/li>\n<li>Gets data from Uniform using the <code>getStaticProps<\/code> function. The function also does the following:\n<ul>\n<li>Creates a <code>CanvasClient<\/code> instance using the API key and Project ID we saved earlier.<\/li>\n<li>Uses the instance to get <code>composition<\/code> by passing in the <code>homepage<\/code> (we configured this on the Uniform platform) as a slug.<\/li>\n<li>Uses the <code>bigCommerceEnhancer<\/code> to filter the data returned by the composition.<\/li>\n<\/ul>\n<\/li>\n<li>Updates the UI to show data dynamically from the <code>composition<\/code>\n<\/li>\n<\/ul>\n<p>With that done, we can restart our development server using the command below:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    npm run dev\n<\/code><\/span><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658139925006_screencapture-localhost-3000-2022-07-18-11_24_54.png\" alt=\"Running App with Composed Data from Uniform\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1419\" height=\"1076\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This post discussed creating a composition on Uniform with product data from BigCommerce and a Product image from Cloudinary. With Uniform, we can improve our digital experience, personalize our data, and improve application performance (single API call).<\/p>\n<p>These resources might be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/uniform.dev\/\">Uniform Platform<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.bigcommerce.com\/\">BigCommerce Platform<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/\">Cloudinary Platform<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/docs.uniform.app\/canvas\/tutorials\/add-bigcommerce\">Uniform Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/@uniformdev\/canvas-bigcommerce\">Uniform BigCommerce Data Enhancer<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/@uniformdev\/canvas\">Uniform canvas<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28507,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[384,134,175,177,212,371],"class_list":["post-28506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-delivery","tag-guest-post","tag-jamstack","tag-javascript","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Composable Images with Cloudinary and BigCommerce<\/title>\n<meta name=\"description\" content=\"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Composable Images with Cloudinary and BigCommerce\" \/>\n<meta property=\"og:description\" content=\"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-17T07:38:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-01T17:47:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1012\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Composable Images with Cloudinary and BigCommerce\",\"datePublished\":\"2022-08-17T07:38:10+00:00\",\"dateModified\":\"2024-02-01T17:47:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA\",\"keywords\":[\"Delivery\",\"Guest Post\",\"JAMStack\",\"Javascript\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\",\"name\":\"Composable Images with Cloudinary and BigCommerce\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA\",\"datePublished\":\"2022-08-17T07:38:10+00:00\",\"dateModified\":\"2024-02-01T17:47:06+00:00\",\"description\":\"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA\",\"width\":1012,\"height\":506},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Composable Images with Cloudinary and BigCommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Composable Images with Cloudinary and BigCommerce","description":"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Composable Images with Cloudinary and BigCommerce","og_description":"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-08-17T07:38:10+00:00","article_modified_time":"2024-02-01T17:47:06+00:00","og_image":[{"width":1012,"height":506,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Composable Images with Cloudinary and BigCommerce","datePublished":"2022-08-17T07:38:10+00:00","dateModified":"2024-02-01T17:47:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA","keywords":["Delivery","Guest Post","JAMStack","Javascript","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/","name":"Composable Images with Cloudinary and BigCommerce","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA","datePublished":"2022-08-17T07:38:10+00:00","dateModified":"2024-02-01T17:47:06+00:00","description":"Learn how to deliver composable commerce images in a Next.js application using Cloudinary, BigCommerce, and Uniform.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA","width":1012,"height":506},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/deliver-composable-commerce-images-with-cloudinary-and-bigcommerce-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Composable Images with Cloudinary and BigCommerce"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923559\/Web_Assets\/blog\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b\/25f3dd4ecd6c61cc20362964775ba14d77484590-1012x506-1_2850755e0b.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28506"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28506\/revisions"}],"predecessor-version":[{"id":32746,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28506\/revisions\/32746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28507"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}