How to change the font of the buy button?

pearlerwork
Excursionist
19 0 5

I'm using the Shopify Buy Button on Squarespace. I'm not having much luck changing the font within Squarespace. Does anyone know how to control the font and other CSS elements of these? 

https://pearler.squarespace.com/feels

This code from Shopify goes into the code block:

<style>
  .page-section>.content-wrapper {
    box-sizing: border-box !important;
}
</style>
<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">
<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: 'pearlerwork.myshopify.com',
      storefrontAccessToken: 'eec0fbe1582313daf17f1305b3293c33',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '6641103274161',
        node: document.getElementById('product-component-1617764303049'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
      }
    },
    "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)": {
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
        "padding-left": "70px",
        "padding-right": "70px"
      }
    },
    "text": {
      "button": "Add to cart ☞"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#feafb5",
        ":hover": {
          "background-color": "#e59ea3"
        },
        ":focus": {
          "background-color": "#e59ea3"
        }
      },
      "count": {
        "color": "#822504",
        ":hover": {
          "color": "#822504"
        }
      },
      "iconPath": {
        "fill": "#822504"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>
</div>

 

Thanks!

 

0 Likes
Pallavi
Shopify Expert
2170 353 462

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find versioned-site-css and paste this at the bottom of the file:

.shopify-buy__layout-vertical .shopify-buy__btn-wrapper {
text-align: left;
}

.shopify-buy__layout-vertical .shopify-buy__btn-wrapper button.shopify-buy__btn {
font-size: 16px;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
pearlerwork
Excursionist
19 0 5

Hello! Unfortunately because I only use the Buy Button, there is no theme needed and therefore no theme files:

 

Screen Shot 2021-06-28 at 1.47.20 pm.png

0 Likes