CHECKOUT SUCCESS PAGE FOR MAGENTO 2

Checkout Success Page

CHECKOUT SUCCESS

PAGE FOR MAGENTO 2

User Guide Version 1.0

1


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


6. Recommended Products ……………………………………………………………….29

7. Continue Button ………………………………………………………………………....32

8. Customer Registration…………………………………………………………………..36

9. Social Share……………………………………………………………………………...38

10. Print Button……………………………………………………………………………..40

IV) Support……………………………………………………………………………………..41

3


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

https://marketplace.magento.com/magezon-module-pagebuilder.html

https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf


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


- 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


1. Rule Information

Where you complete general information about the rule:

7


● 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


2. When to Display

Where you set conditions to display the rule using Magento 2 product conditions:

9


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


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


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


- 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


● 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


Insert variables in backend:

Variables are replaced with relevant info on frontend:

15


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


Choose your wanted order, then in Action column, click Preview to preview the success

page with this order.

17


3.4 Rule Orders

Where you can view and manage orders of customers who landed on the success page

using this rule.

18


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

https://magezon.com/pub/media/productfile/magezon-core-builder-user_guides.pdf


● 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


2. Shipping Method

Used to display shipping method:






21


>> Shipping Method element on frontend:

22


3. Billing Address

Used to display billing address:






23


>> Billing Address element on frontend:

24


4. Payment Method

Used to display payment method:






25


>> Payment Method element on frontend:

26


5. Order Items

Used to display order summary:






27


>> Order Items element on frontend:

28


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


● Widget Title: enter title for the element.


● Title Alignment: choose alignment for the title including Left, Center and Right.


● 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


- Product Options tab: show/hide certain product info:

31


7. Continue Button

Used to display continue shopping button:

- General tab:

● Title: enter button text.

32


- 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


● 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


>> Continue Button element on frontend:

35


8. Customer Registration

Used to display registration button.

- General tab:




36


● Title Spacing: enter spacing (px) between the title and the description.


● 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


9. Social Share

Used to display social sharing buttons including Facebook, Twitter as well as Print button.

38


● 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


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


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

https://www.magezon.com/contact/

mailto:[email protected]

https://magezon.ticksy.com/

https://magezon.ticksy.com/

Documents

CHECKOUT SUCCESS PAGE FOR MAGENTO 2