Need help rounding corners with Debut Template

Store Design
1

I am using the template Debut version 16.7.0. I am wanting to round the corners of my logo at the top on all pages (preferably completely rounded), collection images, and product images. I have found various codes but am unable to figure out where to properly place the code. Is anyone able to help?

Website: https://rootsoftheroseco.com/

Other things I need help with:

Have sale price show with regular price with automatic discount (was told I need a code)

Add padding to the collection titles

2

Hi @missjennarose , go to theme.scss.css and add the following code :

.site-header__logo-image img {
    width: 100%;
    border-radius: 50% !important;
}
3

Hi @missjennarose

If you need to make logo round then use this code:

.site-header__logo img {
    border-radius: 50%;
}

Hope this code will work.

Best Regards

Team_OSC

4

Where do I put this code specifically though?

5

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after element

Screenshot 2023-12-14 at 14.11.01.png
Screenshot 2023-12-14 at 14.11.01.png1526×449 130 KB

6

You can put this code in Custom CSS block which you find under header section or you can put this code in theme.scss.liquid file.

Best Regards

Trishnapare | Team_OSC

7

Perfect that worked! Thank you!

Do you know how to round the corners for the collection and product images?

8 
.collection-grid-item__title-wrapper:before {
     border-radius: 50%;
}

.collection-grid-item__overlay {
     border-radius: 50%;
}

.grid-view-item__image {
     border-radius: 50%;
}

Hope this code will work to achieve round corners of collection list and product images.

Best Regards

Trishnapare | Team_OSC