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.
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:
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.
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.
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.
You can also change the text of most other buttons within the checkout process by using the same language settings update technique.
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.
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.
This “hack” can be used to output a variety of content, including a mix of text, images and links:
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;”>
<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>
<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>
<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:
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.
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.