1

I am new to Magento and I am trying to do some small modifications on the Magento 2's Checkout shipping methods page - to add an image right after the shipping description.

A link tutorial or a brief description will really help.

Thank you in advance.

1 Answer 1

0

Magento 2 development can be quite complex. A common option worth evaluating for this type of objective is a third party extension. These can be purchased either via the Magento Marketplace or direct from a vendor. Prior to purchasing an extension note trial/refund terms in case a particular extension does not work out.

The example design has a larger scope than the stated goal of adding an image to a shipping method. This is because the design contains extra copy not native to Magento. I'm just going to provide my thoughts on the lightest weight way to add and icon to a specific shipping method.

To conform to best practices by not modifying any core files you will first need to Create a new storefront theme.

Next, you can use the simple ways to customize a theme's styles and use the _extend.less to add additional styles.

In _extends.less you can apply CSS styles to the label of a shipping method. For example, the flat rate shipping method:

label[for="s_method_flatrate"] {
   background-image: url('@{baseDir}images/truck.png');
   background-repeat: no-repeat;
   background-position: right bottom;
   ...other styles to meet display needs...
}

As you need more control Magento provides additional customization tools to developers. If you need to alter markup then the next layer is overriding templates files via the theme. If all else fails creating custom extension provides a high level of customization options but with added complexity.

Certified Magento development training is available at Magento U.

All that said for a common need, like altering shipping options/display, the fastest and least cost option is usually a commercial extension.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.