Shopify themes, liquid, logos, and UX
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('section.ProductItem-additional .code-block').insertBefore($('.ProductItem-details-excerpt>p:last-child'));
});
</script>
<div id='product-component-1598716105826'></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: 'adage-jewelry.myshopify.com',
storefrontAccessToken: '3a15e34a359af939fcc7a2a1d52f7502',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '5590627188897',
node: document.getElementById('product-component-1598716105826'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#8c99a7"
},
"background-color": "#9baaba",
":focus": {
"background-color": "#8c99a7"
},
"border-radius": "5px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
},
"googleFonts": [
"Open Sans"
]
},
"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": "Open Sans, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#8c99a7"
},
"background-color": "#9baaba",
":focus": {
"background-color": "#8c99a7"
},
"border-radius": "5px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
}
},
"googleFonts": [
"Open Sans"
],
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#8c99a7"
},
"background-color": "#9baaba",
":focus": {
"background-color": "#8c99a7"
},
"border-radius": "5px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"googleFonts": [
"Open Sans"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"background-color": "#9baaba",
":hover": {
"background-color": "#8c99a7"
},
":focus": {
"background-color": "#8c99a7"
}
},
"count": {
"font-size": "16px",
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
},
"googleFonts": [
"Open Sans"
]
}
},
});
});
}
})();
/*]]>*/
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
Hello,
I would like to change the wording of "Out of Stock" to "Coming Soon" or even to "Pre-order".
I would like for the button to open up a link (our contact page on the website), if the items are out of stock.
I tried to modify the code but I couldn't find where I should change it.
I've put an example of the code. I only see the lines for "add to cart" and "Subtotal".
I had this same issue.
the button text section requires an extra value:
"text": {
"button": "Add to cart",
"outOfStock": 'Coming Soon'
}
Wow, this really works. Can't believe there is no doc for this. Or maybe there is, but I haven't found it yet.
Jesus Rococo, thank you so much, it f#@§=ég works! 🙂
Thanks @RococoDigital I found it here (SEO works) then searched the Github page.
@thatgriffith i found docs on Github at https://github.com/Shopify/buy-button-js/blob/master/docs/customization/index.md#product-text-defaul...
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025