Shopify

Why you should use Shopify for your business?

Shopify is a e-commerce platform that allows anyone to set up an online store and sell their products.
If you’re not tech savvy and you want your own e-commerce store, and have outgrown marketplaces like eBay or Amazon, and just starting out, go with Shopify.

What is difference between WordPress and Shopify?

Shopify is an online tool/service, whereas WordPress is stand-alone software that you need to install yourself.

This article will guide you on how to create a sticky Add To Cart button on the Shopify product page without the app.

How to add the “add to cart” button on my collection page

Just follow the steps for the Debut theme for Add to cart button on collection pages.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Open Snippets -> product-card-grid.liquid File and paste the below code at the end of the page.
<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ 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>

How to create Sticky Add To Cart Button in Shopify Product Page without app

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Snippets directory, click Add a new snippet.

  • Add the following lines of code:
{% if template contains 'product' %}
<div id="addtocart-sticky">
  <form action="/cart/add" method="post">
    <select name="id">
      {% for variant in product.variants %}
      <option value="{{variant.id}}">{{variant.title}}</option>
      {% endfor %}
    </select>
    <input type="number" name="quantity" value="1" min="1">
    <button type="submit">Add To Cart</button>
  </form>
</div>
<style>
  #addtocart-sticky{
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding-top: 5px;
    border-top: 1px solid #e2e2e2;
  }
  #addtocart-sticky select,
  #addtocart-sticky input,
  #addtocart-sticky button{
    height:40px;
    margin:0 5px;
    vertical-align: middle;
  }
  #addtocart-sticky input{
    width: 60px;
    text-align: center;
  }
  #addtocart-sticky button{
    padding:0 10px;
  }
</style>
{% endif %}
  • Click Save and close it.
  • In the Layout directory, click theme.liquid to open.
  • Add the following code above the closing body tag (</body>)
{% include 'add-to-cart-sticky-custom' %}
  • Click Save and you are done.

Leave a Reply

Your email address will not be published. Required fields are marked *