Solved

Help create a image section on page size 970 by 600

chrisnasah
New Member
14 0 0

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 

 

 

 

 

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
1127 294 223

This is an accepted solution.

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.

ThePrimeWeb_0-1707735127436.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1127 294 223

This is an accepted solution.

@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

View solution in original post

Replies 24 (24)

ThePrimeWeb
Shopify Partner
1127 294 223

Hey @chrisnasah,

 

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

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

ThePrimeWeb_0-1707665488419.png

 

 

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
chrisnasah
New Member
14 0 0

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
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

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
Shopify Partner
1127 294 223

This is an accepted solution.

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.

ThePrimeWeb_0-1707735127436.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
chrisnasah
New Member
14 0 0

Hi,

 

Thank you very much, that worked 🙂

chrisnasah
New Member
14 0 0

@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
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

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
Shopify Partner
1127 294 223

Hey @chrisnasah,

 

The store is password protected 😄

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
chrisnasah
New Member
14 0 0

Hi @ThePrimeWeb 

 

password: mystore

 

 

ThePrimeWeb
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

Hi @ThePrimeWeb 

 

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

ThePrimeWeb
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

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
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

Hi @ThePrimeWeb 

 

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

 

Thanks

ThePrimeWeb
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

@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
Shopify Partner
1127 294 223

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
chrisnasah
New Member
14 0 0

Hi @ThePrimeWeb 

 

Perfect that worked, thanks once again 🙂

chrisnasah
New Member
14 0 0

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
Shopify Partner
1127 294 223

This is an accepted solution.

@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
chrisnasah
New Member
14 0 0

hi @ThePrimeWeb 

 

Thanks once again, exactly as i wanted it now.