How to make subcollections circle/round in Broadcast theme

Solved

How to make subcollections circle/round in Broadcast theme

Signebp
Tourist
4 0 1

Hi!

I am using the Broadcast theme. On the collection pages I have enabled the subcolletions. Can anyone help me making the pictures of the subcollections round instead of square?

Looking forward hearing from you 🙂

Skærmbillede 2025-02-02 kl. 11.31.13.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9867 2349 2946

This is an accepted solution.

Hi @Signebp 

TRy this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.grid-item.subcollection__item {
    border-radius: 50%;
    height: 300px;
    width: 300px;
    justify-self: center;
}

.subcollection__link {
    justify-content: center !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_1-1738528228086.png

     


     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 7 (7)

CodingFifty
Shopify Partner
562 84 105

Hi @Signebp,

 

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Signebp
Tourist
4 0 1

Hi @CodingFifty 

I would be glad if you would take a look at it. My store URL is here: https://perlefryd.dk/

CodingFifty
Shopify Partner
562 84 105

Hi @Signebp,

 

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.image-wrapper--cover img, img.fit-cover {
    border-radius: 50% !important;
}

 
Did your query get resolved? Mark it as an Accepted Solution.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

Made4uo-Ribe
Shopify Partner
9867 2349 2946

This is an accepted solution.

Hi @Signebp 

TRy this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.grid-item.subcollection__item {
    border-radius: 50%;
    height: 300px;
    width: 300px;
    justify-self: center;
}

.subcollection__link {
    justify-content: center !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_1-1738528228086.png

     


     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Signebp
Tourist
4 0 1

Hi @Made4uo-Ribe 

We are getting there - thanks a lot! I did not make myself clear but my wish is to make it look like a mini circle menu. Therefore I changed the aspect to 120px x 120px. Can you help me to make the space between the pictures smaller + making the font size smaller? 

Skærmbillede 2025-02-03 kl. 11.32.34.png

Skærmbillede 2025-02-03 kl. 11.32.22.png

  

Made4uo-Ribe
Shopify Partner
9867 2349 2946

Please, add this code. 

 

@media only screen and (min-width: 749px){
.subcollections .grid-outer {
    max-width: 50%;
    margin: auto;
}
p.subcollection__title.h5 {
    font-size: 20px;
}
}

@media only screen and (max-width: 749px){
.subcollections .grid.grid--mobile-slider {
    justify-content: center;
}

p.subcollection__title.h5 {
    font-size: 16px;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1738589750210.png

Made4uoRibe_1-1738589757281.png

Note: I adjust on mobile and deskop please check. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Signebp
Tourist
4 0 1

Thank you so much! Is it also a possibility to get the collection titles standing underneath the pictures?

Skærmbillede 2025-02-03 kl. 19.53.05.png