How To Move Collection Name and 'View All' Button to the same line In Dawn Theme

someone1921 · ‎05-19-2024

Hello! So, i want to move the "view all" button to the right side of the title line.

It looks like this now, and I want it to look like the image below.

I appreciate any help. Thank you 🙂

ThePrimeWeb · ‎05-19-2024

Hey @someone1921,

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>
.collection:has(.collection__view-all) {
    display: grid !important;
    grid-template-columns: auto auto !important;
}

.collection:has(.collection__view-all) .collection__title {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.collection:has(.collection__view-all) slider-component {
    grid-row: 2 !important;
    grid-column: 1/3 !important;
    width: 100% !important;
    overflow:hidden !important;
}

.collection:has(.collection__view-all) .collection__view-all {
    grid-row: 1 !important;
    grid-column: 2 !important;
    width: 100% !important;
    text-align: right !important;
    padding-right: 5% !important;
}

@media only screen and (min-width: 990px) {
    .collection:has(.collection__view-all) .collection__title {
        padding-left: 10% !important;
    }   

    
    .collection:has(.collection__view-all) .collection__view-all {
        padding-right: 10% !important;
    }
}

@media only screen and (max-width: 989px) {
    .collection:has(.collection__view-all) .collection__title * {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
    }    

    .collection:has(.collection__view-all) .collection__view-all a {
        min-height: 40px !important;
        margin-bottom: 10px !important;
    }
}
</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 · ‎05-19-2024

Hey @someone1921,

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>
.collection:has(.collection__view-all) {
    display: grid !important;
    grid-template-columns: auto auto !important;
}

.collection:has(.collection__view-all) .collection__title {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.collection:has(.collection__view-all) slider-component {
    grid-row: 2 !important;
    grid-column: 1/3 !important;
    width: 100% !important;
    overflow:hidden !important;
}

.collection:has(.collection__view-all) .collection__view-all {
    grid-row: 1 !important;
    grid-column: 2 !important;
    width: 100% !important;
    text-align: right !important;
    padding-right: 5% !important;
}

@media only screen and (min-width: 990px) {
    .collection:has(.collection__view-all) .collection__title {
        padding-left: 10% !important;
    }   

    
    .collection:has(.collection__view-all) .collection__view-all {
        padding-right: 10% !important;
    }
}

@media only screen and (max-width: 989px) {
    .collection:has(.collection__view-all) .collection__title * {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
    }    

    .collection:has(.collection__view-all) .collection__view-all a {
        min-height: 40px !important;
        margin-bottom: 10px !important;
    }
}
</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!

someone1921 · ‎05-19-2024

This worked perfectly! I really appreciate the work you've put into this. Have an amazing day! 🙂

enesakd · ‎06-11-2024

Thanks a lot! It almost worked perfectly. I only don't understand why it's 1 line above the collection title. It's not perfectly aligned. I'm using theme "taste"

FloridaGlow · ‎07-29-2024

@enesakd I have the same problem, were you able to find a solution?

enesakd · ‎07-29-2024

No, i decided to buy a new theme. I bought it on Envato.

FloridaGlow · ‎07-29-2024

Ah got it, thanks.

DMMinis · ‎11-27-2024

This doesn't auto adjust to screen size for whatever reason. if you minimize the window it'll look wierd.

How To Move Collection Name and 'View All' Button to the same line In Dawn Theme