Jump to content

Shopify cart icon on all pages

Recommended Posts

Hi all,I've a question about integrating Shopify add to cart buttons to Squarespace product pages.I've added Shopify 'add to cart' buttons to product pages. This is one of them: https://www.diestanderbaardkompanjie.co.za/test. (Password: 123456) The code has been generated by Shopify.It works as follows, if someone adds a product to the cart, a cart icon is shown on the right of the screen. The icon will be shown on every page where there's an add to cart button. So if you go to another product page with a similar button the cart icon is visible. However, this means on other pages of the website the cart icon is not visible.My question: is there a way to make the cart icon visible on every page? Shopify support couldn't help me. Bit of same policy as SS, no support on custom code.I do have a workaround direction in mind. If I add the same code snippet to the footer the cart icon is shown on every page. However, this also shows the add to cart button in the footer. Maybe there's a way to enhance the code in such a way that the add to cart button is not shown in the footer?

Link to comment
  • Replies 19
  • Views 4.9k
  • Created
  • Last Reply

Is there a way to use the Code Injection and add the following code to the header or footer without the button showing on the top left?


<div id='product-component-7c99128320b'></div>
   <script type="text/javascript">
   /*<![CDATA[*/

   (function () {
     var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
     if (window.ShopifyBuy) {
       if (window.ShopifyBuy.UI) {
         ShopifyBuyInit();
       } else {
         loadScript();
       }
     } else {
       loadScript();
     }

     function loadScript() {
       var script = document.createElement('script');
       script.async = true;
       script.src = scriptURL;
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
       script.onload = ShopifyBuyInit;
     }

     function ShopifyBuyInit() {
       var client = ShopifyBuy.buildClient({
         domain: 'die-stander-baard-kompanjie.myshopify.com',
         storefrontAccessToken: '7be21deb65addf5c0e6e894f71ff2bea',
       });

       ShopifyBuy.UI.onReady(client).then(function (ui) {
         ui.createComponent('product', {
           id: [3912100053070],
           node: document.getElementById('product-component-7c99128320b'),
           moneyFormat: 'R%20%7B%7Bamount%7D%7D',
           options: {
 "product": {
   "variantId": "all",
   "width": "240px",
   "contents": {
     "img": false,
     "imgWithCarousel": false,
     "title": false,
     "variantTitle": false,
     "price": false,
     "description": false,
     "buttonWithQuantity": false,
     "quantity": false
   },
   "text": {
     "button": "VOEG BY TROLLIE"
   },
   "styles": {
     "product": {
       "text-align": "left",
       "@media (min-width: 601px)": {
         "max-width": "100%",
         "margin-left": "0",
         "margin-bottom": "50px"
       }
     },
     "button": {
       "background-color": "#000000",
       ":hover": {
         "background-color": "#000000"
       },
       ":focus": {
         "background-color": "#000000"
       },
       "font-weight": "normal"
     },
     "variantTitle": {
       "font-weight": "normal"
     },
     "title": {
       "font-size": "26px"
     },
     "description": {
       "font-weight": "normal"
     },
     "price": {
       "font-size": "18px",
       "font-weight": "normal"
     },
     "compareAt": {
       "font-size": "15px",
       "font-family": "Helvetica Neue, sans-serif",
       "font-weight": "normal"
     }
   }
 },
 "cart": {
   "contents": {
     "button": true
   },
   "text": {
     "title": "Trollie",
     "total": "SUB TOTAAL",
     "notice": "Pos en afslagkodes word by die kassier bygevoeg.",
     "button": "GAAN VOORT MET BETALING",
     "empty": "Jou trollie is leeg."
   },
   "styles": {
     "button": {
       "background-color": "#000000",
       ":hover": {
         "background-color": "#000000"
       },
       ":focus": {
         "background-color": "#000000"
       },
       "font-weight": "normal"
     },
     "footer": {
       "background-color": "#ffffff"
     }
   }
 },
 "modalProduct": {
   "contents": {
     "img": false,
     "imgWithCarousel": true,
     "variantTitle": false,
     "buttonWithQuantity": true,
     "button": false,
     "quantity": false
   },
   "styles": {
     "product": {
       "@media (min-width: 601px)": {
         "max-width": "100%",
         "margin-left": "0px",
         "margin-bottom": "0px"
       }
     },
     "button": {
       "background-color": "#000000",
       ":hover": {
         "background-color": "#000000"
       },
       ":focus": {
         "background-color": "#000000"
       },
       "font-weight": "normal"
     },
     "variantTitle": {
       "font-weight": "normal"
     },
     "description": {
       "font-weight": "normal"
     },
     "price": {
       "font-weight": "normal"
     },
     "compareAt": {
       "font-family": "Helvetica Neue, sans-serif",
       "font-weight": "normal"
     }
   }
 },
 "toggle": {
   "styles": {
     "toggle": {
       "background-color": "#000000",
       ":hover": {
         "background-color": "#000000"
       },
       ":focus": {
         "background-color": "#000000"
       },
       "font-weight": "normal"
     }
   }
 },
 "productSet": {
   "styles": {
     "products": {
       "@media (min-width: 601px)": {
         "margin-left": "-20px"
       }
     }
   }
 }
}
         });
       });
     }
   })();
   /*]]>*/
   </script>


Link to comment
  • 1 year later...

Jumping in here to say I used this same process - I added my shopify buy button to my footer code injection on my site, then used the css rule provided by @tuanphan and it works great on 7.1 too! https://www.moonlightgardensupply.com/# (note, you have to have products in your cart for it to show up, but once you do, the cart appears on every page without showing the list of products I have hidden in my footer).

 

Thank you!

Link to comment

@tuanphan I wish to have the card button on every page. At the moment it only appears when you are on page that has a product for sale. 

I have put the buy button code in the footer code injection as mentioned above but the code you provided above does not hide it, I want it hidden so you cannot see it in the footer. 

 

Link to comment
  • 4 weeks later...
  • 6 months later...
On 3/21/2021 at 4:21 PM, j-l said:

@tuanphan Having the exact same issue as @GretelVause! I copy and pasted the add to cart button code into the footer and after inputting the code that was provided to remove the icon into Custom CSS, unfortunately the icon is still there.

Hi. Can you share link to your site? Wee will check again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 7/19/2021 at 6:02 AM, chocsandtruffles said:

@tuanphan I also tried following the instructions on this page with the footer and css code to display none, however the add to cart in the footer is not hidden. Link to my site is chocsandtruffles.com and pw is nba12345

Add to Design > Custom CSS

/* hide add to cart footer */
footer.sections .shopify-buy-frame--product {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.