Can I add an Add to Cart button to the You may also like section?

[mOONbOOTS]

Hello,

Can I add an Add to Cart button to the You may also like section?

Also, I've been struggling with showing more than 4 related products with a slider like this one: Preview Allure Theme - Prestige Ecommerce Website Template (shopify.com)

You'll have to scroll down to the bottom of the page to see the You may also like slider section. I assume it's done with JavaScript? Funny enough, it also has an add to cart button.

Photo Example:

Any help is greatly appreciated!

[dws_pvt_ltd]

Please share your store URL and password.So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Sangeetanahar]

hello @mOONbOOTS 

yes you can also give your website url and if possible give the code of slider section

thanks

[anupam1607]

Hey @mOONbOOTS 
In the product-recommendations.liquid or related-products.liquid add an "Add to Cart" button.

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <button type="submit" class="add-to-cart-btn">Add to Cart</button>
</form>

For the slider you can use Slick Slider or Swiper.js.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="related-products-slider">
  {% for product in recommendations %}
    <div class="related-product">
      <!-- Your product card code -->
      <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        <button type="submit" class="add-to-cart-btn">Add to Cart</button>
      </form>
    </div>
  {% endfor %}
</div>

I've used Slick slider here there is a JS

$(document).ready(function(){
  $('.related-products-slider').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    dots: true,
    arrows: true
  });
});

[Bundler-Manuel]

Hello @mOONbOOTS feel free to share your store URL link so I and/or others can give it a check and give you the must appropriate solution. Thanks in advance!