Solved

How can I increase the length of my banner without losing quality?

AntonysaleBK
Excursionist
51 0 5

Hello!
How can I stretch my banner in length without losing quality!?

 

site: https://salebk.com/collections/bath-toys

 

AntonysaleBK_0-1707223617452.png

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2118 606 470

This is an accepted solution.

Hey @AntonysaleBK,

 

Try this, you shouldn't loose quality.

 

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.

 

If you want to change the image, replace the url within quotes where it says:

background-image: url('https://cdn.shopify.com/s/files/1/0674/6262/7573/files/zyro-image_12.jpg'), put the high quality version there.

<style>
.collection-hero__description img {
    width: 100%;
    visibilty: hidden !important;
    opacity: 0 !important;
    
}
.collection-hero__description {
    max-width: 100%;
    background-image: url('https://cdn.shopify.com/s/files/1/0674/6262/7573/files/zyro-image_12.jpg');
    background-size: 100%;
    display: flex;
}
</style>

 

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

ThePrimeWeb_0-1707224258799.jpeg

 

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

Reply 1 (1)

ThePrimeWeb
Shopify Partner
2118 606 470

This is an accepted solution.

Hey @AntonysaleBK,

 

Try this, you shouldn't loose quality.

 

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.

 

If you want to change the image, replace the url within quotes where it says:

background-image: url('https://cdn.shopify.com/s/files/1/0674/6262/7573/files/zyro-image_12.jpg'), put the high quality version there.

<style>
.collection-hero__description img {
    width: 100%;
    visibilty: hidden !important;
    opacity: 0 !important;
    
}
.collection-hero__description {
    max-width: 100%;
    background-image: url('https://cdn.shopify.com/s/files/1/0674/6262/7573/files/zyro-image_12.jpg');
    background-size: 100%;
    display: flex;
}
</style>

 

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

ThePrimeWeb_0-1707224258799.jpeg

 

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!