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! 🙂
User | RANK |
---|---|
141 | |
113 | |
79 | |
64 | |
63 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023