Change the toggle of the buy button

Solved
Orangeorred
Tourist
8 0 3

Hi! 

I'm working on a website on webflow and i'm using the shopify buy button for the online store. I'm happy with how the buy button looks, only the the toggle part with the cart icon, that you click on to go your cart, is still not to my liking. 

First of all I would like to change the icon itself. I've uploaded the wanted icon on shopify but I'm not sure now were to put this link.. 

Secondly, I would like to change the placement of the cart icon. It is by default placed on the right side of the screen, but I want to place it somewhere else. I've noticed if I put: '  "sticky": false, ' under toggle, the icon will move to the bottom of the body. But I want it to be in the right top corner. How can I get it there? 

Thirdly, I want the cart icon to appear on all pages of my site and not only on the shop pages. Does someone have a workaround for that as well? I wanted to place the code for the buy button on all my pages, but than i couldn't click it. 

My shopify store URL is https://orangeorred.myshopify.com/ 
The URL for my webflow website is: https://mariekes-initial-project-fd666c.webflow.io/shop-en/blends-tote-anthracite
This is how my website looks right now: 

Capture3.JPG

<div id='product-component-{{wf {&quot;path&quot;:&quot;product-component-shopify&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}'></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: 'orangeorred.myshopify.com',
      storefrontAccessToken: '5240837c1d2def9cfcc49dc2b5525ac5',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '{{wf {&quot;path&quot;:&quot;product-id-shopify&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
        node: document.getElementById('product-component-{{wf {&quot;path&quot;:&quot;product-component-shopify&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}'),
        moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-family": "Arial, sans-serif",
        "font-size": "14px",
        "padding-top": "1px",
        "padding-bottom": "15px",
        "color": "#434343",
        ":hover": {
          "color": "#434343",
          "background-color": "#f7f5f1"
        },
        "background-color": "#f7f5f1",
        ":focus": {
          "background-color": "#f7f5f1"
        },
        "border-radius": "0px",
        "padding-left": "41px",
        "padding-right": "41px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "2px",
        "padding-bottom": "2px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "add to cart"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Arial, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#434343",
        ":hover": {
          "color": "#434343",
          "background-color": "#f7f5f1"
        },
        "background-color": "#f7f5f1",
        ":focus": {
          "background-color": "#f7f5f1"
        },
        "border-radius": "0px",
        "padding-left": "41px",
        "padding-right": "41px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      }
    },
    "text": {
      "button": "add to cart"
    }
  },
  "option": {
    "styles": {
      "label": {
        "font-family": "Arial, sans-serif"
      },
      "select": {
        "font-family": "Arial, sans-serif"
      }
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Arial, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#434343",
          "background-color": "#f7f5f1"
        },
        "background-color": "#adadad",
        ":focus": {
          "background-color": "#f7f5f1"
        },
        "border-radius": "0px"
      },
      "title": {
        "color": "#434343"
      },
      "header": {
        "color": "#434343"
      },
      "lineItems": {
        "color": "#434343"
      },
      "subtotalText": {
        "color": "#434343"
      },
      "subtotal": {
        "color": "#434343"
      },
      "notice": {
        "color": "#434343"
      },
      "currency": {
        "color": "#434343"
      },
      "close": {
        "color": "#434343",
        ":hover": {
          "color": "#434343"
        }
      },
      "empty": {
        "color": "#434343"
      },
      "noteDescription": {
        "color": "#434343"
      },
      "discountText": {
        "color": "#434343"
      },
      "discountIcon": {
        "fill": "#434343"
      },
      "discountAmount": {
        "color": "#434343"
      },
      "cart": {
        "background-color": "#f7f5f1"
      },
      "footer": {
        "background-color": "#f7f5f1"
      }
    },
    "text": {
      "title": "Cart",
      "total": "Subtotal",
      "empty": "Your cart is empty. ",
      "notice": "Shipping and discount codes will be added at checkout. ",
      "button": "Checkout"
    },
    "popup": false
  },
  "toggle": {
    "sticky": true,
    "styles": {
      "toggle": {
        "font-family": "Arial, sans-serif",
        "background-color": "#f7f5f1",
        ":hover": {
          "background-color": "#f7f5f1"
        },
        ":focus": {
          "background-color": "#f7f5f1"
        }
      },
      "count": {
        "font-size": "12px",
        "color": "#434343",
        ":hover": {
          "color": "#434343"
        }
      },
      "iconPath": {
      "icon": '<svg xmlns="https://cdn.shopify.com/s/files/1/0565/6425/2845/files/bag.png?v=1620071971"/>',
        "fill": "#434343"
      }
    }
  },
  "lineItem": {
    "styles": {
      "variantTitle": {
        "color": "#434343"
      },
      "title": {
        "color": "#434343"
      },
      "price": {
        "color": "#434343"
      },
      "fullPrice": {
        "color": "#434343"
      },
      "discount": {
        "color": "#434343"
      },
      "discountIcon": {
        "fill": "#434343"
      },
      "quantity": {
        "color": "#434343"
      },
      "quantityIncrement": {
        "color": "#434343",
        "border-color": "#434343"
      },
      "quantityDecrement": {
        "color": "#434343",
        "border-color": "#434343"
      },
      "quantityInput": {
        "color": "#434343",
        "border-color": "#434343"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

 

Bunty
Tourist
104 25 61

This is an accepted solution.

I can partially help

#1 Shopify injects an SVG, you can hide what it injects by using something like this

svg.shopify-buy__icon-cart.shopify-buy__icon-cart--side {
    display: none;
}

and then add your own icon by using something like this

.is-sticky.shopify-buy__cart-toggle:after {
    content: '';
    background-image: url(https://previews.123rf.com/images/flatdesign/flatdesign2009/flatdesign200900083/154640851-shopping-cart-icon-vector-shopping-cart-icon-shopping-cart-illustration-for-web-mobile-apps-shopping.jpg);
    background-size: 20px;
    height: 20px;
}

 

#2 Shopify adds the button in an iFrame, you could use something like this to relocate

.shopify-buy-frame.shopify-buy-frame--toggle.is-sticky.is-active {
    position: absolute;
    top: 30px;
}

to display the number below the cart icon, something like this could be used

.is-sticky.shopify-buy__cart-toggle {
    display: flex;
    flex-direction: column-reverse;
    padding: 10px;
}

 

#3 No idea

 

Hope that helps

Orangeorred
Tourist
8 0 3

Thanks for helping Bunty! One more question, where exactly do I place there codes in my original code? I'd now placed it at the end of the code, but before 

});
});
}
})();
/*]]>*/
</script>

But now the whole code stopped working.. 

Thanks in advance! 

0 Likes
Bunty
Tourist
104 25 61

You need to include it inside <style></style> HTML tags

Refer and try it out here if you want https://www.w3schools.com/html/html_css.asp

Orangeorred
Tourist
8 0 3

Oh thank you so much! It's working! 

Only 1 thing: in the place where I put the URL of the icon, I placed the URL of the icon I uploaded on shopify, this one: https://cdn.shopify.com/s/files/1/0565/6425/2845/files/bag.png?v=1620071971

But is still shows the old one, what am I doing wrong here? 

Bunty
Tourist
104 25 61

@Orangeorred you haven't done anything wrong. It was my mistake to tell you this would work. In normal circumstances, it would, but the button is inside an iFrame, so it doesn't.

 

It's a bit more complicated and a pure CSS solution any more, so apologies it would be very time-consuming to test it and make it work for you. What you can do is to post a short job on a site like Fiver with this scope. Should cost you less than $50 to make that work.

 

All the best