Solved

Align add to cart button

Mtgwebshopdk
Visitor
2 0 0

Hi,

I am trying to align the add to cart button on my products, which is caused to the diffrent product title lengths.

 

I have tried diffrent codes, but unsure where to add them?

 

The theme is vision and the store is 

 

https://pokeplanet.dk/

 

 

Accepted Solution (1)

techlyser_web
Shopify Partner
1118 214 234

This is an accepted solution.

Hello @Mtgwebshopdk 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    .product-card .price {
       margin-bottom: 20px !important;
    }
    .product-card .price+.product-card-title {
          height: 4rem !important;
     }

</style>

techlyser_web_0-1705766555874.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 4 (4)

techlyser_web
Shopify Partner
1118 214 234

This is an accepted solution.

Hello @Mtgwebshopdk 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    .product-card .price {
       margin-bottom: 20px !important;
    }
    .product-card .price+.product-card-title {
          height: 4rem !important;
     }

</style>

techlyser_web_0-1705766555874.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1118 214 234

Was my reply helpful? Click Like to let me know!

Thanks

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Mtgwebshopdk
Visitor
2 0 0

Hi,

Thank you, this worked on computer, but i still have 2 problems when displayed on mobile.

 

The Add to cart button in overlapping the product title on mobile, and the items on sale which causes 2 prices to be displayed leads to the add to cart button is unaligned again,

 

Can you help?

 

Sincerely

Frederik Lee

techlyser_web
Shopify Partner
1118 214 234

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    @media screen and (max-width:767px){
       .product-card .button{
           product:7px 10px !important;
       }
       .product-card--content-spacing-true .product-card-info {
            padding: 10px !important;
        }
        .product-card .price {
            margin-bottom: 20px !important;
           height: 30px !important;
           display: flex !important;
           font-size: 12px !important;
    }
    .product-card .price+.product-card-title {
         height: 5rem !important;
         font-size: 15px !important;
    }
    span.product-card--add-to-cart-text {
       font-size: 14px !important;
   }
   .product-card .badge.top {
       top: 4px !important;
      font-size:11px !important;
    }
    .badge{
         padding:8px !important;
    }
}

</style>

techlyser_web_0-1705772339110.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com