How can I create round edges on the Impulse theme?

Store Design
1

Does anyone know how to make all the edges on the impulse theme round? I was only able to make the products round but I would like the whole thing to be round. This means the collections and even the slideshow at the top.

2 Likes
2

Hi @Skeb1234 ,

Can you provide your website?

3

@Skeb1234

Impulse

the theme has theme settings for the round border for the all-product card layout. i hope you have license theme, you will get that feature.

you need to add a customer code i will help you. can you share the reference output

4

https://homesavingshaven.com/?_ab=0&_fd=0&_sc=1

5

I dont see the setting

6

Hi @Skeb1234 ,

Thank you providing your website. Can you provide me an image on what you want us to do? If you want the image to be round in the collection page, you can do the following code.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.

NOTE: Adjust 15px to how much roundness you want

.grid-product__image-mask .image-wrap {
    border-radius: 15px;
}
7

Thanks, I appreciate the answer, however, only the products have been made rounded how can I also make the collections themselves rounded and also the big picture at the top of the page?

8

Hi @Skeb1234 ,

Can you provide the specific section and location you want the changes?

For the collection section, not the collection page, please add the code below

a.collection-item.collection-item--overlaid-box.aos-init.aos-animate {
    border-radius: 15px;
}

If you are talking about the slideshow image at the home page. Please use the code below

div#Slideshow-template--15871905104057__slideshow {
    border-radius: 15px;
}
9

Idk what is wrong I entered the code you sent and nothing happened. You definitely addressed the issue but nothing happens for some reason when I enter it in.

10

Same here