Solved

Change the toggle of the buy button

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>

 

 

Accepted Solution (1)

Bunty
Shopify Partner
133 39 82

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

View solution in original post

Replies 7 (7)

Bunty
Shopify Partner
133 39 82

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! 

Bunty
Shopify Partner
133 39 82

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
Shopify Partner
133 39 82

@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

catalogue
Visitor
1 0 0

Hi Bunty, I'm trying to do the same thing but haven't been successful in pasting in the code. Could you explain where to insert it with a little more detail, I am very new to this...

Many thanks, 

NegativeSplits
Visitor
1 0 0

Hi @Orangeorred ,

I visited your website and noticed you got the cart to show up globally and remain in your header. I'm struggling to do the same thing and was wondering if you can share how you did it?

Beautiful work by the way! ^_^

Bests,

Oli