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.
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 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:
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:
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:
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.
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:
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.Check out Flex, our most customizable Shopify theme
We’re delighted to announce that Archetype Themes merchants now benefit from Theme Updater’s unique features. Merchants using Impulse, Expanse, Motion, or Streamline themes now benefit from the basic advantages of the Free plan or the premium features of the Pro plan.