Adding image in product page below Buy now button

[RPTrix]

Hi Team , I wanted to add an image below buy now button, but I am not sure how would I be able to do that, can you please help me out.

[Jasoliya]

Hi @RPTrix

Follow this

1. open theme editor and go to product page.

2. add new block “Custom liquid” and add this code

![logo_small_071a9333-5026-42e0-b570-0914768cf642.png?v=1650033637&width=500|200x70](upload://7uZXWYch5J1C5JBWXZRnxi7CrBv.png)

3. move it to below “buy now” block

4. change img url with your image (upload in shopify file section)

5. save it

[RPTrix]

Yess done that, Thank you soo much for the help , but the image that i am adding is getting a bit blurred automatically and also there is some sizing and spacing issues

[Jasoliya]

Send me url

[RPTrix]

https://alana.co.in/products/red-wine-glass-charm-with-golden-chain

[Jasoliya]

your original image is blur see here, upload bit big resolution image

[RPTrix]

https://cdn.shopify.com/s/files/1/0703/3598/7985/files/Cream_Beige_Black_Green_Feminine_Skincare_Tips_Checklist_Instagram_Post_4_x_8_cm.png?v=1679311378

Image URL

[Jasoliya]

add this url in editor "https://cdn.shopify.com/s/files/1/0703/3598/7985/files/Cream_Beige_Black_Green_Feminine_Skincare_Tips_Checklist_Instagram_Post_4_x_8_cm.png?v=1679311378"

right now you have added link with width 300 thats why not generating original image

[RPTrix]

Width set to 500 now, but in mobile view its showing like this, and also still showing a bit blurred

[Jasoliya]

follow this

1. Go to Online Store->Theme->Edit code
2. Asset->base.css → paste bellow code in bottom of file

@media only screen and (max-width: 767px) {
.cd_img{    width: 100%;}
}

[RPTrix]

Thank you soo much that solved the issue of the mobile view, could you please help me reduce this white spacing

[tahu]

will the process be same for the above as well?

[Jasoliya]

Add this code to remove possible space

.cd_img{margin: 0;}
.product-form{margin-bottom: 0;}
.product__info-container  .icon-with-text:last-of-type{    margin-top: 0;}

[RPTrix]

just to confirm , so that there is no error, is this part correct?

[Jasoliya]

No add given code direct in fine not with @media

otherwise it will only work for mobile

Best regard

[RPTrix]

Thank you soo much for the help, the issue is resolved

[RPTrix101]

Hi, i Tried the above steps in differet page ,but it does not seems to work

Desktop View:

Mobile View:

Want to resolve the image size in desktop view and reduce the white space above and below image in Mobile view

Thank you for the help

[MuradCom]

hi Jasoliya, thank you for this. I implemented this solution. What about if I wanted to make this section full width, however?

[Concoeur]

Hey Jasoliya

I followed your steps and also included the custom liquid. unfortunately the picture below the buy botton is really big. is there an opportunity to make it smaller right below the buy botton? I included all payment terms as a picture as it looks better.

Thanks in advance and best regards
joe

[asyoustyle]

can you help me what script should i use if i want to put image on particular product page