Edit Shopify checkout page to increase conversion rate
Posted Oct 19, 2019 01:56 PM
As an eCommerce developer (specifically for Shopify platform) I always try to find new ways to improve the websites I create. So today I'd like to share with you a trick that I use on every store that I make. Let's just get back to the past and repeat how we used to edit the checkout page before Shopify patched it.
There was a website called Conversion Pirate that offered a free script that you would paste in the Google Analytics settings in your Shopify dashboard and that way you would get conversion icons with a little bit of text that was actually boosting the conversions. After few months Shopify patched that and the only way you could apply that strategy was by talking to Shopify support to enable Google Analytics settings for your store. Sadly, just a few months later they patched it again so now you can't even get that enabled anymore. Luckily, I played a little bit with the checkout page and figured out a simple solution that has pros and cons but it's still boosting your conversions and making your checkout page look much better and simpler to customer.
Here's how it's done:
First, we want to add conversion boosting icons by uploading a background image to Order Summary. To do this you need to go to Theme customization and in the Theme Settings scroll down to the bottom and click Checkout.
![[Image: 5XRVKFV.png]](https://i.imgur.com/5XRVKFV.png)
![[Image: de81bbeee7640a0475efa787f62d7652.png]](https://i.gyazo.com/de81bbeee7640a0475efa787f62d7652.png)
I created this image with a transparent background and specific size/placement so that it fits the checkout page. You can download the image and also .psd file so that you can edit it, add your own icons or even text. The download link will be at the bottom of this thread.
After adding the image, your checkout page should look something like this:
![[Image: cam5ZKQ.png]](https://i.imgur.com/cam5ZKQ.png)
Sadly, this is visible only to costumers that enter your store from a computer or tablet, for phone users it's not visible, but we did at least something about it.
Now, there's more that can be done about checkout page customization. Look at this image:
![[Image: i3ieJ7p.png]](https://i.imgur.com/i3ieJ7p.png)
You can edit this by going to Actions button next to your theme and then click on the Edit languages, here are the images below:
![[Image: 27d7e5f7c7a1418793e226ade80adec8.png]](https://i.gyazo.com/27d7e5f7c7a1418793e226ade80adec8.png)
![[Image: f95e4aacfdf529801d52ef24324a25a4.png]](https://i.gyazo.com/f95e4aacfdf529801d52ef24324a25a4.png)
From there you want to edit the language for Checkout & system and search for a Discount placeholder first, here's an image:
![[Image: d4916cfbe1d38be8f7a022d08efe34a1.png]](https://i.gyazo.com/d4916cfbe1d38be8f7a022d08efe34a1.png)
There you can type anything you like, but make sure you enter a valid discount code that you previously generated in your discount settings. After we edited that, go ahead and search for Shipping default value and there you can type FREE SHIPPING.
![[Image: 96a30a222b80bf0217ebac602a509262.png]](https://i.gyazo.com/96a30a222b80bf0217ebac602a509262.png)
Now, here is the download link for the transparent image and psd file so that you can edit it in Photoshop.



