Shopify themes, liquid, logos, and UX
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:
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
Solved! Go to the solution
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.
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>
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
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.
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.
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
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.
Hi,
Thank you very much, that worked 🙂
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
Hey @chrisnasah,
Can you share the link to the new theme?
Hey @chrisnasah,
The store is password protected 😄
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>
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>
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
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>
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>
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.
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>
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.
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>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025