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
Hey @emilyinglis ,
Can I have the link to your store?
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?
You can share the draft theme as a preview link @emilyinglis
Sorry @emilyinglis ,
It’s password protected. Can you share the store password
Apologies, am rushing for the school run and not thinking - so sorry! Password is “paimpe”
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 “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
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?
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!
Hey @emilyinglis ,
Try this and see. Please remove everything I have asked you to paste earlier and replace it with this.
1 Like
This is fantastic and working perfectly! I will be coming back online tomorrow and buying you a coffee THANK YOU!!
Thank you @emilyinglis , that’s very kind of you. I wish you good luck with your store!
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:
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.
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!
No worries @emilyinglis . Are you launching soon?
I am! Hopefully this week!
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?
Hey @unjadedcharms ,
Can you share the link to your store?
