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.
User | RANK |
---|---|
242 | |
162 | |
64 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023