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

AntonysaleBK · ‎02-06-2024

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

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

ThePrimeWeb · ‎02-06-2024

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.

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-06-2024

Hey @AntonysaleBK,