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

store095 · ‎08-01-2024

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 @ eclipso . de

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

Dan-From-Ryviu · ‎08-02-2024

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

<style>
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list-wrapper { max-width: 990px; }
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list {
justify-content: space-between;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card {
  border: unset !important;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__inner .card__media {
  border-radius: 50%;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information {
  text-align: center;
!important;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information .card__heading { font-size: 16px; font-weight: 400;  }
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information .icon-wrap {
display: none;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .title-wrapper-with-link {
justify-content: center;
}
@media (min-width: 990px) {
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .collection-list__item {
    max-width: calc(14.66% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
}
}
</style>

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎08-01-2024

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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-01-2024

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 · ‎08-01-2024

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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-02-2024

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 · ‎08-02-2024

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 · ‎08-02-2024

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

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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-02-2024

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 · ‎08-02-2024

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

<style>
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list-wrapper { max-width: 990px; }
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list {
justify-content: space-between;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card {
  border: unset !important;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__inner .card__media {
  border-radius: 50%;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information {
  text-align: center;
!important;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information .card__heading { font-size: 16px; font-weight: 400;  }
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .card__information .icon-wrap {
display: none;
}
#shopify-section-template--23267894559060__collection_list_yAdLwf .title-wrapper-with-link {
justify-content: center;
}
@media (min-width: 990px) {
#shopify-section-template--23267894559060__collection_list_yAdLwf .collection-list .collection-list__item {
    max-width: calc(14.66% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
}
}
</style>

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-02-2024

It works. Thank you.

I'll send you the coffee in 1 hour. 🙂

Dan-From-Ryviu · ‎08-02-2024

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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-02-2024

I think you response to the wrong question here 😄

Dan-From-Ryviu · ‎08-02-2024

LOL

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

store095 · ‎08-02-2024

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

Dan-From-Ryviu · ‎08-02-2024

Thanks and welcome!

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

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

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

Community Blog Articles