From 43f78fd3920a04e7e0530b4bd29ca95e12efb906 Mon Sep 17 00:00:00 2001 From: Jo Date: Wed, 14 Aug 2024 11:27:05 +0100 Subject: [PATCH 01/10] first draft --- docs/studio/sign-up/_category_.json | 4 ++++ docs/studio/sign-up/overview.md | 15 +++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 docs/studio/sign-up/_category_.json create mode 100644 docs/studio/sign-up/overview.md diff --git a/docs/studio/sign-up/_category_.json b/docs/studio/sign-up/_category_.json new file mode 100644 index 00000000..b2d7612f --- /dev/null +++ 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 new file mode 100644 index 00000000..ff8c1c2f --- /dev/null +++ b/docs/studio/sign-up/overview.md @@ -0,0 +1,15 @@ +--- +title: Overview +nav_label: Overview +sidebar_position: 5 +--- + +There are several ways you can use Studio. + +| 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 | | + From b2196b37dcdc9034db65481ee280913826b4112a Mon Sep 17 00:00:00 2001 From: Jo Date: Wed, 14 Aug 2024 13:57:08 +0100 Subject: [PATCH 02/10] first draft --- docs/studio/sign-up/overview.md | 12 ++++++------ docs/studio/sign-up/shopify-klevu.md | 7 +++++++ docs/studio/sign-up/shopify.md | 7 +++++++ 3 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 docs/studio/sign-up/shopify-klevu.md create mode 100644 docs/studio/sign-up/shopify.md diff --git a/docs/studio/sign-up/overview.md b/docs/studio/sign-up/overview.md index ff8c1c2f..53e1b29b 100644 --- a/docs/studio/sign-up/overview.md +++ b/docs/studio/sign-up/overview.md @@ -6,10 +6,10 @@ sidebar_position: 5 There are several ways you can use Studio. -| 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 | | +| Integration | 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. | diff --git a/docs/studio/sign-up/shopify-klevu.md b/docs/studio/sign-up/shopify-klevu.md new file mode 100644 index 00000000..fcbb16ea --- /dev/null +++ b/docs/studio/sign-up/shopify-klevu.md @@ -0,0 +1,7 @@ +--- +title: Studio for Shopify & Klevu +nav_label: Studio for Shopify & Klevu +sidebar_position: 15 +--- + +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. diff --git a/docs/studio/sign-up/shopify.md b/docs/studio/sign-up/shopify.md new file mode 100644 index 00000000..2f19e84a --- /dev/null +++ b/docs/studio/sign-up/shopify.md @@ -0,0 +1,7 @@ +--- +title: Studio for Shopify +nav_label: Studio for Shopify +sidebar_position: 10 +--- + +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. From 75826d336b9ea4f397ad0ecdd7ca21c0f9398e12 Mon Sep 17 00:00:00 2001 From: Jo Date: Wed, 14 Aug 2024 17:42:56 +0100 Subject: [PATCH 03/10] first draft --- docs/studio/sign-up/shopify-klevu.md | 37 ++++++++++++++++++++++++++++ docs/studio/sign-up/shopify.md | 35 ++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/docs/studio/sign-up/shopify-klevu.md b/docs/studio/sign-up/shopify-klevu.md index fcbb16ea..792078c6 100644 --- a/docs/studio/sign-up/shopify-klevu.md +++ b/docs/studio/sign-up/shopify-klevu.md @@ -5,3 +5,40 @@ sidebar_position: 15 --- 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. + +### Step 1 - Install the Klevu -AI Search & Discover App + +Once you have configured Studio with 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**. + +### Step 2 - Create a Klevu Account + +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. +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**. + +### Step 3 - Create a Klevu Store + +Having already completed the account setup, you can add your store. + +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**. + +### Step 4 - Configure the Klevu Integration + +Once you have your Klevu account and store created, you can now configure your Klevu integration. \ No newline at end of file diff --git a/docs/studio/sign-up/shopify.md b/docs/studio/sign-up/shopify.md index 2f19e84a..230b049e 100644 --- a/docs/studio/sign-up/shopify.md +++ b/docs/studio/sign-up/shopify.md @@ -5,3 +5,38 @@ sidebar_position: 10 --- 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. + +### Step 1 - Create a Development Store in Shopify + +:::caution + +You must have access to the Shopify Partner dashboard. + +::: + +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. + +### Step 2 - Install the Elastic Path Studio App in Shopify + +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. + +### Step 3 - Check your Studio Branding + +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). + +### Step 4 - Create your Landing Pages + +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 an 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). \ No newline at end of file From 305492707df1537af1d6e3b50e4fe32f4a36ca65 Mon Sep 17 00:00:00 2001 From: Jo Date: Fri, 13 Sep 2024 13:54:17 +0100 Subject: [PATCH 04/10] first draft --- guides/Getting-Started/filtering.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/guides/Getting-Started/filtering.md b/guides/Getting-Started/filtering.md index 4f68cedc..efaf4d9a 100644 --- a/guides/Getting-Started/filtering.md +++ b/guides/Getting-Started/filtering.md @@ -58,6 +58,14 @@ Filtering is currently supported on the following endpoints: * [Get all Custom APIs](/docs/api/commerce-extensions/get-all-custom-apis) * [Get all Custom Fields](/docs/api/commerce-extensions/get-all-custom-fields) * [Get all Custom API Entries](/docs/api/commerce-extensions/get-all-custom-entries) +* [Get all jobs](/docs/api/subscriptions/list-jobs) +* [Get all schedules](/docs/api/subscriptions/list-schedules) +* [Get all subscription products](/docs/api/subscriptions/list-products) +* [Get all subscription invoices](/docs/api/subscriptions/list-invoices) +* [Get all subscribers](/docs/api/subscriptions/list-subscribers) +* [Get all subscription offerings](/docs/api/subscriptions/list-offerings) +* [Get all subscriptions](/docs/api/subscriptions/list-subscriptions) +* [Get all dunning rules](/docs/api/subscriptions/list-dunning-rules) ## Filtering Syntax @@ -196,6 +204,14 @@ As this feature is in beta, quoted operands are only working with the following - [Get all promotions](/docs/api/promotions/get-all-promotions) - [Get all product prices](/docs/api/pxm/pricebooks/get-prices) - [Get all products](/docs/api/pxm/products/get-all-products) +- [Get all jobs](/docs/api/subscriptions/list-jobs) +- [Get all schedules](/docs/api/subscriptions/list-schedules) +- [Get all subscription products](/docs/api/subscriptions/list-products) +- [Get all subscription invoices](/docs/api/subscriptions/list-invoices) +- [Get all subscribers](/docs/api/subscriptions/list-subscribers) +- [Get all subscription offerings](/docs/api/subscriptions/list-offerings) +- [Get all subscriptions](/docs/api/subscriptions/list-subscriptions) +- [Get all dunning rules](/docs/api/subscriptions/list-dunning-rules) ::: If you need to search for unsupported operands, or white space is significant (for example, a value starts with a From 40ef0e72b7c1abcce6900428d90f06e915cd85e2 Mon Sep 17 00:00:00 2001 From: Jo Date: Fri, 13 Sep 2024 13:58:22 +0100 Subject: [PATCH 05/10] Revert "first draft" This reverts commit 305492707df1537af1d6e3b50e4fe32f4a36ca65. --- guides/Getting-Started/filtering.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/guides/Getting-Started/filtering.md b/guides/Getting-Started/filtering.md index efaf4d9a..4f68cedc 100644 --- a/guides/Getting-Started/filtering.md +++ b/guides/Getting-Started/filtering.md @@ -58,14 +58,6 @@ Filtering is currently supported on the following endpoints: * [Get all Custom APIs](/docs/api/commerce-extensions/get-all-custom-apis) * [Get all Custom Fields](/docs/api/commerce-extensions/get-all-custom-fields) * [Get all Custom API Entries](/docs/api/commerce-extensions/get-all-custom-entries) -* [Get all jobs](/docs/api/subscriptions/list-jobs) -* [Get all schedules](/docs/api/subscriptions/list-schedules) -* [Get all subscription products](/docs/api/subscriptions/list-products) -* [Get all subscription invoices](/docs/api/subscriptions/list-invoices) -* [Get all subscribers](/docs/api/subscriptions/list-subscribers) -* [Get all subscription offerings](/docs/api/subscriptions/list-offerings) -* [Get all subscriptions](/docs/api/subscriptions/list-subscriptions) -* [Get all dunning rules](/docs/api/subscriptions/list-dunning-rules) ## Filtering Syntax @@ -204,14 +196,6 @@ As this feature is in beta, quoted operands are only working with the following - [Get all promotions](/docs/api/promotions/get-all-promotions) - [Get all product prices](/docs/api/pxm/pricebooks/get-prices) - [Get all products](/docs/api/pxm/products/get-all-products) -- [Get all jobs](/docs/api/subscriptions/list-jobs) -- [Get all schedules](/docs/api/subscriptions/list-schedules) -- [Get all subscription products](/docs/api/subscriptions/list-products) -- [Get all subscription invoices](/docs/api/subscriptions/list-invoices) -- [Get all subscribers](/docs/api/subscriptions/list-subscribers) -- [Get all subscription offerings](/docs/api/subscriptions/list-offerings) -- [Get all subscriptions](/docs/api/subscriptions/list-subscriptions) -- [Get all dunning rules](/docs/api/subscriptions/list-dunning-rules) ::: If you need to search for unsupported operands, or white space is significant (for example, a value starts with a From 479e82cf7261fbd2c23d189232ae2ba14bdf4f65 Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 12:21:30 +0100 Subject: [PATCH 06/10] first draft --- .../Integrations/klevu/getting-started.md | 4 +- docs/studio/Integrations/klevu/search.md | 2 +- .../getting-started-with-epcc.md | 13 +++--- docs/studio/sign-up/overview.md | 8 ++-- docs/studio/sign-up/shopify-klevu.md | 43 ++++++++++++++++--- docs/studio/sign-up/shopify.md | 4 +- 6 files changed, 54 insertions(+), 20 deletions(-) rename docs/studio/{ => sign-up}/getting-started-with-epcc.md (74%) diff --git a/docs/studio/Integrations/klevu/getting-started.md b/docs/studio/Integrations/klevu/getting-started.md index 7afc922b..983e2192 100644 --- a/docs/studio/Integrations/klevu/getting-started.md +++ b/docs/studio/Integrations/klevu/getting-started.md @@ -13,7 +13,7 @@ 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 @@ -21,7 +21,7 @@ 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.md b/docs/studio/Integrations/klevu/search.md index 037a7293..1328d877 100644 --- a/docs/studio/Integrations/klevu/search.md +++ b/docs/studio/Integrations/klevu/search.md @@ -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.md b/docs/studio/sign-up/getting-started-with-epcc.md similarity index 74% rename from docs/studio/getting-started-with-epcc.md rename to docs/studio/sign-up/getting-started-with-epcc.md index 7a2d050f..7fe24cc2 100644 --- a/docs/studio/getting-started-with-epcc.md +++ b/docs/studio/sign-up/getting-started-with-epcc.md @@ -1,9 +1,11 @@ --- -title: Getting-Started with Composable Commerce -nav_label: Getting-Started with Composable Commerce -sidebar_position: 5 +title: Studio with Elastic Path Composable Commerce +nav_label: Studio with Elastic Path Composable Commerce +sidebar_position: 20 --- +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. @@ -15,8 +17,7 @@ sidebar_position: 5 - [Templates](/docs/commerce-manager/product-experience-manager/extending-products/templates) - [Catalogs](/docs/commerce-manager/product-experience-manager/catalogs/catalog-configuration) - Ensure that you have configured [Elastic Path Payments Powered by Stripe](/docs/commerce-manager/payments/ep-payments-powered-by-stripe) in Commerce Manager. -- Ensure that the Stripe gateway is enabled in Studio to sucessfully perform the checkout process. For more information, see [Stripe Integration](/docs/studio/Integrations/Integrating-stripe). -- (Optional) Ensure that you have set up an [Algolia integration](/docs/studio/Integrations/algolia) if you want to enable search indexing in your CX studio storefront. +- Ensure that the Stripe gateway is enabled in Studio to successfully perform the checkout process. For more information, see [Stripe Integration](/docs/studio/Integrations/Integrating-stripe). ## Procedure @@ -34,6 +35,6 @@ sidebar_position: 5 - **API Base URL** 1. Select **Connect account** to save your changes. -1. Go to **Storefront** to confirm that all products and catogories are successfully integrated from Commerce Manager into Studio. +1. Go to **Storefront** to confirm that all products and categories are successfully integrated from Commerce Manager into Studio. Under **Content** > **Website**, you can see **Checkout** and **Thank You** pages are automatically created and ready to use. You can modify them as needed. diff --git a/docs/studio/sign-up/overview.md b/docs/studio/sign-up/overview.md index 53e1b29b..68551c28 100644 --- a/docs/studio/sign-up/overview.md +++ b/docs/studio/sign-up/overview.md @@ -4,12 +4,12 @@ nav_label: Overview sidebar_position: 5 --- -There are several ways you can use Studio. +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. -| Integration | Description | +| 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. | - +| 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. | +| 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.md b/docs/studio/sign-up/shopify-klevu.md index 792078c6..f5a2aff6 100644 --- a/docs/studio/sign-up/shopify-klevu.md +++ b/docs/studio/sign-up/shopify-klevu.md @@ -6,9 +6,9 @@ sidebar_position: 15 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. -### Step 1 - Install the Klevu -AI Search & Discover App +### Step 1 - Install the Klevu -AI Search & Discover App in the Shopify App Store -Once you have configured Studio with Shopify, you can install Klevu. +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**. @@ -18,10 +18,10 @@ Once you have configured Studio with Shopify, you can install Klevu. ### Step 2 - Create a Klevu Account -Before you can integrate Klevu, you must create a Klevu account. +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. +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. @@ -31,8 +31,9 @@ Before you can integrate Klevu, you must create a Klevu account. ### Step 3 - Create a Klevu Store -Having already completed the account setup, you can add your store. +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. @@ -41,4 +42,34 @@ Having already completed the account setup, you can add your store. ### Step 4 - Configure the Klevu Integration -Once you have your Klevu account and store created, you can now configure your Klevu integration. \ No newline at end of file +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. +1. Select **Integrate Klevu**. +1. You are prompted to add the **API key** and **REST AUTH key** that you copied in step 3. +1. Select **Next**. +1. Select **Confirm**. +1. Select **Integrate**. A list of your Shopify themes is displayed. +1. 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. +1. Select **Embed** to embed the Klevu Javascript. The Shopify theme editor is displayed. +1. From to **Klevu Javascript**, select the following: + + - Javascript for Quick Search + - Javascript for Smart Category Merchandizing + - Javascript for Smart Recommendations + +1. In **Search Results Landing Page**, specify the URL for your Search Results page. +1. (Optional) Select **Wait for Interactive** if you want Klevu to initialize only after the page has loaded. +1. Select Save. +1. Go back to the Klevu Integration page in the Klevu Shopify App. +1. Select **Refresh page** to verify that Klevu Javascript was installed successfully. +1. 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. +1. 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. +1. Select **Save**. +1. You must also disable the Shopify search suggestions. To do this, select the header. The header properties are displayed. +1. From **Theme Settings**, uncheck **Enable search suggestions**. +1. Select **Save**. + +## Step 5 - Integrate Klevu with Studio + +Once you have configured Shopify with Klevu, you need to integrate Klevu with Studio. See [Integrating Klevu](/docs/studio/Integrations/klevu/getting-started). \ No newline at end of file diff --git a/docs/studio/sign-up/shopify.md b/docs/studio/sign-up/shopify.md index 230b049e..2cc99e7c 100644 --- a/docs/studio/sign-up/shopify.md +++ b/docs/studio/sign-up/shopify.md @@ -39,4 +39,6 @@ Once you have installed Elastic Path Studio, we recommend checking your branding 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 an 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). \ No newline at end of file +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). \ No newline at end of file From 0010e45aa695cc026804d8768ae803e3ca9ac93a Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 12:29:32 +0100 Subject: [PATCH 07/10] first draft --- docs/studio/Integrations/epcc.md | 4 +- .../sign-up/getting-started-with-epcc.md | 40 ------------------- docs/studio/sign-up/overview.md | 4 +- 3 files changed, 5 insertions(+), 43 deletions(-) delete mode 100644 docs/studio/sign-up/getting-started-with-epcc.md diff --git a/docs/studio/Integrations/epcc.md b/docs/studio/Integrations/epcc.md index df10aca6..adce3785 100644 --- a/docs/studio/Integrations/epcc.md +++ b/docs/studio/Integrations/epcc.md @@ -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/sign-up/getting-started-with-epcc.md b/docs/studio/sign-up/getting-started-with-epcc.md deleted file mode 100644 index 7fe24cc2..00000000 --- a/docs/studio/sign-up/getting-started-with-epcc.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Studio with Elastic Path Composable Commerce -nav_label: Studio with Elastic Path Composable Commerce -sidebar_position: 20 ---- - -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. -- Ensure that you have a paid plan in [Studio](https://app.unstack.com/) account. -- Ensure that you have created the following items in Commerce Manager for seamless integration into the Studio storefront: - - [Products](/docs/commerce-manager/product-experience-manager/Products/overview) - - [Pricebooks](/docs/commerce-manager/product-experience-manager/pricebooks/pxm-pricebooks) - - [Hierarchies](/docs/commerce-manager/product-experience-manager/hierarchies/creating_hierarchies) - - [Templates](/docs/commerce-manager/product-experience-manager/extending-products/templates) - - [Catalogs](/docs/commerce-manager/product-experience-manager/catalogs/catalog-configuration) -- Ensure that you have configured [Elastic Path Payments Powered by Stripe](/docs/commerce-manager/payments/ep-payments-powered-by-stripe) in Commerce Manager. -- Ensure that the Stripe gateway is enabled in Studio to successfully perform the checkout process. For more information, see [Stripe Integration](/docs/studio/Integrations/Integrating-stripe). - -## Procedure - -1. Log into Commerce Manager. -1. Go to **SYSTEM** > **Application keys** to create your new API keys. See [Application keys](/docs/commerce-manager/application-keys/application-keys-cm). -1. Log into Studio. -1. Go to **Settings** > **Integrations**. -1. Navigate to **Payment & Storefront**. -1. Select **+** next to **Elastic Path**. -1. Enter the following details that you generated from step 2. - - - **Store ID** - - **Client ID** - - **Client Secret** - - **API Base URL** - -1. Select **Connect account** to save your changes. -1. Go to **Storefront** to confirm that all products and categories are successfully integrated from Commerce Manager into Studio. - -Under **Content** > **Website**, you can see **Checkout** and **Thank You** pages are automatically created and ready to use. You can modify them as needed. diff --git a/docs/studio/sign-up/overview.md b/docs/studio/sign-up/overview.md index 68551c28..8e478c90 100644 --- a/docs/studio/sign-up/overview.md +++ b/docs/studio/sign-up/overview.md @@ -11,5 +11,5 @@ There are several ways to get started with Studio. You can use Studio with your | 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. | -| 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/). | +| 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/). | From 4e3026aaa2aeae0bb91036c044893e1adeb09609 Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 13:03:52 +0100 Subject: [PATCH 08/10] first draft --- .../sign-up/shopify-klevu/_category_.json | 4 ++ .../{ => shopify-klevu}/shopify-klevu.md | 0 docs/studio/sign-up/shopify.md | 44 ------------------- docs/studio/sign-up/shopify/_category_.json | 4 ++ docs/studio/sign-up/shopify/shopify-app.md | 14 ++++++ docs/studio/sign-up/shopify/shopify-store.md | 21 +++++++++ docs/studio/sign-up/shopify/shopify-studio.md | 15 +++++++ 7 files changed, 58 insertions(+), 44 deletions(-) create mode 100644 docs/studio/sign-up/shopify-klevu/_category_.json rename docs/studio/sign-up/{ => shopify-klevu}/shopify-klevu.md (100%) delete mode 100644 docs/studio/sign-up/shopify.md create mode 100644 docs/studio/sign-up/shopify/_category_.json create mode 100644 docs/studio/sign-up/shopify/shopify-app.md create mode 100644 docs/studio/sign-up/shopify/shopify-store.md create mode 100644 docs/studio/sign-up/shopify/shopify-studio.md diff --git a/docs/studio/sign-up/shopify-klevu/_category_.json b/docs/studio/sign-up/shopify-klevu/_category_.json new file mode 100644 index 00000000..84ee63d3 --- /dev/null +++ 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.md b/docs/studio/sign-up/shopify-klevu/shopify-klevu.md similarity index 100% rename from docs/studio/sign-up/shopify-klevu.md rename to docs/studio/sign-up/shopify-klevu/shopify-klevu.md diff --git a/docs/studio/sign-up/shopify.md b/docs/studio/sign-up/shopify.md deleted file mode 100644 index 2cc99e7c..00000000 --- a/docs/studio/sign-up/shopify.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Studio for Shopify -nav_label: Studio for Shopify -sidebar_position: 10 ---- - -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. - -### Step 1 - Create a Development Store in Shopify - -:::caution - -You must have access to the Shopify Partner dashboard. - -::: - -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. - -### Step 2 - Install the Elastic Path Studio App in Shopify - -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. - -### Step 3 - Check your Studio Branding - -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). - -### Step 4 - Create your Landing Pages - -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). \ No newline at end of file diff --git a/docs/studio/sign-up/shopify/_category_.json b/docs/studio/sign-up/shopify/_category_.json new file mode 100644 index 00000000..b844c310 --- /dev/null +++ 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 new file mode 100644 index 00000000..c8835192 --- /dev/null +++ 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 new file mode 100644 index 00000000..764dfd08 --- /dev/null +++ b/docs/studio/sign-up/shopify/shopify-store.md @@ -0,0 +1,21 @@ +--- +title: Create a Development Store in Shopify +nav_label: Create a Development Store in Shopify +sidebar_position: 5 +--- + +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. + +:::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. \ No newline at end of file diff --git a/docs/studio/sign-up/shopify/shopify-studio.md b/docs/studio/sign-up/shopify/shopify-studio.md new file mode 100644 index 00000000..97ebf1f9 --- /dev/null +++ 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). \ No newline at end of file From d3681840697fc78ab4fbfec97edb9f54cfe5e929 Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 14:09:25 +0100 Subject: [PATCH 09/10] first draft --- .../sign-up/shopify-klevu/configure-klevu.md | 33 +++++++++ .../sign-up/shopify-klevu/install-klevu.md | 14 ++++ .../sign-up/shopify-klevu/klevu-account.md | 16 ++++ .../sign-up/shopify-klevu/klevu-store.md | 15 ++++ .../sign-up/shopify-klevu/shopify-klevu.md | 73 ++----------------- docs/studio/sign-up/shopify/shopify-store.md | 2 - docs/studio/sign-up/shopify/shopify.md | 13 ++++ 7 files changed, 97 insertions(+), 69 deletions(-) create mode 100644 docs/studio/sign-up/shopify-klevu/configure-klevu.md create mode 100644 docs/studio/sign-up/shopify-klevu/install-klevu.md create mode 100644 docs/studio/sign-up/shopify-klevu/klevu-account.md create mode 100644 docs/studio/sign-up/shopify-klevu/klevu-store.md create mode 100644 docs/studio/sign-up/shopify/shopify.md diff --git a/docs/studio/sign-up/shopify-klevu/configure-klevu.md b/docs/studio/sign-up/shopify-klevu/configure-klevu.md new file mode 100644 index 00000000..30b07399 --- /dev/null +++ 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). \ No newline at end of file diff --git a/docs/studio/sign-up/shopify-klevu/install-klevu.md b/docs/studio/sign-up/shopify-klevu/install-klevu.md new file mode 100644 index 00000000..4fa95698 --- /dev/null +++ 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 new file mode 100644 index 00000000..8e0be103 --- /dev/null +++ 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**. \ No newline at end of file diff --git a/docs/studio/sign-up/shopify-klevu/klevu-store.md b/docs/studio/sign-up/shopify-klevu/klevu-store.md new file mode 100644 index 00000000..8bbe73df --- /dev/null +++ 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 index f5a2aff6..187951fb 100644 --- a/docs/studio/sign-up/shopify-klevu/shopify-klevu.md +++ b/docs/studio/sign-up/shopify-klevu/shopify-klevu.md @@ -1,75 +1,14 @@ --- title: Studio for Shopify & Klevu nav_label: Studio for Shopify & Klevu -sidebar_position: 15 +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. -### Step 1 - Install the Klevu -AI Search & Discover App in the Shopify App Store +The following steps provide an overview. -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**. - -### Step 2 - Create a Klevu Account - -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**. - -### Step 3 - Create a Klevu Store - -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**. - -### Step 4 - Configure the Klevu Integration - -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. -1. Select **Integrate Klevu**. -1. You are prompted to add the **API key** and **REST AUTH key** that you copied in step 3. -1. Select **Next**. -1. Select **Confirm**. -1. Select **Integrate**. A list of your Shopify themes is displayed. -1. 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. -1. Select **Embed** to embed the Klevu Javascript. The Shopify theme editor is displayed. -1. From to **Klevu Javascript**, select the following: - - - Javascript for Quick Search - - Javascript for Smart Category Merchandizing - - Javascript for Smart Recommendations - -1. In **Search Results Landing Page**, specify the URL for your Search Results page. -1. (Optional) Select **Wait for Interactive** if you want Klevu to initialize only after the page has loaded. -1. Select Save. -1. Go back to the Klevu Integration page in the Klevu Shopify App. -1. Select **Refresh page** to verify that Klevu Javascript was installed successfully. -1. 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. -1. 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. -1. Select **Save**. -1. You must also disable the Shopify search suggestions. To do this, select the header. The header properties are displayed. -1. From **Theme Settings**, uncheck **Enable search suggestions**. -1. Select **Save**. - -## Step 5 - Integrate Klevu with Studio - -Once you have configured Shopify with Klevu, you need to integrate Klevu with Studio. See [Integrating Klevu](/docs/studio/Integrations/klevu/getting-started). \ No newline at end of file +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/shopify-store.md b/docs/studio/sign-up/shopify/shopify-store.md index 764dfd08..d70b7982 100644 --- a/docs/studio/sign-up/shopify/shopify-store.md +++ b/docs/studio/sign-up/shopify/shopify-store.md @@ -4,8 +4,6 @@ nav_label: Create a Development Store in Shopify sidebar_position: 5 --- -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. - :::caution You must have access to the Shopify Partner dashboard. diff --git a/docs/studio/sign-up/shopify/shopify.md b/docs/studio/sign-up/shopify/shopify.md new file mode 100644 index 00000000..d4da35cb --- /dev/null +++ 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. From 562142644b35f28f64480a7265a6bff0ede2c495 Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 16:31:13 +0100 Subject: [PATCH 10/10] first draft --- docusaurus.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index c45864dc..ec8f7a25 100644 --- 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'},