How to add a custom message on the cart page?

[Nickyb]

Hi

How can I make a custom message on the cart page? I would like to make “Please note that anything ordered after 12/12/2020 cannot be guarantee to be delivered by Christmas”

If someone could offer specific instructions it would be greatly appreciated.

Thanks!

[Maulik_Patel]

Hello @Nickyb

To add note there is multiple methods. Most of themes contains cart.liquid or cart-template.liquid files so from that you can add the static text. Please find below example for the Debut theme.

Example:

Screenshot: https://prnt.sc/w3tp87

Note: As per the theme structure you need to add custom CSS for the fonts etc to match the current theme flow.

[Nickyb]

Thanks @Maulik_Patel

Do you know how can I change the colour to red or highlight i?

[Oakleafinfoway]

Hello @Nickyb

Welcome to the Shopify Community!

This is Jay from Oakleaf Infoway. I would love to help you with the same.

I just need your collaborator access to announce your offer and notes on the cart page.

If you wish to move forward, you can reach me anytime here is my official email Id: jay@oakleafinfoway.com

Thanks

[Maulik_Patel]

Hello @Nickyb

Just add class in the html tag & add css in the theme.scss.liquid file.

Screenshot 1: https://prnt.sc/w3unja
Screenshot 2: https://prnt.sc/w3uohw

Note: If helpful then please Like and Accept Solution.

[thehonesthoven]

This is great.

Can you help me know how to move this note up up under the date selection and on two lines instead of a running single line? Also - is there an easy way to change the color so it subtly stands out?

I

[Maulik_Patel]

Hello @thehonesthoven

Go to Sections > cart-template.liquid file and follow below steps.

1. Find the “cart-subtotal” class in file.
2. Then move this class “cart__shipping rte” div to above this class “cart-subtotal” div.
3. Then add custom class to the note div.
   Example = “cart__shipping rte custom_delivery_notice”
4. Then go to Assets > theme.scss.liquid file & add below css.

.cart__shipping.rte.custom_delivery_notice {
    font-size: 10px;
    color: #bf0711;
}

Reference Image:

Final Code will be look like this image:

Note: If you don’t want to reduce the font then you need change the width of note box grid. And need to add CSS accordingly.

If helpful then please Like and Accept Solution.