Help with my cart icon

Store Design
,
1

NOT1_0-1725358272999.png
NOT1_0-1725358272999.png256Ă—258 5.8 KB

The normal cart icon is ok but when i add something in the cart the icon dissapiers and this shows pls help (DAWN THEME)

2

Hello @NOT1 , You do a mistake with to put some code or add some content in your file of header.liquid.

Screenshot from 2024-09-03 15-43-19.png
Screenshot from 2024-09-03 15-43-19.png1833Ă—874 302 KB

Go to online store → open edit code → open header.liquid file.

check here the below code and revert if done a changes in past or having some content of code,

dws_pvt_ltd_0-1725358554900.png
dws_pvt_ltd_0-1725358554900.png1833Ă—874 142 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

3

@NOT1 , replace this below code of yours which contains this class “header__icon header__icon–cart link focus-inset”. search this anchor tag and replace with below code of anchor tag and see.

      <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>
4

Hey thanks i got the solution can you help me reducing the circle size and maybe the number text size cuz if the circle size changes it it look bad

NOT1_0-1725358926730.png

1 Like
5

Yes sure, looking to it.

6

Hello! Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file.
  5. Open “base.css”.
  6. Add the following code at the file.

Search CSS of “.cart-count-bubble”, and update this CSS below,

.cart-count-bubble {
    position: absolute;
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    bottom: .8rem;
    left: 2.2rem;
    line-height: normal;
}
7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.cart-count-bubble { height: 1.4rem !important; width: 1.4rem !important; font-size: 0.8rem !important; }

Tech_Coding_0-1725359446487.png

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

8

Hi !! I also want to add the cart icon next to cart to make it more vissible, now it’s in the menu on the left under our journal. So we wanted to make it bold with the cart icon and maybe just separate it from the menu like the line of “blending creativity…”. Is this possible? thanks! www.sentientthebrand.com

9

Hi !! I also want to add the cart icon next to cart to make it more vissible, now it’s in the menu on the left under our journal. So we wanted to make it bold with the cart icon and maybe just separate it from the menu like the line of “blending creativity…”. Is this possible? thanks! www.sentientthebrand.com