Content overlapping

Solved
Bella_Lenses
Tourist
8 0 1

Hi!

I added "add to cart" button with products on home page. I added the following code in card-product.liquid

 

 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
  </form>

Now content of cart is overlapping as follows. 

 

shopify_temp.png

 

Any help will be appreciated.

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
5402 980 1005

This is an accepted solution.

Hi @Bella_Lenses 

Your theme has quick add by default, please enable it from Online store > Themes > Customize > Collections > Default collections > Product grid > precheck b

Screenshot 2023-10-11 at 14.18.39.png

 

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 12 (12)
Moeed
Shopify Partner
3016 753 911

Hey @Bella_Lenses 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Bella_Lenses
Tourist
8 0 1

My store URL is https://87b913-2.myshopify.com/ and password is 12345

Moeed
Shopify Partner
3016 753 911

Hey @Bella_Lenses 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__information {
    padding-bottom: 0 !important;
}
form {
    margin-top: -15px !important;
}
</style>

RESULT:

Moeed_0-1697010240908.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Bella_Lenses
Tourist
8 0 1

Really apologize, I am not allowed to share the store login information at this time. 

Dan-From-Ryviu
Shopify Partner
5402 980 1005

This is an accepted solution.

Hi @Bella_Lenses 

Your theme has quick add by default, please enable it from Online store > Themes > Customize > Collections > Default collections > Product grid > precheck b

Screenshot 2023-10-11 at 14.18.39.png

 

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Bella_Lenses
Tourist
8 0 1

Yes tried it as you said but not showing "Add to Cart" button.

Dan-From-Ryviu
Shopify Partner
5402 980 1005

If you want to make it appear like the custom code you added, please add the code, give me password protected of your store so I can provide the code to solve the overlap issue

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Bella_Lenses
Tourist
8 0 1

Thank you for your prompt reply. Yes already shared above.

 

shopify_image_temp.png

Dan-From-Ryviu
Shopify Partner
5402 980 1005

Hi @Bella_Lenses 

I saw you already solve the issue.

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Bella_Lenses
Tourist
8 0 1

I apologize, I am not allowed to share the store login information at this time. 

PageFly-Noah
Globetrotter
561 130 130

Hi @Bella_Lenses 

 

This is Noah from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product-grid li {
    padding-bottom: 20px;
}
.product-grid li form {
    margin-top: -15px;
}

</style>

PageFlyNoah_0-1697013518745.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Bella_Lenses
Tourist
8 0 1

The problem is solved now. There is an option to add the button on home page, featured products.

 

Bella_Lenses_0-1697090304912.png