Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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 🙂
Solved! Go to the solution
This is an accepted solution.
Hi @Signebp
TRy this one.
.grid-item.subcollection__item {
border-radius: 50%;
height: 300px;
width: 300px;
justify-self: center;
}
.subcollection__link {
justify-content: center !important;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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?
Hi @CodingFifty
I would be glad if you would take a look at it. My store URL is here: https://perlefryd.dk/
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.
This is an accepted solution.
Hi @Signebp
TRy this one.
.grid-item.subcollection__item {
border-radius: 50%;
height: 300px;
width: 300px;
justify-self: center;
}
.subcollection__link {
justify-content: center !important;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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?
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:
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!
Thank you so much! Is it also a possibility to get the collection titles standing underneath the pictures?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025