Customization options allow you to change the look of your checkout page to fit your brand perfectly. We strive to transform Checkify.pro into a full-fledged checkout page builder and grant you maximum discretion in personalization. Meanwhile, check this article to understand customization features which are available right now.
In this article:
1.1. Preview mode
1. Customization options overview
As for now, you can customize:
wording (via Localization tab (section) in your admin panel)
1.1. Preview mode
You can view your changes through the preview of the Checkout page and the Thank You page. To display your changes, just reload the open preview pages. The changes (your customizations) will be applied immediately.
Please note that some functions are not available in the preview mode, namely, the use of discount codes and automatic translation (for example, detection by IP). The Complete Purchase button will also be deactivated.
Also note that in the preview mode, you cannot test the integrations of third-party services, for example, Facebook Pixel, etc.
2. General settings
In General Settings, you can add extra options for your checkout, such as a "Phone number" field or a custom text bar. To learn how to customize the wording of all the motivators, please have a look at our guide on translating your checkout.
2.1 Optional features
Customization > General Settings tab in the Checkify admin panel
Phone number & Email options
Add a "Phone number" field to the checkout (only for the Default form): if enabled, your customers will see a field for entering their phone number.
Add a "Phone number" field to the checkout and replace "Email" field (only for the Default form): if enabled, your customers will see a field for entering their phone number, and it will replace the "Email" field.
Note: Only one of these two options can be enabled.
The Default shipping form
Note: These options will only work for the Default shipping form. You can always create your own unique shipping form in the Shipping section.
The "Phone number" field on the checkout page is shown below:
The "Phone number" field on the checkout page with replaced "Email" field is shown below:
Adding helper text:
Add helper text below the "Email" field
Add helper text below the "Phone" field
You can add helper text below the "Phone" and "Email" fields. These changes will work for both default and custom shipping forms. You can customize (edit) such a text in the localization settings.
Helper text below the "Email" field is shown below:
Helper text below the “Phone” field is shown below:
Discount input field
By default you will see just two options in Customization section:
(i) Hide discount code field from the shopping card on mobile and (ii) Hide discount code field from the shopping card on desktop.
Once you set the trigger for the first option to Active state, you will get the option of displaying the discount code field outside the shopping card on mobile.
Hide discount code field from the shopping card on mobile
Hide discount code field from the shopping card on desktop
Display discount code field outside the shopping card on mobile
Checkify provides two options:
1) translate by IP country. This is useful when you are selling to countries with mostly one language, such as France, Italy, and others.
2) translate by device language. This is useful when you are selling to countries with multiple languages, such as Canada, Switzerland, and others.
At the same time, you can customize each language individually in the Localization section. Auto-translation will use the custom text data.
Remember, after customizing your non-core languages, we strongly recommend that you activate your base language (Active + Save changes).
The base language will be used if the user's language could not be determined.
Address validation options
ZIP (postal) code validation
Zip (postal) code specific validation is supported for most countries including UK, US, Canada, Japan and many others.
VAT / Tax options
add Tax / VAT charge on order
Taxes are calculated automatically based on the data available in this library: https://taxsummaries.pwc.com/quick-charts/value-added-tax-vat-rates
The tax rate will be calculated also for the USA, depending on the state, based on the data found in this source: https://www.taxadmin.org/assets/docs/Research/Rates/sales.pdf
Please note that taxes are applied to only goods' value, to shipping and offers, etc.
Currency conversion (estimation)
Currency conversion function: Display of the total value of the order additionally in buyer's local currency. The conversion will take place automatically.
If you would like the total amount of the order to be also displayed in the buyer's local currency, then you can enable this option.
Send default order confirmation email: disable this feature only if you use third-party apps for sending order confirmation emails (for example, Klaviyo).
Creating a customer with send email invite to create account: if enabled, with 'create new customer' Shopify will be sending an invite to create an account via email to such a customer. This option will only work if the "Email" field is present on the shipping form.
Preselect the email marketing opt-in: if enabled, the option "Sign up for exclusive offers and news" under the Shipping Details section will be selected by default.
Note: Preselecting marketing opt-in is against GDPR Compliance requirements, which call for positive opt-in for email marketing for EU-based customers. So, we do not recommend turning it on if you sell to the European markets.
Stripe: Use value from Shipping address form in alternative payment methods:
Some payment methods, for example Afterpay, require collection of additional information such as full address, first and last name, etc.
You can let your buyer complete these fields right in the payment form of the selected method, or, if your shipping form allows, collect and then share this information at the stage of entering the data to the appropriate fields of Checkify's shipping form.
Stripe: Initial collapse payment methods:
If enabled, you can collapse all payment methods on the сheckout page and the buyers will see a mode of representation which is more convenient for them. The example is shown in the image below:
Stripe: To display payment methods vertically using an accordion
You can customize the payment elements' layout to fit your checkout flow. The image below shows the same payment element rendered using different layout configurations:
The default state is Tabs. If the trigger (switch) is set as "Active", you can see payment methods on the checkout displayed vertically, as an Accordion.
Display a message field for your buyers on the checkout page: you can enable the option for them to send a message to you right from the checkout page.
The feature is useful for collecting additional information or requests from your customers, for example when they want to customize the product, send the message about a gift wrapping or share other information that you may need to fulfil the order successfully.
The contents of this field will be shown in Notes block on the order's page in your Shopify admin:
You can customize (edit and translate) all the texts related to this option in Localization section.
Display the country name in local language in the appropriate dropdown on the checkout page. For example, the country name "Japan" will be displayed as "日本".
Note: If you use auto-translations or localization mode, then the country dropdown (and the State (region / province) dropdown, if present) for some languages will be translated automatically using the Shopify database.
Display a cart reservation timer (countdown): if enabled, there will be a 10-minute countdown and motivating announcement on the checkout. The background color of the scarcity timer will be set as the defined accent color.
Scarcity timer at the checkout
Enable custom text bar: add custom text to provide a motivational message for your customers.
Note: You can change the background color of the custom text bar in the Design settings.
Hide block name
If you wish to customize the shipping form you can read this article.
Hide shipping options block on checkout page. It is recommended when you have only one shipping option.
Note: The fact that you can hide shipping selection on your customized checkout page does not lift the requirement to create at least one option in the Checkify admin.
If you have just one shipping option (for example, always 'Free'), you can deactivate the appropriate block with selection in order to save your customer's precious time. At the same time, this default option will still be visible in the order summary.
Hide billing address fields block on the checkout page (if your customers don't use this option).
If your customers do not use the billing address block, it is now possible to hide it for good measure. At the same time, by default, content of shipping fields (if available) will be added to the billing fields.
2.2 Checkout links
In this section, it is possible to provide links to your store or landing page (the default link is your_store.myshopify.com) and to legal pages (terms, policies). If you want to remove the link to your store from the logo, just save the value #.
To display a logo with a link, add it separately in the Design Settings section. If the fields for URLs to legal pages are empty, they will not be displayed on the Checkout and Thank You pages.
We recommend to include links to policies, as they are required by law in many countries. Also, you are more likely to win a chargeback dispute if you have terms disclosure on the checkout, and it can be submitted as evidence. You can generate and customize the terms and conditions on Shopify.
Links block in the Checkify admin panel
Once added, the links to your terms of service, policies, etc., appear at the footer of your checkout page.
Footer links example
3. Design settings
3.1 Color options
As for now, you can set custom colors for four elements (areas) of your checkout:
i. Accent color is the color of all the selectors, text links, product quantity labels, product prices & total, labels "Free" for unpaid shipping, and background of the countdown.
ii. Buttons color is the color of all the buttons on the checkout page (including "Complete purchase" button, "Apply the discount" button).
The buttons on the checkout page
iii. Error color is the color of highlighting the incorrectly filled or empty required fields on the checkout page.
Error message highlighting an incorrect phone number
iv. Finally, you can set the color of the background on your Checkout and Thank you page.
Also, you can change: Card color, Text color, Motivator text color and Motivator background color.
3.2 Brand images
Add images to the top of your checkout page. Usually, they display the store logo on the left and trust badges on the right. Trust badges show your customers that your page is legitimate, and their data is collected via secure service providers.
Note: Checkify does not limit the number of trust badges. If you want to add multiple badges, add them all in one image with a transparent background.
An example of the Checkify logo and trust badges
To change brand images, follow these steps.
Go to Customization > Design Settings > Brand images.
Add links to the selected images. The links should end in the image’s format name, like .PNG or .JPEG (with no extra symbols like "&width" etc). Also, you cannot use Google Drive links.
Their ratio should be 4:1 (check your checkout on desktop and mobile right after saving). The images you upload will be resized to 150px at height.
Click on the "Save changes" button.
To store your images, we recommend using Shopify Files. You can access Shopify Files from the Shopify admin panel, Settings tab.
Where to locate Shopify Files
Once you upload the file, click the Link icon, and paste the URL to Checkify.
Copy link to the image
You can change favicon, brand images:
3.3 Fonts section
You can provide up to three blocks of information to convince customers to complete their purchases. Include some info on delivery speed, transaction security, additional benefits like gifts or promo codes, etc. Using this section to display merchant or product reviews is also a good idea.
The Inducements section is displayed at the bottom of the page.
Inducements. Example of usage
5. Offers on Checkout page (pre-upsells)
If you wish read more about pre purchase upsells you can see our article.
6. Offers on Thank You page (post-purchase)
If you wish read more about post purchase offers you can see our article.
7. Add tip
Online tipping gives your customers the option to add a tip to their order on the checkout page.
Customers can add a tip as the value in currency. You can change labels and descriptions to customize the online tipping experience to suit your goals, such as supporting your business financially, participating in fundraising, collecting donations for charity, etc.
More detail you can read in our article.
8. Resolving common issues
🙀 I added the link to the image from Google Drive. The saved image does not appear.
The links from Google Drive would not work. Please upload your image to Shopify Files and copy the URL.
🙀 Can I align the logo to the center of the page?
Yes, add only the Logo header image in Design settings.
🙀 Can I edit the image?
You cannot edit the image directly on Checkify. You can edit it on your device, upload it to Shopify Files and add the link to the appropriate field. Note that the image’s height is restricted to 150px, and the width depends on the size of the image, but usually it is x4.