Help with my cart icon

[NOT1]

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

[dws_pvt_ltd · Accepted solution]

@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>

[dws_pvt_ltd · Accepted solution]

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;
}

[dws_pvt_ltd]

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

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,

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

[dws_pvt_ltd · Accepted solution]

@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>

[NOT1]

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 

[dws_pvt_ltd]

Yes sure, looking to it.

[dws_pvt_ltd · Accepted solution]

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;
}

[Adri]

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

[Tech_Coding · Accepted solution]

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 </body> on theme.liquid
<style>
  .cart-count-bubble {
      height: 1.4rem !important;
      width: 1.4rem !important;
      font-size: 0.8rem !important;
   }
</style>

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

[Adri]

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