Need Help Adjusting "Add to Cart" Button Placement on Home and Collection Pages

[littlemaster]

I’m facing an issue with the placement of the "Add to Cart" button on my Shopify store. Currently, the button is not aligning properly under the product images on both the home page and the collection pages. I would like to adjust its position so that it appears neatly below each product, maintaining a clean and consistent layout.

I've tried modifying the theme’s CSS but haven't been able to achieve the desired alignment. Could someone guide me on how to adjust the button placement properly? Any help or code suggestions would be greatly appreciated.

[rajweb]

Hey @littlemaster ,

It looks like the "Add to Cart" button is misaligned and overlapping with the product price. To fix this, you'll likely need to adjust the CSS of your Shopify theme. Try adding the following CSS to your theme’s stylesheet:

Follow These Steps:

1. Online store > themes

2. Click Customize on your active theme (Focal theme).

3.  Click Theme Settings → Custom CSS and add the following code:

.product-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.product-grid-item .product-title,
.product-grid-item .price {
    text-align: center;
    width: 100%;
}

.product-grid-item .product-form {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px; /* Adjust spacing if needed */
}

.product-grid-item .product-form button {
    width: 90%; /* Ensure button takes proper width */
    max-width: 180px; /* Adjust max width as per design */
}

Try this and refresh your page. Let me know if you need further adjustments!  Please share the URL so I can check exactly and give you the right code to solve this issue.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[littlemaster]

unfortunately not working...
here is the URL
www.lillmatser.com

Little Master

[GTLOfficial]

Hello @littlemaster 
This is what i can see

[acunafitness]

To fix the alignment of the "Add to Cart" button under the product images in your Shopify store, you can follow these steps:

1. Edit Your Shopify Theme CSS

• Go to your Shopify Admin panel.
• Navigate to Online Store > Themes.
• Click Customize on your active theme.
• In the theme editor, click the Theme Actions dropdown (bottom left) and select Edit Code.

2. Modify the CSS

• In the Assets folder, find your main CSS file (often named theme.css, styles.css, or similar).
• Add the following CSS code at the end of the file:
  

  .product-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers content */
  text-align: center; /* Ensures text aligns neatly */
  }

  .product-card .product-image {
  margin-bottom: 10px; /* Adds space between image and button */
  }

  .product-card .add-to-cart {
  width: 100%; /* Ensures full-width alignment */
  margin-top: auto; /* Pushes the button to the bottom */
  padding: 8px 0; /* Adjust padding for better appearance */
  }

  3. Adjust the HTML Structure (if needed)

  If the CSS alone doesn't fix the issue, you may need to modify your HTML structure slightly:

  • Locate the product-card.liquid file (or similar) in the Sections or Snippets folder.
  • Ensure the structure follows this pattern:
    

    <div class="product-card">
    <div class="product-image">
    {{ product.image | img_url: 'large' | img_tag }}
    </div>
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <button class="add-to-cart">Add to cart</button>
    </div>

  4. Test and Adjust

  • Save your changes and refresh your store's homepage and collection pages.
  • If the alignment is still off, try adjusting the margin or padding values in the CSS.
  
  Try this method I have also fixed this issue using this method in my website 
  Acunafitness
  
  
  
  

[littlemaster]

Issue remains same...

[acunafitness]

Does your problem get fixed or not?

[littlemaster]

not