shop layout changes

eliez3r · Feb 21, 2020 · 4c706ee · 4c706ee
1 parent 42e62a8
commit 4c706ee
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/_includes/shop_breadcrumb.html b/_includes/shop_breadcrumb.html
@@ -0,0 +1,10 @@
+<div class="col-lg-12">
+        <nav aria-label="breadcrumb" role="navigation">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a href="{{site.url}}{{site.baseurl}}/shop"><i class="fa fa-home" aria-hidden="true"></i></a>
+                    </li>
+                    <li class="breadcrumb-item active" aria-current="page"><a href="{{page.url}}">{{ page.title }}</a></li>
+                </ol>
+            </nav>
+        </div>
diff --git a/_layouts/product.html b/_layouts/product.html
@@ -3,7 +3,7 @@
 ---
 <div class="row">
   <div class="col-lg-12">
-      <nav class="sticky-top">
+      <nav class="fixed-top" id="snipcart-floating-cart">
           <button class="btn btn-lg btn-dark header__checkout snipcart-checkout">
               <svg width="31" height="27" viewBox="0 0 31 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -18,6 +18,8 @@
   </div>
 </div>
 <div class="row">
+      <!-- Blog Post Breadcrumbs -->
+{%- include shop_breadcrumb.html -%}
    <div class="col-lg-8 offset-md-2">
         {% for product in site.products %}
 

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -26,6 +26,7 @@ html[data-theme="dark"] {
     --social-link-color: #ffffff;
     --card-background-color: rgb(32, 32, 34);
     --newsletter-background-color: #222324;
+    --button-background-color: #111;
 }
 
 html,
@@ -45,6 +46,7 @@ html[data-theme="light"] {
     --social-link-color: #262222;
     --card-background-color: rgb(250, 250, 250);
     --newsletter-background-color: #00000008;
+    --button-background-color: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -65,6 +67,7 @@ html[data-theme="light"] {
         --social-link-color: #ffffff;
         --card-background-color: rgb(32, 32, 34);
         --newsletter-background-color: #222324;
+        --button-background-color: #111;
     }
 
     /* Light Mode */
@@ -83,6 +86,7 @@ html[data-theme="light"] {
         --underline-color: hsl(0, 0%, 60%);
         --social-link-color: #262222;
         --card-background-color: rgb(250, 250, 250);
+        --button-background-color: #fff;
     }
 }
 
@@ -246,6 +250,15 @@ header {
 .snipcart__button--icon {
     border: 0px solid #f0f5f6 !important;
 }
+#snipcart-floating-cart{
+    margin-top: 150px;
+}
+.snipcart-cart-button--secondary {
+    color: --var(--bold-color) !important;
+    background-color: var(--button-background-color) !important;
+    padding: 16px;
+    text-transform: none;
+}
 
 /* Gallery */
 /* image-gallery */