[TUTORIAL] How to edit Shopify Checkout page?

[TUTORIAL] How to edit Shopify Checkout page? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [TUTORIAL] How to edit Shopify Checkout page? (/showthread.php?tid=6007892)

[TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 14, 2019

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

10 eCommerce SEO Tips to Generate more traffic ---->

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 15, 2019

Bumping the thread so that others can see it.
If you need help with editing the file or installation process, send me a message.

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 16, 2019

If you have any ideas for other tutorials, feel free to share them below and I'll get to work.

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 18, 2019

Bumping the thread so that others can see it.
If you need help with editing the file or installation process, send me a message.

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 20, 2019

Bumping so that others can see if interested. Currently working on a new tutorial, also for eCommerce.

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Sep 24, 2019

You can check my other tutorial on How to improve your eCommerce website's SEO.

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Oct 3, 2019

Edited the thread, added buttons for the previous and next posts.

RE: [TUTORIAL] How to edit Shopify Checkout page? - ZombieCake - Oct 4, 2019

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?

RE: [TUTORIAL] How to edit Shopify Checkout page? - passCODE - Oct 5, 2019

(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.

RE: [TUTORIAL] How to edit Shopify Checkout page? - ZombieCake - Oct 7, 2019

(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.

RE: [TUTORIAL] How to edit Shopify Checkout page? - Kit3 - Feb 23, 2020

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!