Secrets to tweaking and customizing Shopify checkout pages

There’s a new version of this article

This article includes information that was accurate at the time of its publication (January 2018). Please refer to this article for the latest information and guidance: Customizing Shopify's checkout pages in 2024

As any experienced Shopify theme user knows, one of the main restrictions of the platform is that there are limited changes you can make to the checkout pages — but there are some “secret” ways to tweak the way these pages look.

To clarify, Shopify does allow all merchants to customize the cart page (this is located at yourdomain.com/cart) through the theme editor (or by modifying the cart-template.liquid file directly), but this is distinct from the checkout pages, which are located at yourdomain.com followed by a number and “checkouts”).

It’s also worth noting that some Shopify stores are set up to bypass the cart page entirely and direct users to the first checkout page automatically.

Why the limitations?

One common question Shopify merchants have is, why you can’t make more changes to the checkout pages? There are a few good reasons for this:

• Regulatory, security and compliance issues restrict how checkout pages can look and function as well as what can be included.
• Because the same checkout pages are used across all Shopify stores (not including Shopify Plus stores, which have more options when it comes to this page), Shopify has been able to refine the checkout process to optimize conversions.

Modifying your checkout page: The ‘Or’ text line

If you have the Express Checkout buttons enabled: Apple Pay, Shop Pay, Google Pay, Amazon Payments or PayPal, Shopify places branded buttons near the top of the first page in the checkout process.

However, if your customer prefers to pay with a credit card, it is sometimes difficult for them to tell that this is possible — and they may abandon the checkout assuming, often incorrectly, that you only accept the payment methods shown here.

To combat this, Shopify outputs the word “Or” in rather small and light type under these alternate payment buttons.

The problem many store owners face, however, is that not all customers see this or understand that it means they can enter a credit card number later in the process.

There is, however, one alternative to this that can often help — changing the word “Or” to be more detailed. For example, you may change it to read “Or continue to pay with your credit card” or similar language.

To make this change:

• First, open the language editor by following these steps.
• Then, enter "Checkout alternative payment method banner" in the “filter translations” field. 
• The page should update. Look for the field labeled as the “Or” field under the “Checkout & system / Checkout alternative payment method banner” heading.
• Change this to read something like "Or check out using your credit card" or whatever wording you’d like to use.

One thing to note: while some translation fields will accept HTML code that would allow you to add credit card logos here, unfortunately this is not possible in this field. However, in many case just having more text than just “or” here makes it visually “heavier” so more shoppers will see it.

Another good alternative to try is to change the text here to include the names of the cards you accept in this field, such as “Or use Visa, MasterCard, American Express or Discover.” Although this isn’t the same as showing the more familiar card logos, since most major credit card logos are variations of the card names, outputting the name here can be almost as effective.

Changing the ‘Continue to payment method’ button

Like the solution above, another way to signal that you accept other payment methods is to change the text on the large button on the first checkout page to clarify that you accept credit cards.

To do this:

• In your Language Editor under the “Checkout & system” tab, use the filter to search for “Continue to payment method”
• Change the wording of the “Continue to payment method” field under the “Checkout & system / Checkout general” subheading.

You can also change the text of most other buttons within the checkout process by using the same language settings update technique.

Cart security message

Another common request is to add logos or trustmarks on the page where users enter credit card numbers ensuring them that the transaction is secure and processed via SSL. Shopify does output “All transactions are secure and encrypted” just above where shoppers enter credit card details.

This sentence can be updated with additional assurances by again using the language editor and filter tool:

• Search by “All transactions are secure and encrypted” and look for “Card security notice” under the “Checkout & system / Checkout payment” heading.
• You can update this to read “We never store your credit card number and your payment is secure” or something similar (assuming this is true with the payment gateway you are using).

Unfortunately, Shopify doesn’t allow you to use this field to output logo images or other advanced HTML formatting, but again, sometimes having additional or more specific text here can be a good move.

Adding more information to the confirmation page

Although this tweak doesn’t affect conversions since it appears after an order is completed, using the “additional scripts” to output custom content can still be an effective marketing tool.

Also unlike most of the other tricks discussed here, this setting is outside of the language settings.

To update this field, go under Settings > Checkout and find the “Additional scripts” field.

This field is designed to allow you to insert “invisible” tracking code for Facebook Ads, Google Analytics and other similar tools.

However, it can also accept and output most HTML tags on the confirmation page.

Please note: Custom edits to the "additional scripts" field is only possible for stores that were created before January 30th, 2019. This field has since been updated and can not be used to add in customizations. 

This “hack” can be used to output a variety of content, including a mix of text, images and links:

• Links to your social media accounts to encourage users to follow or like you
• Information about what happens next, which can be particularly effective if you sell customizable items or have a unique fulfillment process
• A handful of links to your most popular blog posts to continue engagement

To get you started, here’s a sample HTML snippet that shows how to output a variety of text, buttons, lists, images and more.

A few important notes:

• It’s best to include all CSS inline since your theme’s main stylesheet won’t apply to this page.
• You can still include tracking code HTML and JavaScript in this field. For ease of use, keep any custom code meant to be seen near the top and tracking codes below.
• Be sure to test your code on both desktop and mobile to ensure it doesn’t break the checkout layout.

Consider best practices

Once you discover the ability to change the language settings for your checkout page, it can be tempting to start adjusting every field you can, especially since this is one of the few things you can customize for checkouts.

However, keep in mind that the default text is based on industry best practices. In many cases, the default text Shopify offers is based on their own testing and experience with labels to determine what phrases work best in ecommerce.

While tweaking the text to better appeal to your customer base or match your brand can sometimes be very effective, it’s also important to ensure that users can still clearly understand what each component of your checkout pages do.

For example, let’s say you sell designer clothing and have a quirky, offbeat voice in your product copy. You might be tempted to change the default “Complete order” button text to say something like “Send ‘em my way.”

While this is clever, it’s also not as clear or straightforward as “Complete order” so it may be worthing using more conventional wording when it comes to key calls to action.