Checkout Success Page
CHECKOUT SUCCESS
PAGE FOR MAGENTO 2
User Guide Version 1.0
1
Checkout Success Page
Table of Contents
I) Introduction………………………….………………………………………………………. 4
II) Where to Find Extension…………………………………………………………………..5
1. Rule Information …………………………………………………………………………..7
2. When to Display ………………………………………………………..………………...9
3. What to Display …………………..……………………………………………………..10
3.1 Coupon Block ……………………………………………………………………...10
3.2 Checkout Success Page Builder………………………………………………….12
3.3 Preview……………………………………………………………………………...16
3.4 Rule Orders ………………………………………………………………………...18
III) Elements …………………………………………………………………………………...19
1. Shipping Address………………………………………………………………………..19
2. Shipping Method………………………………………………………………………...21
3. Billing Address…………………………………………………………………………...23
4. Payment Method………………………………………………………………………...25
5. Order Items……………………………………………………………………………....27
2
Checkout Success Page
6. Recommended Products ……………………………………………………………….29
7. Continue Button ………………………………………………………………………....32
8. Customer Registration…………………………………………………………………..36
9. Social Share……………………………………………………………………………...38
10. Print Button……………………………………………………………………………..40
IV) Support……………………………………………………………………………………..41
3
Checkout Success Page
I) Introduction
Full of features for designing a perfect checkout success page, Magento 2 Checkout
Success Page extension is the ultimate way to improve post purchase experience,
maintain contact with customers and boost your sales.
● Easily customize checkout success page with drag & drop
● 20+ elements
● 5 pre-built templates
● Show different success pages by conditions
● Display coupon codes
● Dynamic variables
● Fully responsive
● 100% compatible with Magezon Page Builder.
Checkout Success Page extension works based on rules to display different success
pages. In the backend, you need to create a rule that comes with a custom success page.
Customers with orders satisfying this rule will land on corresponding success page.
You can add unlimited rules to display as many success pages as wanted.
NOTE: Checkout Success Page is developed on a core builder based on which we’ve
built all of our builder extensions. The core builder includes elements and settings that all
builder extensions have in common. For detailed guide, please visit:
https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf.
In this guide, we’ll focus on elements and settings that are specific to Checkout Success
Page extension.
4
Checkout Success Page
II) Where to Find Extension After installing the extension, navigate to Marketing > Checkout Success Page >
Rules where you can add a new rule to display a specific success page and view all the
rules you created.
- You can view all the rules that you created in a grid:
5
Checkout Success Page
- On the right-hand corner, you’ll see Add New Rule button. Click the button to add a
new rule. Then you will be redirected to the following page:
6
Checkout Success Page
1. Rule Information
Where you complete general information about the rule:
7
Checkout Success Page
● Enable Rule: turn on the button to activate the rule.
● Rule Name: enter name for the rule.
● Store View: choose store views to apply the rule.
● Customer Groups: choose customer groups to apply the rule.
● From...To…: specify the date range to apply the rule.
● Priority: define the order of priority for the rule by entering a number. If an order
satisfies multiple rules, the success page of the rule with smallest number in
Priority field will be displayed.
8
Checkout Success Page
2. When to Display
Where you set conditions to display the rule using Magento 2 product conditions:
9
Checkout Success Page
3. What to Display
3.1 Coupon Block
Where you set coupon codes to display on your success page.
● Enable Coupon: turn on the button to activate coupon code.
● Select Rule: select a specific cart price rule from the drop-down list. To create a
new cart price rule, please go to Marketing > Promotions > Cart Price Rules.
10
Checkout Success Page
Here, remember to set the rule as a Specific Coupon. The new rule that you’ve created
will appear in the drop-down for you to choose.
If you enter a fixed Coupon Code, then this code will be displayed in the success page. If
you choose to Use Auto Generation, coupon codes will be auto created based on the
Coupon Pattern.
● Coupon Pattern: enter the coupon pattern based on which different coupon
codes will be auto generated for each customer. The pattern follows this rule:
- [3AN] - 3 alphanumeric characters
- [3A] - 3 alpha characters
- [3N] - 3 numeric characters
Eg: THANKYOU-[2AN]-[3A]-[4N] => THANKYOU-H7-GED-3428
11
Checkout Success Page
3.2 Checkout Success Page Builder
Where you create and customize success page for the rule:
- Click the plus icon to add elements. You can view all elements in the popup like this:
12
Checkout Success Page
- Click the icon next to plus icon the select a template. You’ll see all templates in a popup:
● Click drop-down icon to preview a template, like this:
13
Checkout Success Page
● Click plus icon to select the template. The selected template will be displayed in the
builder section and you can customize it the way you want.
NOTE: Checkout Success Page extension allows you to insert variables in builder
section to add more information to the success page. Here are some common variables:
● {{var order.increment_id }} - insert order ID.
● {{var total|raw }} - insert order total value.
● {{var order.getCreatedAtFormatted(2)|raw }} - insert order date.
● {{var coupon.code }} - insert coupon code that you’ve set in Coupon Block section.
14
Checkout Success Page
Insert variables in backend:
Variables are replaced with relevant info on frontend:
15
Checkout Success Page
3.3 Preview
When completing the rule, click Save button on the top right corner to save the rule. After
saving, on the bar at the top of the page, you can see:
● Delete: delete the rule.
● Preview: preview how the success page looks on frontend. When clicking
Preview, you will see a grid containing all orders of your website, like this:
16
Checkout Success Page
Choose your wanted order, then in Action column, click Preview to preview the success
page with this order.
17
Checkout Success Page
3.4 Rule Orders
Where you can view and manage orders of customers who landed on the success page
using this rule.
18
Checkout Success Page
III) Elements NOTE: Here we only list elements that are specific to Checkout Success Page
extension and mention settings that are specific to these elements. For other elements and
settings, you can look at Magezon Core Builder guide.
1. Shipping Address
Used to display shipping address:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
19
Checkout Success Page
● Title Color: choose title color.
● Title Spacing: enter spacing (px) between the title and main content.
● Enter Title Font Size and Title Font Weight (px).
>> Shipping Address element on frontend:
20
Checkout Success Page
2. Shipping Method
Used to display shipping method:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
● Title Color: choose title color.
● Title Spacing: enter spacing (px) between the title and main content.
● Enter Title Font Size and Title Font Weight (px).
21
Checkout Success Page
>> Shipping Method element on frontend:
22
Checkout Success Page
3. Billing Address
Used to display billing address:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
● Title Color: choose title color.
● Title Spacing: enter spacing (px) between the title and main content.
● Enter Title Font Size and Title Font Weight (px).
23
Checkout Success Page
>> Billing Address element on frontend:
24
Checkout Success Page
4. Payment Method
Used to display payment method:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
● Title Color: choose title color.
● Title Spacing: enter spacing (px) between the title and main content.
● Enter Title Font Size and Title Font Weight (px).
25
Checkout Success Page
>> Payment Method element on frontend:
26
Checkout Success Page
5. Order Items
Used to display order summary:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
● Title Color: choose title color.
● Title Spacing: enter spacing (px) between the title and main content.
● Enter Title Font Size and Title Font Weight (px).
27
Checkout Success Page
>> Order Items element on frontend:
28
Checkout Success Page
6. Recommended Products
Used to display recommended products in a carousel:
- General tab:
● Type: choose either Cross-Sell Products or Related Products.
● Total Items: enter the number of products you want to display.
29
Checkout Success Page
● Widget Title: enter title for the element.
● Title Color: choose title color.
● Title Alignment: choose alignment for the title including Left, Center and Right.
● Title Tag: choose heading for the title.
● Show Line: show/hide the line in title. If yes, you will see options for Line Position,
Line Color and Line Width (px).
● Widget Description: enter a short description for the element.
>> Recommended Products element on frontend:
30
Checkout Success Page
- Product Options tab: show/hide certain product info:
31
Checkout Success Page
7. Continue Button
Used to display continue shopping button:
- General tab:
● Title: enter button text.
32
Checkout Success Page
- Button Design tab: used to style the button.
● Button Style: choose from 3 styles: Modern, Flat and Gradient. If you choose
Gradient style, you need to choose Gradient Color 1 and Gradient Color 2.
33
Checkout Success Page
● Button Size: choose from 5 sizes: Mini, Small, Normal, Large and Extra Large.
● Set Full Width Button: set the button to fill full width of the container.
● Choose Border Width (px), Border Radius (px) and Border Style for the button.
● Choose color for button Text, Background and Border when normal or on hover.
● Inline CSS: add custom CSS to customize the button.
34
Checkout Success Page
>> Continue Button element on frontend:
35
Checkout Success Page
8. Customer Registration
Used to display registration button.
- General tab:
● Title: enter title for the element.
● Title Tag: choose heading for the title.
● Title Color: choose title color.
36
Checkout Success Page
● Title Spacing: enter spacing (px) between the title and the description.
● Enter Title Font Size and Title Font Weight (px).
● Enter short Description.
● Button Title: enter text inside the button.
- Button Design tab: similar to that of Continue Button element.
>> Customer Registration element on frontend:
37
Checkout Success Page
9. Social Share
Used to display social sharing buttons including Facebook, Twitter as well as Print button.
38
Checkout Success Page
● Enable/Disable certain buttons with Enable Facebook, Enable Twitter, Enable
Print toggle buttons.
● Enter Facebook Button Text, Twitter Button Text, Tweet Text and Print
Button Text.
● Specify Text Font Size, Text Font Weight and Icon Size (px) inside the button.
>> Social Share element on frontend:
39
Checkout Success Page
10. Print Button
Used to display print button:
- General tab:
● Title: enter button text.
- Button Design tab: similar to that of Continue Button element.
>> Print Button element on frontend:
40
Checkout Success Page
IV) Support If you have any questions or need any support, feel free to contact us via following ways.
We will get back to you within 24 hours since you submit your support request.
● Submit contact form.
● Email us at [email protected].
● Submit a ticket.
● Contact us through Skype: [email protected].
● Contact us via live chat on our website.
41