Solved

Align Price In The Collection Page At The Same Level IMPACT Theme

Hobbycards
Tourist
14 0 1

Hello,

 

I'm looking for a solution to align the prices of our products. I'm using the Impact theme. Thank you!


Hobbycards_0-1711234927702.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2113 605 470

This is an accepted solution.

Hey @Hobbycards,

 

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>
price-list.price-list {
    margin-top: auto !important;
}

.product-card__info > div {
    display: flex !important;
    flex-direction: column !important;
}

.product-card__info {
    display: flex !important;
}

@media only screen and (max-width: 989px) {
    .product-card__info {
        height: 100% !important;
    }

    product-card.product-card.product-card--show-secondary-media.bg-custom.text-custom {
        display: flex !important;
        flex-direction: column !important;
    }
}
</style>

 

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

ThePrimeWeb_0-1711237194458.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 2 (2)

ThePrimeWeb
Shopify Partner
2113 605 470

This is an accepted solution.

Hey @Hobbycards,

 

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>
price-list.price-list {
    margin-top: auto !important;
}

.product-card__info > div {
    display: flex !important;
    flex-direction: column !important;
}

.product-card__info {
    display: flex !important;
}

@media only screen and (max-width: 989px) {
    .product-card__info {
        height: 100% !important;
    }

    product-card.product-card.product-card--show-secondary-media.bg-custom.text-custom {
        display: flex !important;
        flex-direction: column !important;
    }
}
</style>

 

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

ThePrimeWeb_0-1711237194458.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!
Hobbycards
Tourist
14 0 1

Thank you!