Dawn theme - how to round corners on different elements

[MetteT]

Hi! I'm running an older version of the Dawn theme where i dont have acess to theme controls for rounded corners. I have managed to code my way to round corners on most of the things i want, however im missing ways to round the following:

1. Product images in collections and selected collections (i have rounded them on their product page)
2. Product videos on the product page
3. Multicolumn sections
4. Text backgrounds for image banner sections
5. Blog post previews on the blog page
6. Google/apple pay buttons on the cart page

I have attached images below:

[GemPages]

Hello @MetteT,

Could you please share your link pages you want to customize corner ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[MetteT]

Sure.

The items i want costumized can be found on these pages:

1. https://teefiti.dk/products/stella-langaermet-top
2. https://teefiti.dk/blogs/nyheder
3. https://teefiti.dk/cart/

The password is "Teefiti2022".

[GemPages · Accepted solution]

Hi @MetteT,

I check your pages and give code customize corners to support you.

Please go to Online Store > Themes > click 3 dots button > Edit code > Theme.liquid and add code above the tag </body> on the file Theme.liquid.

<style>
#shopify-section-template--15642815529191__main .product__media-wrapper .product__media-item deferred-media.deferred-media {
	border-radius: 45px !important;
	border: 0px !important;
}

#Banner-template--15642815103207__16426141601551a18b.banner .banner__content .banner__box {
	border-radius: 45px !important;
}

#Slider-template--15642815103207__5bfeb46d-bee8-43ad-84df-2f1911547eb3.blog__posts .blog__post article.article-card {
	border-radius: 50px;
    overflow: hidden !important;
}

#shopify-section-template--15642815529191__fb040c79-b53c-4651-91c1-2dcfef099801 .collection slider-component .card-wrapper {
	border-radius: 50px;
    overflow: hidden;
}

#shopify-section-template--15642815529191__f0b864c8-22b4-4c16-9950-0c135d3d25a0 ul.multicolumn-list .multicolumn-list__item .multicolumn-card {
	border-radius: 50px;
}


.cart__dynamic-checkout-buttons {
	border-radius: 20px;
    overflow: hidden;
}
.cart__dynamic-checkout-buttons .dynamic-checkout__content .shopify-cleanslate ul li {
	margin-top: 0px !important;
}
</style>

Hope my recommendation can support you.

Kind & Best regards,
GemPages Support Team.

[MetteT]

Hi again. Thank you! It worked on making the blog posts, google/apple pay buttons, video previews on product pages and text backgrounds for image banner sections rounded! 🙂

However it still didnt make the multicolumn sections rounded and it also didnt work for the products in collections or in the selected collections.

@GemPages  UPDATE: I managed to make it all work with minor adjustments! Thank you!

Is there a way to remove this awkward gap in between the blog posts and the top image banner on the https://teefiti.dk/blogs/nyheder page?

[GemPages]

Hi @MetteT,

I'm sorry for the late reply. I'm understanding you want to remove the white gap above blog post.

If I correct, pls go to file theme.liquid and add this new code above the </style>  tag of yesterday's code.

#shopify-section-template--15642815103207__5bfeb46d-bee8-43ad-84df-2f1911547eb3 .blog {
	margin-top: 0px !important
}

Ex: 

I hope you find the answer helpful, if you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.

[Kroppi]

Hi,

i do have the same need for my shop. https://petstilius-lt1.myshopify.com/

But probably code should be customised, is it possible to help me as well regarding this question??