Help create a image section on page size 970 by 600

chrisnasah · ‎02-11-2024

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=268dc32c383f3b3...

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 · ‎02-12-2024

Hey @chrisnasah,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body:has(.page-width .product) .banner {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-12-2024

@chrisnasah, replace the code with this.

Some images are shorter because I put max-height as 600px, not the height. So all images can go upto maximum of 600, it doesn't have to be 600. If I make it 600, then it might stretch and lose quality and it'll look very ugly.

<style>

body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
    position: static;
    margin-bottom: 10px !important;
}

.background-media-text {
    background-color: transparent !important;
}

.background-media-text {
    position: static !important;
}

@media only screen and (min-width: 769px) {
  .background-media-text__spacer.background-media-text--650,
  .background-media-text--650,
  .background-media-text--650 .background-media-text__video,
  .background-media-text__spacer.background-media-text--450,
  .background-media-text--450,
  .background-media-text--450 .background-media-text__video,
  .background-media-text__spacer.background-media-text--550,
  .background-media-text--550,
  .background-media-text--550 .background-media-text__video,
  .background-media-text__spacer.background-media-text--750,
  .background-media-text--750,
  .background-media-text--750 .background-media-text__video {
    min-height: max-content !important;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-11-2024

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

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 · ‎02-12-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

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 · ‎02-12-2024

Hey @chrisnasah,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body:has(.page-width .product) .banner {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi,

Thank you very much, that worked 🙂

chrisnasah · ‎02-12-2024

@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 · ‎02-12-2024

Hey @chrisnasah,

Can you share the link to the new theme?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

sorry forgot to share link.

https://a0311f-3.myshopify.com/products/astraveda-7-chakra-tree-tree-of-life-crystal-tree-feng-shui-...

password: mystore

Only have one product for now

ThePrimeWeb · ‎02-12-2024

Hey @chrisnasah,

The store is password protected 😄

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

password: mystore

ThePrimeWeb · ‎02-12-2024

Hey @chrisnasah,

Instructions are the same as earlier

<style>
body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
}

.background-media-text {
    background-color: transparent;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

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

ThePrimeWeb · ‎02-12-2024

Hey @chrisnasah,

Replace the code with this

<style>
body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
}

.background-media-text {
    background-color: transparent !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

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 · ‎02-12-2024

Hey @chrisnasah,

Replace with this

<style>

body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
    position: static;
}

.background-media-text {
    background-color: transparent !important;
}

.background-media-text {
    position: static !important;
}

@media only screen and (min-width: 769px) {
  .background-media-text__spacer.background-media-text--650,
  .background-media-text--650,
  .background-media-text--650 .background-media-text__video {
    min-height: max-content;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

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

Thanks

ThePrimeWeb · ‎02-12-2024

Maybe try and replace with this then
@chrisnasah

<style>

body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
    position: static;
}

.background-media-text {
    background-color: transparent !important;
}

.background-media-text {
    position: static !important;
}

@media only screen and (min-width: 769px) {
  .background-media-text__spacer.background-media-text--650,
  .background-media-text--650,
  .background-media-text--650 .background-media-text__video,
  .background-media-text__spacer.background-media-text--450,
  .background-media-text--450,
  .background-media-text--450 .background-media-text__video,
  .background-media-text__spacer.background-media-text--550,
  .background-media-text--550,
  .background-media-text--550 .background-media-text__video,
  .background-media-text__spacer.background-media-text--750,
  .background-media-text--750,
  .background-media-text--750 .background-media-text__video {
    min-height: max-content;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

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

ThePrimeWeb · ‎02-12-2024

Hey @chrisnasah,

Yeah I see a conflict. Bare with me because until you paste the code in the actual codebase, I cannot test priorities

Paste this instead

<style>

body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
    position: static;
}

.background-media-text {
    background-color: transparent !important;
}

.background-media-text {
    position: static !important;
}

@media only screen and (min-width: 769px) {
  .background-media-text__spacer.background-media-text--650,
  .background-media-text--650,
  .background-media-text--650 .background-media-text__video,
  .background-media-text__spacer.background-media-text--450,
  .background-media-text--450,
  .background-media-text--450 .background-media-text__video,
  .background-media-text__spacer.background-media-text--550,
  .background-media-text--550,
  .background-media-text--550 .background-media-text__video,
  .background-media-text__spacer.background-media-text--750,
  .background-media-text--750,
  .background-media-text--750 .background-media-text__video {
    min-height: max-content !important;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

Perfect that worked, thanks once again 🙂

chrisnasah · ‎02-12-2024

Hi @ThePrimeWeb

I now feel bad asking for another modification, if its not such an issue, how would i be able to add small spacing between them.

At moment this is perfect as it is resizing based on image size, i have uploaded all images without issues some are even shorter in height.

ThePrimeWeb · ‎02-12-2024

@chrisnasah, replace the code with this.

Some images are shorter because I put max-height as 600px, not the height. So all images can go upto maximum of 600, it doesn't have to be 600. If I make it 600, then it might stretch and lose quality and it'll look very ugly.

<style>

body:has(.page-width .product-single__meta) .background-media-text__container  {
    max-width: 970px;
    max-height: 600px;
    margin: auto;
    position: static;
    margin-bottom: 10px !important;
}

.background-media-text {
    background-color: transparent !important;
}

.background-media-text {
    position: static !important;
}

@media only screen and (min-width: 769px) {
  .background-media-text__spacer.background-media-text--650,
  .background-media-text--650,
  .background-media-text--650 .background-media-text__video,
  .background-media-text__spacer.background-media-text--450,
  .background-media-text--450,
  .background-media-text--450 .background-media-text__video,
  .background-media-text__spacer.background-media-text--550,
  .background-media-text--550,
  .background-media-text--550 .background-media-text__video,
  .background-media-text__spacer.background-media-text--750,
  .background-media-text--750,
  .background-media-text--750 .background-media-text__video {
    min-height: max-content !important;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

chrisnasah · ‎02-12-2024

hi @ThePrimeWeb

Thanks once again, exactly as i wanted it now.

Help create a image section on page size 970 by 600

Help create a image section on page size 970 by 600

Community Blog Articles