Help create a image section on page size 970 by 600

[chrisnasah]

Hello,

I need help creating a image section where i can upload multiple images on full width (970 by 600)

I am trying to create a same style as my amazon listing A+ content. I have everything as i want but i am not able to upload images of my A+ content.

Below is the link to store:

https://ld4fg3uawhxk1blr-81315037526.shopifypreview.com/products_preview?preview_key=268dc32c383f3b30fa87646e00bca295

And below is link to my Amazon Store which i am looking to add A+ content from, images from under product desctiption.

https://www.amazon.co.uk/dp/B0C46FW623?ref=myi_title_dp&th=1

Thanks

[ThePrimeWeb]

Hey @chrisnasah ,

You could use the “Image banner” section and just remove all the blocks,

First example (Blocks Removed), second example (With Blocks)

After that I could provide you with the CSS if you need to change the sizing

[chrisnasah]

Thanks for the suggestion. Will i have to do this for each and every product or would i be able to create a template where i can upload different images for each product.

Also please share the details on CSS i need to modify.

Thanks once again.

[ThePrimeWeb]

Hey @chrisnasah ,

You will have to do it per template. Each template will hold the same images for all the products belonging to that template. I suggested the above method because you only had one product in the store. If you have more, you will have to create a template per product.

As for the CSS, I need you to first add the images, then I can go to your site and write the CSS for the HTML it generates.

[chrisnasah]

Hi @ThePrimeWeb

I have uploiaded one image as suggested, i selected option to adapt to first image size. I understand for multiple images will need to add additional “image banner”.

I now need this image to be “970 by 600” in size.

Thanks

[ThePrimeWeb]

Hey @chrisnasah ,

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.

[chrisnasah]

Hi,

Thank you very much, that worked

[chrisnasah]

@ThePrimeWeb

Hello again

Are yuo help to help same thing with the impulse theme. I have uploaded to it but i believe the change will be on a different section.

Thanks

[ThePrimeWeb]

Hey @chrisnasah ,

Can you share the link to the new theme?

[chrisnasah]

Hi @ThePrimeWeb

sorry forgot to share link.

https://a0311f-3.myshopify.com/products/astraveda-7-chakra-tree-tree-of-life-crystal-tree-feng-shui-tree-positive-energy-tree-meditation-gift-crystals-and-stones-spiritual-items-300-beads

password: mystore

Only have one product for now

[ThePrimeWeb]

Hey @chrisnasah ,

The store is password protected

[chrisnasah]

Hi @ThePrimeWeb

password: mystore

[ThePrimeWeb]

Hey @chrisnasah ,

Instructions are the same as earlier

[chrisnasah]

Hi @ThePrimeWeb

I have the image size as i want just background colour is black.. any ideas

[ThePrimeWeb]

Hey @chrisnasah ,

Replace the code with this

[chrisnasah]

Hi @ThePrimeWeb

That worked, thanks

Just lastly, i added another image and there seems to be gap between the images, some sort of border which was evident when background was black. Any ideas on how i can remove this or even have a smaller gaping between them like .5 cm.

Thanks

[ThePrimeWeb]

Hey @chrisnasah ,

Replace with this

[chrisnasah]

Hi @ThePrimeWeb

It has created even bigger spacing, what shall i edit?

Thanks

[ThePrimeWeb]

Maybe try and replace with this then
@chrisnasah

[chrisnasah]

@ThePrimeWeb

No change, i did notice the theme itself has an option to reduce height to 550 px or 650 px but not in between as this still had a gap, default was 750 px.

Not sure if above might be causing a conflit with the code you provided.