Solved

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

emilyinglis
New Member
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

Screenshot 2024-01-29 at 11.19.04 pm.png

Screenshot 2024-01-29 at 11.18.57 pm.png

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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 32 (32)

ThePrimeWeb
Shopify Partner
2138 614 491

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!
emilyinglis
New Member
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?
ThePrimeWeb
Shopify Partner
2138 614 491

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!
emilyinglis
New Member
11 0 0

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

ThePrimeWeb
Shopify Partner
2138 614 491

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!
emilyinglis
New Member
11 0 0

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

ThePrimeWeb
Shopify Partner
2138 614 491

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.

ThePrimeWeb_1-1706563370104.jpeg

 

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!
emilyinglis
New Member
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?

 

emilyinglis_0-1706606697177.png

 

emilyinglis
New Member
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!

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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!
emilyinglis
New Member
11 0 0

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

ThePrimeWeb
Shopify Partner
2138 614 491

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!
unjadedcharms
New Member
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?

ThePrimeWeb
Shopify Partner
2138 614 491

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!
unjadedcharms
New Member
9 0 0
ThePrimeWeb
Shopify Partner
2138 614 491

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!
unjadedcharms
New Member
9 0 0

Ilovekaiser1028 is the PW

ThePrimeWeb
Shopify Partner
2138 614 491

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!
unjadedcharms
New Member
9 0 0

That is wonderful! Thank you!!

unjadedcharms
New Member
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!

ThePrimeWeb
Shopify Partner
2138 614 491

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!
unjadedcharms
New Member
9 0 0

dang it I am still getting the arch.Screenshot 2024-04-11 at 12.32.55 PM.png

ThePrimeWeb
Shopify Partner
2138 614 491

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.

ThePrimeWeb_1-1712862666277.png

 

 

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!
unjadedcharms
New Member
9 0 0

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

unjadedcharms
New Member
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.Screenshot 2024-04-12 at 10.06.43 AM.png

ThePrimeWeb
Shopify Partner
2138 614 491

Hey @unjadedcharms,

 

Can you replace this code

ThePrimeWeb_0-1712977187828.png

 

 

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!
unjadedcharms
New Member
9 0 0

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

emilyinglis
New Member
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: 

emilyinglis_0-1707028251703.png

 

ThePrimeWeb
Shopify Partner
2138 614 491

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!
emilyinglis
New Member
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!

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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!
emilyinglis
New Member
11 0 0

I am! Hopefully this week!