Merge pull request #6937 from mattbrailsford/uc-checkout-screenshots

Updated Umbraco Commerce Checkout screenshots

Author: sofietoft

commerce-add-ons/packages/checkout/configuring-umbraco.md

@@ -10,7 +10,7 @@ On the root of these nodes, you can configure a series of options to customize t
 
 ## Step 1: Configuring the Checkout flow
 
-![Overview of some of the different configuration options for customizing the Checkout flow.](../media/checkout/001.png)
+![Overview of some of the different configuration options for customizing the Checkout flow.](../media/checkout/15_configuration.png)
 
 <table><thead><tr><th width="223">Name</th><th>Description</th></tr></thead><tbody><tr><td>Store Logo</td><td>A link to a media item to use as the store logo. If one is not selected, then the store name will be displayed instead.</td></tr><tr><td>Store Address</td><td>The official address of the store. This will be displayed in the footer of all email communications.</td></tr><tr><td>Theme Color</td><td>The color theme to use for the checkout design.</td></tr><tr><td>Collect Shipping Info</td><td>A checkbox to set whether to collect shipping info or not. If deselected, all shipping info-related fields/steps will be removed from the checkout flow</td></tr><tr><td>Order Line Property Aliases</td><td>A comma-separated list of order line property aliases to display in the order summary.</td></tr><tr><td>Checkout Back Page</td><td>The page to go back to when backing out of the checkout flow.</td></tr><tr><td>Terms and Conditions Page</td><td>Defines which page on the site contains the terms and conditions of the store.</td></tr><tr><td>Privacy Policy Page</td><td>The page on the site containing the privacy policy.</td></tr><tr><td>Hide from Navigation</td><td>Checkbox to hide the checkout page from the site's main navigation.</td></tr></tbody></table>
 

commerce-add-ons/packages/checkout/installation.md

@@ -18,7 +18,7 @@ PM> Install-Package Umbraco.Commerce.Checkout
 
 Alternatively, you can also find and install the NuGet package via the NuGet Package Manager.
 
-![Installing Umbraco Commerce Checkout via the NuGet Package Manager.](<../media/checkout/nuget\_package (1).png>)
+![Installing Umbraco Commerce Checkout via the NuGet Package Manager.](<../media/checkout/15_nuget_package_manager.png>)
 
 ## Content Installation
 
@@ -30,13 +30,13 @@ To install the relevant Checkout content follow these steps:
 2. Navigate to the **Settings** section.
 3. Locate the **Checkout Dashboard**.
 
-![The Checkout Dashboard in the Settings section of the Umbraco backoffice.](<../media/checkout/install\_dashboard (1).png>)
+![The Checkout Dashboard in the Settings section of the Umbraco backoffice.](<../media/checkout/15_dashboard.png>)
 
 4. Click the **Install** button.
 5. Select your site's root node which is configured with a Umbraco Commerce store.
 6. Click **Install**.
 
-![The dialog that appears when installing content through the Checkout dashboard.](<../media/checkout/install\_dashboard\_dialog (1).png>)
+![The dialog that appears when installing content through the Checkout dashboard.](<../media/checkout/15_install_modal.png>)
 
 During this install, Umbraco Commerce checkout will perform the following tasks:
 

commerce-add-ons/packages/checkout/screenshots.md

@@ -8,13 +8,14 @@ description: >-
 
 Check out the screenshots below to see what you get with Umbraco Commerce Checkout straight out of the box.
 
-<div align="left">
+<div>
 
-<img src="../media/checkout/checkout_configuration.png" alt="Umbraco Commerce Checkout Settings" width="375">
+<figure><img src="../media/checkout/15_configuration.png" alt="Umbraco Commerce Checkout Settings"><figcaption><p>Umbraco Commerce Checkout Settings</p></figcaption></figure>
 
- 
+ </div>
+ <div>
 
-<figure><img src="../.gitbook/assets/002 (2) (4).png" alt="" width="375"><figcaption><p>Umbraco Commerce Checkout Customer Details</p></figcaption></figure>
+<figure><img src="../.gitbook/assets/002 (2) (4).png" alt=""><figcaption><p>Umbraco Commerce Checkout Customer Details</p></figcaption></figure>
 
 </div>