Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

[TUTORIAL] How to edit Shopify Checkout page?

[Image: ly2kmOy.png]



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 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.
Spoiler (Click to View)

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:
Spoiler (Click to View)

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:
Spoiler (Click to View)

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:
Spoiler (Click to View)

From there you want to edit the language for Checkout & system and search for a Discount placeholder first, here's an image:
Spoiler (Click to View)

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.
Spoiler (Click to View)

Now, here is the download link for the transparent image and psd file so that you can edit it in Photoshop.
DOWNLOAD HERE

That's pretty much all, if you find this helpful please leave a comment below otherwise thread won't be visible to others.


Keywords: Shopify, Shopify checkout, How to edit Shopify checkout page, Boost conversions, conversions, dropshipping, dropshipping conversion booster



[Image: XR1IE6j.png]
Bumping the thread so that others can see it.
If you need help with editing the file or installation process, send me a message.
[Image: XR1IE6j.png]
If you have any ideas for other tutorials, feel free to share them below and I'll get to work.
[Image: XR1IE6j.png]
Bumping the thread so that others can see it.
If you need help with editing the file or installation process, send me a message.
[Image: XR1IE6j.png]
Bumping so that others can see if interested. Currently working on a new tutorial, also for eCommerce.
[Image: XR1IE6j.png]
You can check my other tutorial on How to improve your eCommerce website's SEO.
[Image: XR1IE6j.png]
Edited the thread, added buttons for the previous and next posts.
[Image: XR1IE6j.png]
This is literally what Shopify shows you what to do on their website when you Google "How to customize Shopify checkout". Thanks though I guess?
Professional Shopify Developer with Liquid & JS Experience!
(Oct 4, 2019 08:23 AM)ZombieCake Wrote:  This is literally what Shopify shows you what to do on their website when you Google "How to customize Shopify checkout". Thanks though I guess?

They also give you a PhotoShop template and a premade PNG so that you can just drag and drop your own icons and it will fit perfectly to your screen size? What, you come here to act smart or what? Please don't talk to me ever again, thanks.
[Image: XR1IE6j.png]
(Oct 5, 2019 12:55 AM)passCODE Wrote:  They also give you a PhotoShop template and a premade PNG so that you can just drag and drop your own icons and it will fit perfectly to your screen size? What, you come here to act smart or what? Please don't talk to me ever again, thanks.

Ahh you're one of those....

Again, this info is all readily available on Shopify & eCommerce University.
Professional Shopify Developer with Liquid & JS Experience!
This is great info! Ok sure some said that the info is readily available on the help page but tbh i, for one, never go there unless i'm really confused about something. So a little tut post like this is great!
Thanks!


Possibly Related Threads...
Thread / Author Replies Views Last Post
by GodlypkzJun 19, 2019 07:17 PM 0 121 Jun 19, 2019 07:17 PM
Last Post: Godlypkz
[Wordpress] by Snowf0xOct 14, 2018 02:18 PM 1 121 Oct 14, 2018 02:18 PM
Last Post: Jdxo
by Mesa VerdeAug 5, 2018 07:19 PM 3 135 Aug 5, 2018 07:19 PM
Last Post: sneezing