Skip to content
Visit ShipperHQ.com
  • There are no suggestions because the search field is empty.

How to Theme Enhanced Checkout - Magento

Customize your store's checkout with translations and unique CSS styles

Table of Contents

Overview

Enhanced Checkout (EC) is customizable to fit your store's brand through field translation and custom CSS style overrides. This guide will walk you through translating fields and applying styles to make the checkout experience your own.

How to Translate Enhanced Checkout Fields

To update labels in Enhanced Checkout, like changing "Click and Collect" to "In Store Pickup," you'll have to create and install a custom module in your Magento store. Follow these high-level steps:

  • Create the module folder.
  • Create the etc/module.xml file.
  • Create the registration.php file.
  • Create translation files and update the translation object.
  • Install the module and verify its functionality.

Create the Module Folder Structure

Run the following from your Magento root:

mkdir -p app/code/ShipperHQ/Translation/etc
mkdir -p app/code/ShipperHQ/Translation/view/frontend/layout
mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/js

Create the etc/module.xml File

This translation module requires Enhanced Checkout to be installed. To set this up, create the file:

touch app/code/ShipperHQ/Translation/etc/module.xml

Add the following content to the file:

<?xml version="1.0"?>
<!-- File: app/code/ShipperHQ/Translation/etc/module.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="ShipperHQ_Translation" setup_version="1.0.0">
        <sequence>
            <module name="ShipperHQ_Server"/>
        </sequence>
    </module>
</config>

Create the registration.php File

This file helps Magento locate the module. Create it with:

touch app/code/ShipperHQ/Translation/registration.php

Add this content:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'ShipperHQ_Translation',
    __DIR__
);

Create the Translation Files

Create the file to update display fields in Enhanced Checkout:

touch app/code/ShipperHQ/Translation/view/frontend/ec_translation.js

Edit ec_translation.js to update fields using the SHIPPERHQ_TRANSLATION variable. 

Example:

// File: view/frontend/web/js/ec_translation.js
window.SHIPPERHQ_TRANSLATION = {
  shq: {
    checkout: {
      addressPage: {
        fillAddressFirst: "Please enter your shipping address to see shipping methods.",
        noShippingToYourAddress: "No shipping methods available"
      },
      shipping: {
        pickup: {
          showAllLocations: "Show All Locations",
          clickToShowAllLocations: "Click to show all locations",
          showMap: "Show Map",
          hideMap: "Hide Map",
          change: "Change"
        },
        inStore: "Click & Collect",
        delivery: "Delivery"
      },
      summary: {
        deliversOn: "Delivers",
        pickupAt: "Pickup at"
      }
    }
  }
};

 

Important: Changing this file overwrites all field descriptions. Ensure you provide values for any fields you want displayed. Visit the "Which fields can be modified?" section for more details.

After creating the JavaScript translation file, link it to the page. First, create the layout:

touch app/code/ShipperHQ/Translation/view/frontend/layout/checkout_index_index.xml

Add this content:

<?xml version="1.0"?>
<!-- File: view/frontend/layout/checkout_index_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="ShipperHQ_Translation::js/ec_translation.js"/>
    </head>
</page>

Install the Module

Finally, install the module and ensure everything is functioning:

php bin/magento setup:upgrade

Verify installation by checking the config.php file:

grep ShipperHQ_Translation app/etc/config.php

Which Fields Can Be Modified?

  • shq.checkout.addressPage.fillAddressFirst: Before address entry, rates unavailable
  • shq.checkout.addressPage.noShippingToYourAddress: No rates available
  • shq.checkout.shipping.inStore: In Store Pickup button text
  • shq.checkout.shipping.delivery: Display shipping methods button text
  • shq.checkout.shipping.pickup.showAllLocations: Button text when multiple locations enabled
  • shq.checkout.shipping.pickup.clickToShowAllLocations: Hover text for button with multiple locations
  • shq.checkout.shipping.pickup.showMap: Shows when map is hidden
  • shq.checkout.shipping.pickup.hideMap: Shows when map is visible

How to Apply Custom Styles to Enhanced Checkout

To apply custom styles, upload a CSS file targeting the desired elements.

Create a Module

Follow similar steps as the translation module, but skip creating JavaScript files. Your module should include:

  • view/frontend/layout/checkout_index_index.xml
  • etc/module.xml
  • registration.php

Add Your Custom Styles

Create override.css by performing the following:

mkdir -p app/code/ShipperHQ/Translation/view/frontend/web/css
touch app/code/ShipperHQ/Translation/view/frontend/web/css/override.css

Update view/frontend/layout/checkout_index_index.xml so it includes the CSS (you can keep the JS link if you’re translating too):

<?xml version="1.0"?>
<!-- File: view/frontend/layout/checkout_index_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="ShipperHQ_Translation::css/override.css"/>
        <!-- Optional (only if using translations too): -->
        <!-- <script src="ShipperHQ_Translation::js/ec_translation.js"/> -->
    </head>
</page>

You can name the CSS file anything, as long as it matches the name in checkout_index_index.xml.

Target elements in override.css to customize the style, for example:

/* File: view/frontend/web/css/override.css */

/* Example: tint the main container text */
shq-shipping-view {
  color: green !important;
}

/* Example: background for the methods container */
shq-shipping-view div.shpmt-cont {
  background-color: #bbb !important;
}

After adding your CSS, install or update the module to see changes:

php bin/magento setup:upgrade
# In production mode you may also need:
# php bin/magento setup:static-content:deploy -f
# php bin/magento cache:flush

What Cannot Be Changed

Some aspects of Enhanced Checkout remain fixed, including:

  • HTML structure
  • Data flow

For questions or further assistance, feel free to reach out.