Use cases

Create your Cloud Service instance using the following options:

1. Select Sandbox in the Enviornment dropdown.
2. Select Adobe Store in the Test data dropdown.

Log in to your Adobe Experience Cloud account

Set up your Cloud Service storefront using the following options:

1. Select adobe-commerce/adobe-demo-store for the template.
2. Select Pick an available instance (Mesh -> SaaS) for the connection method.

In the Commerce Admin, navigate to Stores > Settings > Configuration > Payment Methods.

In the General Configuration section, enter your Payment Services Sandbox ID and Payment Services Sandbox Key. You can get these IDs by following the steps described in Sandbox onboarding

Set the Enable dropdown to Yes.

Click Save Config.

Go to the storefront you created in the prerequisites.

Find and select a product. Make any necessary customization selections. Then click Add to cart.

{width="600" modal="regular"}

Select the cart icon to view your cart.

{width="600" modal="regular"}

Click Checkout.

{width="600" modal="regular"}

Enter the required contact details and shipping information. You can use fictional information for this order.

To checkout, select Check / Money Order. If you want to use a credit card, use one of the test cards provided by Paypal. You can use these with any future expiration date and any CVC.

{width="600" modal="regular"}

{width="600" modal="regular"}

Click Place Order.

Open the Commerce Admin: <your store URL>/admin.

Log in using your Adobe ID.

Navigate to Sales > Orders.

{width="600" modal="regular"}

Look for the order you placed and confirm the details.

{width="600" modal="regular"}

Open the storefront you created in the prerequisites.

Open Storefront Builder. By navigating to https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md.

Open the Index page.

Below the Carousel block, enter a new title by editing the “Welcome to the Adobe Store Demo” line.

Click the send icon and click Preview.

Review the preview page and click Publish.

Refresh the storefront page and confirm that your changes are now live.

In Storefront Builder, select your index page and click Copy.

Create an experiments folder under the main folder, by clicking the New button and selecting Folder.

Create a folder named 1234 in the experiments folder.

Paste the two copies of the index page into the 1234 folder.

Open each page and rename them “homev1” and “homev2”. These are your challengers.

Modify each page to include different content. For example, change the hero image or the text. You need to be able to identify the differences between each page.

Publish each of your challenger pages.

Open your control page, the original index page.

Add a new block with the title metadata.

Add the following information to the rows of the metadata block

• Title - Adobe Commerce

• Description - A web store

• Experiment - 1234

• Experiment Variants

  • https://<your-site>.aem.live/experiments/1234/indexv1
  • https://<your-site>.aem.live/experiments/1234/indexv2

{width="600" modal="regular"}

Open an incognito or private browsing window and navigate to your main page.

Close the private browsing window and repeat the previous step. Each time you open the page, you will see a random variant that you created.

Open the storefront you created in the prerequisites and navigate to an item you want to change. Note the items SKU or Product Code.

Open AEM Assets, by selecting it in the Adobe Experience Cloud.

{width="600" modal="regular"}

Click Assets.

{width="600" modal="regular"}

Search for the item by SKU or Product Code.

Select the item you want to edit and click Open in Adobe Express.

{width="600" modal="regular"}

In the Image panel, select Insert object.

{width="600" modal="regular"}

In the text box, describe the image you want to add. For example, “snowy pine trees”.

{width="600" modal="regular"}

Adjust the Brush size and draw where you want to add the generated image. For this example, draw around the existing object to select the background.

Click Generate to view the results.

Choose from the different results, by selecting the desired option and clicking Keep.

Click Your Stuff to return to the image editor.

Click Save to specify the image type.

Click Save again to save the changes.

In the Save asset dialog, select the Commerce Destination folder.

{width="600" modal="regular"}

Click Save as new asset to save the image.

From the Navigation Panel of AEM as a Cloud Service, select Assets > Files > Commerce and click on the asset you created in the previous section.

{width="600" modal="regular"}

Click Properties.

{width="600" modal="regular"}

Select the Commerce tab.

{width="600" modal="regular"}

Ensure that the Does it exist in Adobe Commerce? field is set to Yes.

Click Add and enter the product SKU you want to add the asset to.

{width="600" modal="regular"}

Select the position for the asset and the asset type.

Select the Basic tab and change the Review Status tab to Approved.

{width="600" modal="regular"}

Click Save & Close.

In the Adobe Commerce Admin, navigate to Catalog > Products.

Select the product you added the image to in the previous section.

Expand the Images and Videos section.

{width="600" modal="regular"}

Confirm that your image is now available in the list of images.

Return to your storefront and navigate to the page for the modified product.

Confirm that the new image appears.

{width="600" modal="regular"}

Open your storefront site using the Universal Editor.

Select the block of text you want to edit.

In the Properties panel, click Generate Variations.

Click the Generate button.

Select or customize the generated text.

Click Publish to update your storefront.

Open Generate Variations

Select the Hero Banner template.

In the Explain user interaction textbox, enter: “Experience for Adobe employees and partners to buy Adobe-branded gear!”.

In the URL for domain knowledge, enter www.adobestore.com.

Click Generate.

Select a content variation and click Generate Image.

From the Image size dropdown, select Widescreen (16:9).

From the Content type dropdown, select Photo.

For the Style reference image, select the existing Adobe store banner.

Select the generated image that you want to use and click Save.

Repeat this process with other reference images to generate more variations.