Your Cart is Empty

by Michael P. Hill

As any experienced Shopify theme user knows, one of the main restrictions of the Shopify platform is that there is 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 Apple Pay, Amazon Payments or PayPal enabled, Shopify places branded buttons near the top of the first page in the checkout process.

Shopify checkout "or" line

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.

Shopify checkout page translation settings

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” and change the wording of the “Continue to payment method” field under the “Checkout & system / Checkout general” subheading.

Edit Shopify checkout button text

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.

Shopify checkout trustmarks alternative

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.

Shopify checkout 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.

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.

<div style=”margin-top: 2em;”>
<h2>Heading text</h2>
<p>Your text here. <a href=”https://www.facebook.com/yourusername” taregt=”_blank”>Facebook link text</a>.</p>
<p><a href=”//link-to-url/” style=”btn”>This text will be in a button</a></p>
<p>More text here. <a href=”//link-to-url”>Another link</a>.</p>
<p><img src=”//url-to-image/file.png” /></p>
<h3>Another heading</h3>
<li><a href=”//link-to-url-1”>First link in a bullet list</a></li>
<li><a href=”//link-to-url-2”>Second link in a bullet list</a></li>
<li><a href=”//link-to-url-3”>Third link in a bullet list</a></li>
<h4>Another heading</h4>
<li>Step 1 in numbered list</li>
<li>Step 2 in numbered list</li>
<li>Step 3 in numbered list</li>

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.

Always consider

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.

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Help or Technical Support?

Instead of posting support questions as a comment on this article, please visit our Help Center to browse frequently asked questions or submit a support request directly to our team.

Get Help & Support Now

Also in Shopify Theme Blog

Buying a Shopify theme: Why setting your expectations is important
Buying a Shopify theme: Why setting your expectations is important
When shopping for a new Shopify theme, there are a variety of  strategies and  ways to use when shopping, but there’s another important factor to consider — what, exactly, should you expect from a Shopify theme?
Read More
Fresh is better: The best tip for updating your Shopify theme — plus more update advice
Fresh is better: The best tip for updating your Shopify theme — plus more update advice

We’re well into 2018 — past the busy holiday season and its aftermath — so now is the perfect time to update your   premium Shopify theme. Before you jump in, however, there are some important things to note about Shopify theme updates.

Read More
What Shopify theme piracy is and why it's bad — plus how to avoid it
What Shopify theme piracy is and why it's bad — plus how to avoid it
A growing problem in the Shopify world is  Shopify theme  piracy — but what exactly is it, why is it bad for the entire Shopify ecosystem and how can you be sure you’re not inadvertently part of the problem?
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …