How can i add "Category Bubbles" in Dawn Theme?

[store095]

Hi, i want to add “category bubbles” with a heading above it in the same font size in my shopify store same as here but only with 6 bubbles:

I found older posts here in the forum, and they did it with a code, but the code no longer works with the new 15.0 dawn theme.

I’m looking for someone to explain to me how I can get the bubbles and change the categories.

If you are interested, you can contact me via my email:

alex.berger [email removed] eclipso . de

If it works I’ll send you a coffee as reward.

[Dan-From-Ryviu]

Hi @store095

You can add Collection list section, set column in desktop is 6, and then add this CSS code to Custom CSS of section

.card {
  border: unset !important;
}
.card--card .card__inner .card__media {
  border-radius: 50%;
}
.card__information {
  text-align: center;
!important;
}
.card__information .card__heading { font-size: 16px; font-weight: 400;  }
.card__information .icon-wrap {
  display: none;
}

[store095]

Thanks for your answer.

I inserted the code, but nothing changes and I can’t save the css code in the online editor also, it says can’t be safed in the online editor. It currently looks like this:


[Dan-From-Ryviu]

Can you send me your store URL so I can check?

[store095]

I just deleted the category bar and tried it with a new one and now it works and the categories are now round, the way I want them to. However, I get the message “Session in the online shop editor cannot be published” when I want to save it.

Why i can’t save it with the CSS Code?

[store095]

I just found this answer in this forum from an older post:

I have found the problem and solution to that.

The problem is the limitation on the json file size in Shopify. So this means everytime that you write a code and this code combine some kind of content like links, SVG code, ect, this will add to the json file as well. So in time they sum up and take a space. Shopify put the hidden limit on the json file to max 1.5 MB. This means if you reach this limit, you are not be able to save any sassion any more because there is no more free space to use.

The solution is that:

1. delete all the hidden section that you do not need

2. with a developer delete all the blocks, codes, customized section, block and option that you do not need

3. try to use less SVG codes and custom CSS

Maybe this is the problem?

[Dan-From-Ryviu]

Yeah, maybe you reached the limit for code that can be added to Custom CSS. That is why I’m asking you to share the page URL so I can give you the code to add to the theme.liquid file, after in Online Store > Themes > Edit code.

Or if you want to appli the same design for all collection list then please add this code to theme.liquid file

[store095]

Thanks for your answer.

I only want it at the top.

My shop url is: https://ba571d-cc.myshopify.com/

and password: 1239

I want it like this, maybe you can help me:

[Dan-From-Ryviu]

Please add this code below to theme.liquid file, after

[store095]

It works. Thank you.

I’ll send you the coffee in 1 hour.

[Dan-From-Ryviu]

Hi @kordak

You can try to find if it has option to disable that section in your theme settings.

Or add this code to Custom CSS in Sale channels > Online Store > Themes > Customize > Theme settings

.halo-cart-sidebar .previewCartCollection { display: none !important; }

[store095]

I think you response to the wrong question here

[Dan-From-Ryviu]

LOL

[store095]

I just send you the coffee. Same name as here. Thanks again!

[Dan-From-Ryviu]

Thanks and welcome!