{% extends 'shop/base.html' %}
{% load staticfiles %}
{% load static %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'shop/detail.css' %}"/>     
{% endblock %}

{%block content %}
    <div class="container">
        <div class="card">
            <div class="container-fliud">
                <div class="wrapper row">
                    <div class="preview col-md-6">              
                       <img src="{{ product.image.url }}">                        
                    </div>
                    <div class="details col-md-6">
                        <h3 class="product-title">{{ product.name }}</h3>

                        <p class="product-description"> {{ product.display_description_file | linebreaks }} </p>
                        <h4 class="price">current price: <span> {{ product.price }}</span></h4>                    
                        
                        <h5 class="colors">colors:
                            <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
                            <span class="color green"></span>
                            <span class="color blue"></span>
                        </h5>

                        <div class="action">
                            <button class="add-to-cart btn btn-default" type="button">add to cart</button>                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% extends 'shop/base.html' %}
{% load staticfiles %}
{% load static %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'shop/detail.css' %}"/>     
{% endblock %}

{%block content %}
    <div class="container">
        <div class="card">
            <div class="container-fliud">
                <div class="wrapper row">
                    <div class="preview col-md-6">              
                       <img src="{{ product.image.url }}">                        
                    </div>
                    <div class="details col-md-6">
                        <h3 class="product-title">{{ product.name }}</h3>

                        <p class="product-description"> {{ product.display_description_file | linebreaks }} </p>
                        <h4 class="price">current price: <span> {{ product.price }}</span></h4>                    
                        
                        <h5 class="colors">colors:
                            <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
                            <span class="color green"></span>
                            <span class="color blue"></span>
                        </h5>

                        <div class="action">
                            <button class="add-to-cart btn btn-default" type="button"><a href="{% url 'shopping:shopping-cart-add'%}?id={{product.id}}">add to cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

Add fuction for add to cart button
Add fuction for add to cart button
