Skip to main content

Customise UI

In this article, you'll learn how to customize your checkout interface to enhance user experience and boost conversions.

Priya Kumari avatar
Written by Priya Kumari
Updated over a week ago

Welcome to this tutorial on setting up your customized UI in Shopflo. By following these steps, you'll be able to personalize your user interface to better suit your store.

Step 1: After logging in, click on the Customize UI option located above the settings option.

Image

Step 2: Start with the first option, Elements. Enabling this toggle allows the repeated customer address to pre-fill on the payment page.

Image

Image

Step 3: The second option involves the MRP price. Clicking on this checkbox will strike through the MRP price, revealing the new price.

Image

Image

Step 4: In the Order Summary, checking this box allows customers to edit the quantity of the product they want to buy at checkout.

Image

Step 5: Next, we have Trust Patches. These convey your store policies and can be customized to suit your brand requirements. A maximum of four patches can be displayed at the bottom of your checkout page.

Image

Step 6: Introducing the trust badges:

Eg :Star: Represents a star rating from customers. For example, a 4.7 star rating from about 20,000 customers.

Image

- Smiley: Represents the number of happy customers. For example, 50,000 happy customers.

Image

Image

- Clock: Represents secure payment.

Image

Image

Image

- Vehicle: Represents express or one-day delivery.

Image

Image

- Globe: Represents Pan India delivery or worldwide delivery.

Image

Image

- Box Icon: Represents easy returns.

Image

Image

- Clock: Represents on-time delivery.

Image

Step 7: After customizing the trust patches, click Save.

Image

Step 8: In the Brand section, upload your brand and the primary theme color code, which you can fetch from your Shopify store login.

Image

Step 9: Customize the Login Page. Add a banner and a color code to match your store. You can also promote any discounts here.

Image

Step 10: Customize the appearance of your Coupons. Choose between coupon cards or an entry field.

Image

Image

Image

Step 11: After creating discounts in the Discounts section of the dashboard, you can display them here.

Image

Image

Image

Image

Image

Image

Step 12: Add the discount by typing the discount title or by clicking on it and saving it. You can change the order of the discounts by dragging them.

Image

Image

Image

Image

Image

Image

Image

Image

Step 13: Click Save to save your changes.

Image

Image

Step 14: Customize the Edges Page. Add a banner, promote a discount, and share your standard delivery timeline.

Image

Image

Image

Step 15: Click Save to save your changes.

Image

Step 16: In the Payment Section, add a banner, promote a discount, and choose how to display your coupons. Once your payment gateway is integrated, you'll see options for COD, Wallet, NET Banking, UPI, and more. You can make these options visible or invisible to customers.

Image

Image

Image

Image

Image

Image

Step 17: Click Save to save your changes.

Image

Image

Step 18: Customize the Order Confirmation Page or Thank You Page. You can change the device view to see how it looks to customers on different devices.

Image

Image

Image

Image

Image

Image

Image

Image

Step 19: Add a banner, color code, order ETD, and help details. You can also view how your trust patches will appear at the bottom of the page.

Image

Image

Image

Image

Image

Image

Step 20: Click Save to save your changes.

Image

That concludes this tutorial on setting up your customized UI in Shop Flow. Thank you for following along, and have a great day!

Did this answer your question?