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 · Accepted solution]

Hi @RPTrix 

Follow this

1. open theme editor and go to product page.

2. add new block "Custom liquid" and add this code

<img class="cd_img" src="https://cdn.shopify.com/s/files/1/0046/2156/6019/files/logo_small_071a9333-5026-42e0-b570-0914768cf642.png?v=1650033637&width=500">

 3. move it to below "buy now" block 

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

5. save it

[Jasoliya · Accepted solution]

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%;}
}

[Jasoliya · Accepted solution]

Hi @RPTrix 

Follow this

1. open theme editor and go to product page.

2. add new block "Custom liquid" and add this code

<img class="cd_img" src="https://cdn.shopify.com/s/files/1/0046/2156/6019/files/logo_small_071a9333-5026-42e0-b570-0914768cf642.png?v=1650033637&width=500">

 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_Tip...

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_Tip...

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 · Accepted solution]

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

[Jasoliya · Accepted solution]

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?

[tahu]

will the process be same for the above as well?

[SaadM]

Hey, i just tried these steps and it worked but only problem is that its showing on all my products, which i don't want as every other product is obv diff, i want diff images for diff products how to fix this 

[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

[asyoustyle]

right now its shows in all products

[Jasoliya]

HI @asyoustyle 

Where do you want to add image ? send me store url so i can check

best regard 

[DBGG]

I need help too adding shipping image below buy now button. Cant figure it out