Solved

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

someone1921
Tourist
8 0 2

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

coreclothing_0-1716110436562.png 

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

coreclothing_1-1716110617985.png

 

I appreciate any help. Thank you 🙂

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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.

ThePrimeWeb_0-1716115773724.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

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

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.

ThePrimeWeb_0-1716115773724.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!
someone1921
Tourist
8 0 2

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

enesakd
Tourist
3 0 0

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"

enesakd_0-1718115836761.png