How To Add A Title In Cart Drawer

How To Add A Title In Cart Drawer

MMast
Trailblazer
182 1 25

Thanks in advance!

I'm looking to add a "Shopping Cart" title at the top of my cart drawer that works when the cart is empty and when there are items in the drawer (same position) and that work's for mobile and pc. I would also like to be able to adjust the text to wherever I need it to (left/right & up/down) that works for both mobile and pc also. Example shown below.

Without items in the cart:

Screenshot 2024-06-21 001340.png

With items in the cart:

Screenshot 2024-06-21 001416.png

https://decemberschild.com/

password: dc

Replies 2 (2)

pwcsangeeta
Shopify Partner
33 4 8

Hello @MMast 

Welcome to shopify community

follow these steps:- 

Step 1:- 
Go to file "settings_schema.json"  find this code " "name": "t:settings_schema.cart.name"," and under setting add this code

{
        "type": "text",
        "id": "cart-title",
        "default": "cart Title",
        "label": "Title"
      },
      {
        "type": "select",
        "id": "cart_text_position",
        "label": "Text Position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      },

  check screenshort
file 1.png 

step 2:- file this file under snippets "cart-drawer.liquid"  add this code

  <div class="cart-drawer__header {{ settings.cart_text_position }}">
<h2 class="drawer__heading">{{ settings.cart-title }}  {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">({{ cart.item_count }})</span>
            {%- endif -%}</h2>


and find this code" <div class="drawer__header">"
under this code remove this code

 <h2 class="drawer__heading">{{ 'sections.cart.title' | t }}</h2>

  check this screen short

file 2.png

last step:- go "base.css" file and add this CSS in the last line

.cart-drawer__header {
    padding: 1.5rem;
}

 

Thanks it after that  you can change the text from the theme settings ------> cart
check screenshort
file 3.png

Please let me know if you have any question

Thanks

round
Shopify Partner
113 18 10




Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) cart-drawer.liquid

add this code in drawer__inner div class

 

<div class="drawer__header">
          <h2 class="drawer__heading">Your Cart <span>(0 Item)</span></h2>
          <button class="drawer__close" type="button" onclick="this.closest('cart-drawer').close()" aria-label="Close">
            <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.06065 6.82812L11.7803 2.10845C11.85 2.0388 11.9052 1.95612 11.9429 1.86513C11.9806 1.77414 12 1.67661 12 1.57812C12 1.47963 11.9806 1.3821 11.9429 1.29111C11.9052 1.20012 11.85 1.11744 11.7803 1.04779C11.7107 0.97815 11.628 0.922906 11.537 0.885215C11.446 0.847524 11.3485 0.828125 11.25 0.828125C11.1515 0.828125 11.054 0.847524 10.963 0.885215C10.872 0.922906 10.7893 0.97815 10.7197 1.04779L6 5.76747L1.28032 1.04779C1.21068 0.97815 1.128 0.922906 1.03701 0.885215C0.946012 0.847524 0.848486 0.828125 0.749995 0.828125C0.651504 0.828125 0.553978 0.847524 0.462984 0.885215C0.371991 0.922906 0.289312 0.97815 0.219669 1.04779C0.150025 1.11744 0.0947807 1.20012 0.05709 1.29111C0.0193992 1.3821 -7.33813e-10 1.47963 0 1.57812C7.33813e-10 1.67661 0.0193992 1.77414 0.05709 1.86513C0.0947807 1.95612 0.150025 2.0388 0.219669 2.10845L4.93935 6.82812L0.219669 11.5478C0.150025 11.6174 0.0947807 11.7001 0.05709 11.7911C0.0193992 11.8821 0 11.9796 0 12.0781C0 12.1766 0.0193992 12.2741 0.05709 12.3651C0.0947807 12.4561 0.150025 12.5388 0.219669 12.6085C0.289312 12.6781 0.371991 12.7333 0.462984 12.771C0.553978 12.8087 0.651504 12.8281 0.749995 12.8281C0.848486 12.8281 0.946012 12.8087 1.03701 12.771C1.128 12.7333 1.21068 12.6781 1.28032 12.6085L6 7.88878L10.7197 12.6085C10.7893 12.6781 10.872 12.7333 10.963 12.771C11.054 12.8087 11.1515 12.8281 11.25 12.8281C11.3485 12.8281 11.446 12.8087 11.537 12.771C11.628 12.7333 11.7107 12.6781 11.7803 12.6085C11.85 12.5388 11.9052 12.4561 11.9429 12.3651C11.9806 12.2741 12 12.1766 12 12.0781C12 11.9796 11.9806 11.8821 11.9429 11.7911C11.9052 11.7001 11.85 11.6174 11.7803 11.5478L7.06065 6.82812Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
​

 

 

result
round_0-1718948176733.png

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.