Supply theme

Solved
Highlighted
Excursionist
11 1 0
Hi,

Can anyone help me to customize supply theme. I would like the collection pages to be in circle instead of square or rectangle.
0 Likes
Highlighted
Shopify Staff
Shopify Staff
515 61 84

Hey, @Imran_Electroni!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

I would love to take a closer look at this for you. Are you referring to the collection images on your store? You would like the images to be a circle, is that correct? Could you send me a screenshot of what exactly you are referring to and your store URL too, please? Would you want all the images on your store circle or just the collection images? Once I have a bit more information I can investigate closer for you.

 

It is also worth being aware that circular images can mean that a lot of detail in the image could be lost as a result of the shape change. Your images would also need to be perfectly square and the exact same size otherwise they will all be weird shapes. Let me know your thoughts and I can give you the CSS code if you want to go ahead.

 

Speak soon,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Expert
2721 460 598

Hi  @Imran_Electroni 

If you want to make collection page image in circle then add this css in Asset->theme.scss file at bottom

    .product-grid-image img{border-radius: 50%;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
11 1 0
*I received this reply but the product page is showing in circle instead of
collection page. I would like to show the collection page as circle. *

If you want to make collection page image in circle then add this css in
Asset->theme.scss file at bottom
.product-grid-image img{border-radius: 50%;}
0 Likes
Highlighted
Excursionist
11 1 0
Hi,

I would like the collection pages to be in circle. whenever the home page
is viewed, the collection pages are in rectangle and it is looking so, big
if this can be viewed as circle that would be great.

Also, is this possible to hang over collection pages at home page and by
pressing next button the collections should move side by side.
0 Likes
Shopify Expert
2721 460 598

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
11 1 0
Thanks for the reply.

Mockdeals-com.myshopify.com
0 Likes
Highlighted
Shopify Expert
2721 460 598

Remove my given css and add this new 

.collection-list-section .featured-box:after{ background-color: transparent;}
.collection-list-section .featured-box--image img{border-radius: 50%;}

If you want to move collection list with arrow then you have to apply slider.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
11 1 0
According to the answer provided by you the image is showing in circle in
collections page. but iam looking for the collections page to be in circle
instead of rectangle and it should move forward. Can you please see if this
is possible in this theme. below is the example of collections in circle
and collections moving forward.

https://ic1wqa9osiibzzdi-2883092549.shopifypreview.com/
0 Likes
Highlighted
Shopify Expert
2721 460 598

Preview url cant working send me proper so i can check

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes