elasticpath · johughes1204 · Aug 14, 2024 · Aug 14, 2024 · Aug 14, 2024 · Aug 19, 2024
diff --git a/docs/studio/Integrations/epcc.mdx b/docs/studio/Integrations/epcc.mdx
@@ -4,6 +4,8 @@ nav_label: Elastic Path
 sidebar_position: 111
 ---
 
+Using Studio with Elastic Path Composable Commerce enables you to combine the e-commerce capabilities of Elastic Path Composable Commerce while creating highly tailored commerce experiences with Studio.
+
 ## Prerequisites
 
 - Ensure that you have an account within Elastic Path Commerce Manager.
@@ -40,7 +42,7 @@ The following steps describe how to configure an integration between Studio and
 1. (Optional) In **Catalog Channel**, enter the channel you specified when you created your catalog rule in Product Experience Manager. Channels represent your ecommerce sales channel through which your shoppers may select and pay for your products, for example, **Mobile** for a mobile app or **Web** for website. See [Configure Shopper Catalog Rules](/docs/api/pxm/catalog/rules). If you leave this blank, the default catalog is used.
 1. (Optional) Configure the shipping options. If you have configured the **Shipping Service** in the [Integrations Hub](/docs/composer/integration-hub/integrations-hub), you can use the information from the integration to configure your shipping options in the **Elastic Path** integration. This enables you to use the shipping options available in your Elastic Path store in your Studio storefront.
 
-![shipping service](/assets/studio/shippingoptions.png)
+    ![shipping service](/assets/studio/shippingoptions.png)
 
     Complete the shipping options with the information from the **Shipping Service** in Integrations Hub.
 

diff --git a/docs/studio/Integrations/klevu/getting-started.mdx b/docs/studio/Integrations/klevu/getting-started.mdx
@@ -15,15 +15,15 @@ You can quickly and easily integrate Studio with Klevu. Klevu is an advanced AI-
 
 Reporting user interaction with Klevu is crucial to allow the machine learning algorithms to accurately rank items. By reporting user interactions, such as clicks, searches, and purchases, Klevu's algorithms can better understand which products are most relevant to users.
 
-The Klevu integration is using two Klevu events, searches and clicks. Anytime a shopper searches uses the Studio search page and/or clicks on a product, you can see this in the Klevu dashboard.
+The Klevu integration is using two Klevu events, searches and clicks. Anytime a shopper searches using the Studio search page and/or clicks on a product, you can see this in the Klevu dashboard.
 
 ## Prerequisites
 
 You must have the following before configuring the Klevu integration in Studio.
 
 1. You must have a Shopify store with the following:
 
-    - the Klevu app installed. If you don't have a Klevu account, it is automatically created when you install the Klevu app on your shopify store.
+    - the Klevu app installed. If you don't have a Klevu account, you can create one when you install the Klevu app on your shopify store.
     - configured a Studio account and associated it with the Shopify store.
 
 1. To configure the Klevu integration in Studio you need the following:

diff --git a/docs/studio/Integrations/klevu/search.mdx b/docs/studio/Integrations/klevu/search.mdx
@@ -10,8 +10,8 @@ Klevu’s search engine significantly enhances the e-commerce experience by prov
 
 When integrating with Klevu, there are two types of search components you can use:
 
-- The Klevu search templates. This means the UI and styling is automatically generated by Klevu.
 - The Studio **Search** component that uses Studio styling and HTML. We recommend you start with this as it matches the styling of your Studio site.
+- The Klevu search templates. This means the UI and styling is automatically generated by Klevu.
 
 Follow these steps to create a search page that uses a **Search** component in Studio.
 

diff --git a/docs/studio/getting-started-with-epcc.mdx b/docs/studio/getting-started-with-epcc.mdx
diff --git a/docs/studio/sign-up/_category_.json b/docs/studio/sign-up/_category_.json
@@ -0,0 +1,4 @@
+{
+    "position": 3,
+    "label": "Signing Up"
+}
diff --git a/docs/studio/sign-up/overview.md b/docs/studio/sign-up/overview.md
@@ -0,0 +1,15 @@
+---
+title: Overview
+nav_label: Overview
+sidebar_position: 5
+---
+
+There are several ways to get started with Studio. You can use Studio with your Shopify store, use Studio as a standalone tool, or explore other integrations, depending on your requirements.
+
+| Option                                           | Description                                                                                                                                                                                                                                                                                                                                      |
+|--------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Use Studio with your Shopify store               | Using Studio with Shopify enhances and extends the e-commerce capabilities of Shopify. You can use the themes and pages that you develop in Studio in your Shopify store.                                                                                                                                                                        |
+| Use Studio with both Shopify and Klevu           | Using Shopify, Klevu and Studio, enables you to create an e-commerce solution that combines Shopify's ease of use and reliability, Klevu's advanced search and personalization features and Studio's flexibility to meet complex business needs. You can use Klevu's search and recommendation features with the products in your Shopify store. |
+| Use Studio with Klevu                            | Using Klevu with Studio enables you to use Klevu's advanced search and personalization features in your Studio storefront.                                                                                                                                                                                                                       |
+| Use Studio with Elastic Path Composable Commerce | Using Studio with Elastic Path Composable Commerce enables you to combine the e-commerce capabilities of Elastic Path Composable Commerce while creating highly tailored commerce experiences with Studio. See [Integrating with Elastic Path Composable Commerce](/docs/studio/Integrations/epcc).                                              |                                                                                                                                   
+| Use Studio as a standalone tool                  | Studio allows you to rapidly launch shoppable landing pages, campaign sites, and simple, turn-key storefronts that drive conversion and revenue, without reliance on IT. For more details or to sign up, go to [Elastic Path Studio](https://studio.elasticpath.com/).                                                                           |
diff --git a/docs/studio/sign-up/shopify-klevu/_category_.json b/docs/studio/sign-up/shopify-klevu/_category_.json
@@ -0,0 +1,4 @@
+{
+    "position": 15,
+    "label": "Studio for Shopify & Klevu"
+}
diff --git a/docs/studio/sign-up/shopify-klevu/configure-klevu.md b/docs/studio/sign-up/shopify-klevu/configure-klevu.md
@@ -0,0 +1,33 @@
+---
+title: Integrate Klevu with Shopify
+nav_label: Integrate Klevu with Shopify
+sidebar_position: 25
+---
+
+At this point, you have signed up for Klevu, but you now need to go back to the Klevu Shopify App to integrate with  Klevu. 
+
+1. Go back to the Shopify + Klevu App.
+2. Select **Integrate Klevu**.
+3. You are prompted to add the **API key** and **REST AUTH key** that you copied in step 3.
+4. Select **Next**.
+5. Select **Confirm**.
+6. Select **Integrate**. A list of your Shopify themes is displayed.
+7. Select **integrate on this theme** next to the Shopify theme that you want to integrate with Klevu. You should integrate with the theme that is currently published and in use.
+8. Select **Embed** to embed the Klevu Javascript. The Shopify theme editor is displayed.
+9. From to **Klevu Javascript**, select the following:
+    - Javascript for Quick Search
+    - Javascript for Smart Category Merchandizing
+    - Javascript for Smart Recommendations
+10. In **Search Results Landing Page**, specify the URL for your Search Results page.
+11. (Optional) Select **Wait for Interactive** if you want Klevu to initialize only after the page has loaded.
+12. Select Save.
+13. Go back to the Klevu Integration page in the Klevu Shopify App.
+14. Select **Refresh page** to verify that Klevu Javascript was installed successfully.
+15. In **Embed Klevu Solution Blocks**, select **Embed** next to **Klevu Search Results Block**. The Shopify theme editor for your Search results template is displayed. Shopify automatically provides search results. In **Apps**, **Klevu Search Results** is now displayed, replacing the Shopify search results.
+16. You must disable the Shopify Search Results. To do this, select the native Search results grid and select the eye icon to hide the Shopify Search Results.
+17. Select **Save**.
+18. You must also disable the Shopify search suggestions. To do this, select the header. The header properties are displayed.
+19. From **Theme Settings**, uncheck **Enable search suggestions**.
+20. Select **Save**.
+
+Once you have configured Shopify with Klevu, you need to integrate Klevu with Studio. See [Integrating Klevu](/docs/studio/Integrations/klevu/getting-started).
diff --git a/docs/studio/sign-up/shopify-klevu/install-klevu.md b/docs/studio/sign-up/shopify-klevu/install-klevu.md
@@ -0,0 +1,14 @@
+---
+title: Install the Klevu -AI Search & Discover App
+nav_label: Install the Klevu -AI Search & Discover App
+sidebar_position: 5
+---
+
+Once you have configured [Studio with Shopify](/docs/studio/sign-up/shopify), you can install Klevu.
+
+1. Go to the Shopify app store.
+2. Search for **klevu**.
+3. Select **Klevu - AI Search & Discovery**.
+4. Select **Install**.
+5. Accept the terms of service and select **Install**.
+
diff --git a/docs/studio/sign-up/shopify-klevu/klevu-account.md b/docs/studio/sign-up/shopify-klevu/klevu-account.md
@@ -0,0 +1,16 @@
+---
+title: Create a Klevu Account
+nav_label: Create a Klevu account
+sidebar_position: 10
+---
+
+Before you can integrate Klevu, you must create a Klevu account. 
+
+1. From **Don't have a Klevu account?**, select **Click here**.
+2. Klevu prompts you to enter your email address and verify your email.
+3. Once Klevu has verified your email address, you must enter your account details and password.
+4. Select **Activate Account**.
+5. Once the account is activated, select the Klevu solutions you want access to. We recommend that you select all three but you must have **Smart recommendations** installed to use the Studio Recommendations component.
+6. Select **Save and continue**.
+7. Klevu prompts you to provide information about your business. You can either select **Complete** or **Skip to Integration**.
+8. Klevu provides you with a checklist to help you get started. Select **Start Checklist**.
diff --git a/docs/studio/sign-up/shopify-klevu/klevu-store.md b/docs/studio/sign-up/shopify-klevu/klevu-store.md
@@ -0,0 +1,15 @@
+---
+title: Create a Klevu Store
+nav_label: Create a Klevu store
+sidebar_position: 20
+---
+
+Once you have set up a Klevu account, you can add your Klevu store. 
+
+1. Once you have selected, **Start Checklist**, the **Add Store** page is displayed.
+1. In **Store Name**, enter a name for your store. 
+1. In **Store URL**, add your Shopify Store URL.
+1. Finally, select your **Store Language** and **Store Timezone** from the drop-down lists.
+1. Select **Next**. The Klevu **API key** and **REST AUTH key** are displayed. Make a copy of these as you will need them later.
+1. Select **Start Using Klevu**.
+
diff --git a/docs/studio/sign-up/shopify-klevu/shopify-klevu.md b/docs/studio/sign-up/shopify-klevu/shopify-klevu.md
@@ -0,0 +1,14 @@
+---
+title: Studio for Shopify & Klevu
+nav_label: Studio for Shopify & Klevu
+sidebar_position: 1
+---
+
+Using Shopify, Klevu and Studio, enables you to create an e-commerce solution that combines Shopify's ease of use and reliability, Klevu's advanced search and personalization features and Studio's flexibility to meet complex business needs. You can use Klevu's search and recommendation features with the products in your Shopify store.
+
+The following steps provide an overview. 
+
+1. Install the Klevu app.
+2. Create a Klevu account.
+3. Create a Klevu store.
+4. Integrate Klevu with Shopify and Studio.
diff --git a/docs/studio/sign-up/shopify/_category_.json b/docs/studio/sign-up/shopify/_category_.json
@@ -0,0 +1,4 @@
+{
+    "position": 10,
+    "label": "Studio for Shopify"
+}
diff --git a/docs/studio/sign-up/shopify/shopify-app.md b/docs/studio/sign-up/shopify/shopify-app.md
@@ -0,0 +1,14 @@
+---
+title: Install the Elastic Path Studio App in Shopify
+nav_label: Install the Elastic Path Studio App in Shopify
+sidebar_position: 10
+---
+
+Once you have your development store created in Shopify, you can install Studio.  
+
+1. From your Shopify store, search for **Elastic Path Studio** or navigate to the Shopify app store.
+1. In the Shopify app store, the Elastic Path Studio app is displayed. Select **Install**.
+1. Agree to the terms of service.
+1. Shopify prompts you to specify information such as, what you want to do with Studio, how large your company is and the category that best describes your brand.
+1. Once Elastic Path Studio is installed, we recommend that you pin it to your Shopify dashboard. Otherwise, if you navigate away from your Shopify store, you will have to search for Elastic Path Studio.
+
diff --git a/docs/studio/sign-up/shopify/shopify-store.md b/docs/studio/sign-up/shopify/shopify-store.md
@@ -0,0 +1,19 @@
+---
+title: Create a Development Store in Shopify
+nav_label: Create a Development Store in Shopify
+sidebar_position: 5
+---
+
+:::caution
+
+You must have access to the Shopify Partner dashboard.
+
+:::
+
+First, you must create a development store in Shopify.
+
+1. Go to the Shopify Partner Dashboard.
+2. Create a development store.  
+3. Configure the store depending on your requirements. For example, you can choose the purpose of the store, the store name, the Shopify build version, and whether to start the store with no data or some test data.
+4. Shopify prompts you to choose your account.
+5. Once the store is created, Shopify opens a new window with the store details. You can start configuring your store, for example adding products.
diff --git a/docs/studio/sign-up/shopify/shopify-studio.md b/docs/studio/sign-up/shopify/shopify-studio.md
@@ -0,0 +1,15 @@
+---
+title: Configure Studio for Shopify
+nav_label: Configure Studio for Shopify
+sidebar_position: 15
+---
+
+
+Once you have installed Elastic Path Studio, we recommend checking your branding to ensure that everything is displaying as you intended. From **Branding**, select **Make changes**. The Studio Style Guide is displayed. See [Using your Style Guide](/docs/studio/design/Design-&-Styles/Using-your-Style-Guide).
+
+Once you are happy with your branding, you can start creating your landing pages. 
+
+1. From **Create a new landing page**, you will now have several categories of templates that you can use. Select a template. The Studio page editor is displayed.
+2. You can use the components in Studio to quickly and easily design your landing pages. See [Building your first landing page](/docs/studio/content/Basic-Page-Editing/Building-your-first-landing-page).
+
+For more information about using Shopify with Studio, see [Building ecommerce with Studio](/docs/studio/Shopify/Adding-a-product-to-a-page).
diff --git a/docs/studio/sign-up/shopify/shopify.md b/docs/studio/sign-up/shopify/shopify.md
@@ -0,0 +1,13 @@
+---
+title: Studio for Shopify
+nav_label: Studio for Shopify
+sidebar_position: 1
+---
+
+Using Studio with Shopify enhances and extends the e-commerce capabilities of Shopify. You can use the themes and pages that you develop in Studio in your Shopify store.
+
+The following steps provide an overview.
+
+1. Create a development store in Shopify.
+2. Install the Elastic Path Studio app in Shopify.
+3. Configure Studio for Shopify.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1588,7 +1588,7 @@ const config = {
           { to: '/docs/api/integrations/create-integration', from: '/docs/commerce-cloud/integrations/integrations-api/create-an-integration'},
           { to: '/docs/commerce-manager/product-experience-manager/Products/overview', from: '/docs/pxm/products/ep-pxm-products-api/pxm-products-api-overview'},
           { to: '/docs/api/pxm/products/delete-product', from: '/docs/pxm/products/extending-pxm-products/pxm-product-attributes-api/delete-attribute'},
-          { to: '/docs/studio/getting-started-with-epcc', from: '/docs/cx-studio/getting-started-with-epcc'},
+          { to: '/docs/studio/Integrations/epcc', from: '/docs/cx-studio/getting-started-with-epcc'},
           { to: '/docs/commerce-manager/product-experience-manager/Products/create-products', from: '/docs/pxm/products/pxm-products-commerce-manager/create-products'},
           { to: '/docs/api/carts/checkout', from: '/docs/commerce-cloud/checkout/checkout'},
           { to: '/docs/api/pxm/currencies/get-a-currency', from: '/learn/power-of-the-catalog/regional-currencies'},
@@ -1601,7 +1601,7 @@ const config = {
           { to: '/', from: '/learn/custom-data-flows'},
           { to: '/docs/studio/Integrations/stripe-payment-intents', from: '/docs/commerce-cloud/payments/paying-for-an-order/configure-epcc-plugin-for-stripe'},
           { to: '/docs/api/accounts/get-v-2-settings-account-authentication', from: '/docs/commerce-cloud/api-overview/api-overview'},
-          { to: '/docs/studio/getting-started-with-epcc', from: '/learn/foundations-single-page'},
+          { to: '/docs/studio/Integrations/epcc', from: '/learn/foundations-single-page'},
           { to: '/docs/commerce-manager/product-experience-manager/extending-products/templates', from: '/docs/pxm/products/extending-pxm-products/pxm-product-attributes-api/create-attribute'},
           { to: '/docs/customer-management/customer-management-api/update-a-customer', from: '/docs/pxm/products/extending-pxm-products/pxm-product-attributes-api/update-attribute'},
           { to: '/docs/commerce-manager/product-experience-manager/extending-products/templates', from: '/docs/pxm/products/extending-pxm-products/pxm-product-attributes-api/get-attribute'},