Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Shopify cart icon on all pages


kelpcreative

Question

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?

Edited by kelpcreative
Initial Revision
Link to post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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! http

Posted Images

16 answers to this question

Recommended Posts

  • 0

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 post
  • 0

You can use CSS to hide add to card footer. I don't see add to cart footer?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@tuanphan thanks for your comment. I injected the code into the 'head' tag. Sorry I'm not that savvy with code so can you please let me know how I would go about using CSS to hide the button on the top left? Thanks

Link to post
  • 0

Can you take screenshot of button which you want to hide? I don' see that button

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@kelpcreative Try adding to Home > Design > Custom CSS


div#product-component-7c99128320b {
   display: none;
}


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@kelpcreative You're welcome. You can click Accept Answer. Other members can use if they know it worked.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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 post
  • 0
17 hours ago, JennieFage said:

@tuanphan sorry I am not sure if you would have seen this? 

What is your problem? Can you describe in detail? 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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 post
  • 0

@tuanphan I also tried to put the buy button code in the footer code injection, then used the css rule provided by @tuanphan above but still doesn't hide it as per my uploaded images below "add to cart" button. How can I hide so that you cannot see it in the footer? 🙂

Snip20200918_2.png

Edited by GretelVause
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...