Solved

Content overlapping

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
6959 1318 1342

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
3542 892 1107

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. ❤️
Canva to Shopify in clicks - Free App
Bella_Lenses
Tourist
8 0 1

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

Moeed
Shopify Partner
3542 892 1107

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. ❤️
Canva to Shopify in clicks - Free App
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
6959 1318 1342

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. 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
6959 1318 1342

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. 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
6959 1318 1342

Hi @Bella_Lenses 

I saw you already solve the issue.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. 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 137

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