Change image shape to arch in 'image with text' section

11 0 0

Hi there, I am using the Craft theme which offers the option of an 'arch' image shape in Collections/Product Grids. However, I want to apply this shape to the "image with text" section on the homepage (it only has square as an option).

Can someone advise what CSS I can apply in the theme editor / edit code section to convert the images within this section to an arch shape? Many thanks in advance!! Emily

Image 1, arch style in the craft theme's product grid / Image 2, the image with text section where I want to have an arch image

Accepted Solutions (2)

2139 616 514

Hey @emilyinglis,

Try this and see. Please remove everything I have asked you to paste earlier and replace it with this.

<style>
.card:hover .media.media--hover-effect>img,
.card-wrapper:hover .media.media--hover-effect>img {
    transform: scale(1) !important;
}


img:not(.header__heading-logo, .banner__media.media img) {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

2139 616 514

No worries @emilyinglis. Are you launching soon?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 33 (33)

2139 616 514

Hey @emilyinglis,

Can I have the link to your store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

Hi there! It’s not live yet so sadly don’t have anything to share. I can
give staff/dev account access if you provide details?

2139 616 514

You can share the draft theme as a preview link @emilyinglis

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

Ah of course sorry - see here https://834f7d-3.myshopify.com/?_ab=0&_fd=0&_sc=1

2139 616 514

Sorry @emilyinglis,

It's password protected. Can you share the store password

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

Apologies, am rushing for the school run and not thinking - so sorry! Password is "paimpe"

2139 616 514

Hey @emilyinglis,

Please try this and let me know 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
img:not(.header__heading-logo) {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

This is GREAT however it's affecting ALL images on the site which is actually ALSO great however, I do not want the 'image banner' section on the homepage to be affected, I want it to stay the same. Can you advise how to update the code to not include the image banner section?

11 0 0

p.s. when I hover (on desktop) on the collection list section at the bottom of the homepage it does a slight 'zoom in' on the image (which distorts the arch). I can't find where to stop it zooming in as it's not in the theme editor settings for the "collection list" section. Would you happen to know? I am happy for NO images to have this slight zoom in animation/any animation at all, so if easier to add this to your code, i.e. no animation on ANY images, then this would be great!

2139 616 514

Hey @emilyinglis,

Try this and see. Please remove everything I have asked you to paste earlier and replace it with this.

<style>
.card:hover .media.media--hover-effect>img,
.card-wrapper:hover .media.media--hover-effect>img {
    transform: scale(1) !important;
}


img:not(.header__heading-logo, .banner__media.media img) {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

This is fantastic and working perfectly! I will be coming back online tomorrow and buying you a coffee THANK YOU!!

2139 616 514

Thank you @emilyinglis, that's very kind of you. I wish you good luck with your store!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

Hi there! I'm using these awesome codes but I can't figure out how to adapt it to not be applied to an instagram feed app I added.. Can you help?

2139 616 514

Hey @unjadedcharms,

Can you share the link to your store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

Does this work https://unjadedcharms.com/?_ab=0&_fd=0&_sc=1 ?

2139 616 514

Hey @unjadedcharms,

I see the store is password protected. Can you share the password or disable it temporarily?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

Ilovekaiser1028 is the PW

2139 616 514

You can add this code with the same instructions above @unjadedcharms,

<style>
#instafeed img.splide-img {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

That is wonderful! Thank you!!

9 0 0

Hi me again! The insta feed looks great. When I click on the highlight story bubbles they show up arched still. Can you assist with that edit? please!

2139 616 514

Sure, just add this on as well, instructions are the same

<style>
#zuck-modal-slider-stories .story-viewer img {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

dang it I am still getting the arch.

2139 616 514

Because you pasted the code wrong @unjadedcharms,

If you're going to combine them, then there shouldn't be an extra <style> tag in the middle of an already opened <style></style> tag, and also you are missing a closing curly bracket for the instafeed code.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

Ah you're right. I see it now. It worked! thank you!

9 0 0

I'm buying you a coffee today hah I have more more section to "de-arch" its for the Lookfy gallery app.

2139 616 514

Hey @unjadedcharms,

Can you replace this code

with

img:not(.header__heading-logo, .banner__media.media img, .product_media+img, .collection_media-img, .kt-grid__item img) {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

9 0 0

Thank you! That is wonderful. Sending you a coffee!

1 0 0

If I want to change the border of an image from a standard square to a rounded corner box like the one below, how can I do that? I'd really appreciate your help!

11 0 0

Hi again, sorry to bother you again!! I am adding a lookbook page and the 'arch' effect is once again being applied to this. I think it's safer to adapt the code so it only applies to all homepage sections apart from the image banner, collections pages and product pages - and no other pages on the website. Are you able to update the code and hopefully this'll stop any future issues. Thank you so much again for you help!

Lookbook example:

2139 616 514

Hey @emilyinglis,

If you replace all the code with this, it could work. This only applied to the Image with text section in the homepage and the product images.

Please try and let me know. If it doesn't, then we might need to amend your site code a little.

<style>
.card:hover .media.media--hover-effect>img,
.card-wrapper:hover .media.media--hover-effect>img {
    transform: scale(1) !important;
}

.image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media img,
.card__media img,
.product__media img {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

Thank you! I had to add back in the "important" part after the 50% as it wasn't quite applying right to the image with text sections but now it's all looking great thank you again!

2139 616 514

No worries @emilyinglis. Are you launching soon?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

11 0 0

I am! Hopefully this week!

Community Blog Articles

top members.webp

Holiday Cheers to Our Community | November '24

Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...

By JasonH Dec 6, 2024

Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024

top members.webp

Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024