diff --git a/docs/user-guide/configuration/checkout-forms.md b/docs/user-guide/configuration/checkout-forms.md index 6606c6d7..eda94211 100644 --- a/docs/user-guide/configuration/checkout-forms.md +++ b/docs/user-guide/configuration/checkout-forms.md @@ -56,27 +56,29 @@ Forms are made of steps and fields. You can add a new step by clicking on Add Ne On the first tab of the modal window, fill the content of your form's step. Give it an ID, a name and a description. These items are mostly used internally. -![Checkout form step](/img/config/checkout-form-step.png) +![Checkout form step content tab](/img/config/checkout-form-step-content.png) Next, set the visibility of the step. You can choose between "Always show", "Only show for logged in users" or "Only show for guests". -![Checkout form step](/img/config/checkout-form-step.png) +![Checkout form step visibility tab](/img/config/checkout-form-step-visibility.png) Finally, configure the step style. These are optional fields. -![Checkout form step](/img/config/checkout-form-step.png) +![Checkout form step style tab](/img/config/checkout-form-step-style.png) Now, it's time to add fields to our first step. Just click to Add New Field and select the type of section you want. -![Checkout form step with fields](/img/config/checkout-form-step.png) +![Checkout form step with fields](/img/config/checkout-form-step-with-fields.png) Each field has different parameters to be filled. For this first entrance, we will select the "Username" field. -![Checkout form step](/img/config/checkout-form-step.png) +![Field type selection dropdown](/img/config/checkout-form-field-type-dropdown.png) -![Checkout form step](/img/config/checkout-form-step.png) +![Username field content settings](/img/config/checkout-form-username-content.png) -![Checkout form step](/img/config/checkout-form-step.png) +![Username field visibility settings](/img/config/checkout-form-username-visibility.png) + +![Username field style settings](/img/config/checkout-form-username-style.png) You can add as many steps and fields as you need. To display your products for your customers to pick one, use the Pricing Table field. If you want to let your clients choose a template, add the Template Selection field. And so on. @@ -86,9 +88,9 @@ _**Note:** username, email, password, site title, site URL, order summary, payme While you are working on your checkout form, you can always use the Preview button to see how your clients will see the form. You can also alternate between view as an existing user or a visitor -![Checkout Form save](/img/config/checkout-form-save.png) +![Checkout Form preview button](/img/config/checkout-form-preview-button.png) -![Checkout Form editor](/img/config/checkout-form-editor.png) +![Checkout Form preview modal](/img/config/checkout-form-preview-modal.png) Finally, on Advanced Options you can configure the message for the "Thank You" page, add snippets to track conversions, add custom CSS to your checkout form or restrict it to certain countries. @@ -157,10 +159,6 @@ Before adding the Period Selection field, make sure your products have price var ![Period Selection field settings](/img/config/period-selection-field-settings.png) -You can also configure the field options directly: - -![Period selection field options](/img/config/period-selection-field-options.png) - 6. Choose a **Period Selector Template** (Clean is the default, which renders a simple styled selector ready for custom CSS). 7. Click **Save Field**. diff --git a/docs/user-guide/configuration/customizing-your-registration-form.md b/docs/user-guide/configuration/customizing-your-registration-form.md index 7842f666..78c1ea58 100644 --- a/docs/user-guide/configuration/customizing-your-registration-form.md +++ b/docs/user-guide/configuration/customizing-your-registration-form.md @@ -83,23 +83,23 @@ Forms are made of steps and fields. You can add a new step by clicking on **Add On the first tab of the modal window, fill the content of your form’s step. Give it an ID, a name and a description. These items are mostly used internally. -![Checkout step content tab with ID, name, and description](/img/config/checkout-form-step.png) +![Checkout step content tab with ID, name, and description](/img/config/checkout-form-step-content.png) Next, set the visibility of the step. You can choose between **Always show** , **Only show for logged in users** or **Only show for guests**. -![Checkout step visibility options](/img/config/checkout-form-step.png) +![Checkout step visibility options](/img/config/checkout-form-step-visibility.png) Finally, configure the step style. These are optional fields. -![Checkout step style configuration](/img/config/checkout-form-step.png) +![Checkout step style configuration](/img/config/checkout-form-step-style.png) Now, it’s time to add fields to our first step. Just click to **Add New Field** and select the type of section you want. -![Add New Field button](/img/config/checkout-form-editor.png)![Field type selection dropdown](/img/config/checkout-form-step.png) +![Add New Field button](/img/config/checkout-form-step-with-fields.png)![Field type selection dropdown](/img/config/checkout-form-field-type-dropdown.png) Each field has different parameters to be filled. For this first entrance, we will select the **Username** field. -![Username field configuration](/img/config/checkout-form-step.png)![Username field parameters](/img/config/checkout-form-step.png)![Username field additional settings](/img/config/checkout-form-step.png) +![Username field configuration](/img/config/checkout-form-username-content.png)![Username field parameters](/img/config/checkout-form-username-visibility.png)![Username field additional settings](/img/config/checkout-form-username-style.png) You can add as many steps and fields as you need. To display your products for your customers to pick one, use the Pricing Table field. If you want to let your clients choose a template, add the Template Selection field. And so on. @@ -109,7 +109,7 @@ _**Note 2:** username, email, password, site title, site URL, order summary, pay While you are working on your checkout form, you can always use the Preview button to see how your clients will see the form. You can also alternate between view as an existing user or a visitor. -![Preview button on the checkout form editor](/img/config/checkout-form-editor.png)![Checkout form preview as visitor or existing user](/img/config/checkout-form-editor.png) +![Preview button on the checkout form editor](/img/config/checkout-form-preview-button.png)![Checkout form preview as visitor or existing user](/img/config/checkout-form-preview-modal.png) Finally, on **Advanced Options** you can configure the message for the **Thank You** page, add snippets to track conversions, add custom CSS to your checkout form or restrict it to certain countries. diff --git a/static/img/config/checkout-form-field-type-dropdown.png b/static/img/config/checkout-form-field-type-dropdown.png new file mode 100644 index 00000000..a4767b92 Binary files /dev/null and b/static/img/config/checkout-form-field-type-dropdown.png differ diff --git a/static/img/config/checkout-form-preview-button.png b/static/img/config/checkout-form-preview-button.png new file mode 100644 index 00000000..ba36cb65 Binary files /dev/null and b/static/img/config/checkout-form-preview-button.png differ diff --git a/static/img/config/checkout-form-preview-modal.png b/static/img/config/checkout-form-preview-modal.png new file mode 100644 index 00000000..6bd4566f Binary files /dev/null and b/static/img/config/checkout-form-preview-modal.png differ diff --git a/static/img/config/checkout-form-step-content.png b/static/img/config/checkout-form-step-content.png new file mode 100644 index 00000000..60800725 Binary files /dev/null and b/static/img/config/checkout-form-step-content.png differ diff --git a/static/img/config/checkout-form-step-style.png b/static/img/config/checkout-form-step-style.png new file mode 100644 index 00000000..909eef0d Binary files /dev/null and b/static/img/config/checkout-form-step-style.png differ diff --git a/static/img/config/checkout-form-step-visibility.png b/static/img/config/checkout-form-step-visibility.png new file mode 100644 index 00000000..f502cf01 Binary files /dev/null and b/static/img/config/checkout-form-step-visibility.png differ diff --git a/static/img/config/checkout-form-step-with-fields.png b/static/img/config/checkout-form-step-with-fields.png new file mode 100644 index 00000000..55f564e0 Binary files /dev/null and b/static/img/config/checkout-form-step-with-fields.png differ diff --git a/static/img/config/checkout-form-username-content.png b/static/img/config/checkout-form-username-content.png new file mode 100644 index 00000000..4be94d5b Binary files /dev/null and b/static/img/config/checkout-form-username-content.png differ diff --git a/static/img/config/checkout-form-username-style.png b/static/img/config/checkout-form-username-style.png new file mode 100644 index 00000000..1ce1975a Binary files /dev/null and b/static/img/config/checkout-form-username-style.png differ diff --git a/static/img/config/checkout-form-username-visibility.png b/static/img/config/checkout-form-username-visibility.png new file mode 100644 index 00000000..c5fc97e4 Binary files /dev/null and b/static/img/config/checkout-form-username-visibility.png differ diff --git a/static/img/config/period-selection-field-options.png b/static/img/config/period-selection-field-options.png deleted file mode 100644 index 12678a74..00000000 Binary files a/static/img/config/period-selection-field-options.png and /dev/null differ diff --git a/static/img/config/period-selection-field-settings.png b/static/img/config/period-selection-field-settings.png index 12678a74..7be5b932 100644 Binary files a/static/img/config/period-selection-field-settings.png and b/static/img/config/period-selection-field-settings.png differ