Border-radius of image-with-text section - Refresh Theme

Shopify Discussion
1

Hello Shopify community,

I’d like to ask a question about the image-with-text section.

I’m using the Shopify 2.0 Refresh Theme and I am having a struggle getting the border-radius of the image to 0.

For some reason the left side of the image has a border-radius and I’d like to get it to 0 for just this section, so by adding something in my custom css part of this section.

Does anyone know which css code I need to add?

Thank you in advance.

Naamloos.png
Naamloos.png1905×810 129 KB

2

Hey @Eline12

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

You can adjust the border-radius without code. Navigate to the theme editor → Theme settings → Media → Corner radius

Screenshot from 2023-10-14 10-58-57.png
Screenshot from 2023-10-14 10-58-57.png1919×930 102 KB

4

It’s on this page. It’s in a draft version of my live store.

5

Thank you, but if I change it in the settings it’s changing every single image in my store. I just want to change the border radius in this specific section :slightly_smiling_face:

6

You can do this by setting the border-radius with code. You’d need to add a section setting of type checkbox that allows you to enable or disable the rounded corners for each individual Image with text section. https://www.loom.com/share/57d6beeabdad42e895185bde926a862a?sid=7e293dd1-23d2-4615-9f41-d336ebefdcbf

7

Hey @Eline12

Please share the preview link of your draft theme.

8

Nevermind, I was being too technical. Here’s how you can do this through the theme customizer with custom css: https://www.loom.com/share/9d215dfeca3543358950e05044356d4a?sid=494d44af-83cb-41da-8620-96bfec667059

9

This does work when there’s no image uploaded. As soon as I insert an image the borders on the left side go round again. Do you happen to have an idea what the problem is?

10

I’m sorry. This is the correct link.

11

In that case, add the image first, then the custom CSS: https://www.loom.com/share/630d1cf072d04103ae2c0686520fbe90?sid=f8a19732-2bb9-4765-bf94-6d86d6ee188e

12

Hey @Eline12

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1697281724703.png
Moeed_0-1697281724703.png1911×670 135 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

13

Perfect. Thank you very much. Have a nice day!

14

Thanks a lot Moeed. Have a nice day!

15

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

16

Likewise!