Change "Out of stock" text when using buy button

Highlighted
New Member
2 0 0

Hey. 

I'm quiet new to Shopify, loving it :)

I'm currently using buy button for my store but this store is in french so I definitely need to change the text "Out of stock" to its french traduction. 

Is there a way to do that ?

Thank you by advance,

Blaise

0 Likes
Highlighted
Shopify Staff
Shopify Staff
187 0 27

Hi Blaise!

Diana here from the Shopify Support Team.

There is definitely a way to translate the text on the Buy Button! Once you've generated your Buy Button's code, somewhere in the code there will likely be a section called "text", which will typically be sandwiched in between the "product" and "styles" sections; the default values for the button text are 'SHOP NOW' for the regular button, 'Out of stock' for the out of stock items, and 'Unavailable' for the unavailable items. To edit the default English text, you need to simply add or edit the required variables.

Now, without pasting the entirety of a Buy Button (as those can get quite long), let me give you an example of what to look for, where it likely will be, and what to add:

 "product": {
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "text": {
      "button": "ACHETEZ",
      "outOfStock": "RUPTURES DE STOCKS",
      "unavailable": "INDISPONIBLE"
    },
    "styles": {
      "product": {
        "text-align": "left",
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },

You can see I've added the French translation to the "text" section in the middle; just find the similar area in your own Buy Button code and edit as needed, and make sure you don't miss any commas!

(I also apologize if my French translation and/or grammar is poor--it's been awhile since my last French class! Practice makes perfect! :D)

Hope this helps, and best of luck with your shop!

Diana | Shopify Guru ~ Contact Shopify 24/7 at support.shopify.com!
1 Like
Highlighted
New Member
2 0 0

Hi Diana

Thank you very much for your answer !

Have a nice day/evening :)

Blaise

0 Likes
Highlighted
New Member
2 0 0

Hi, I hope all is well. I check my code 100 time, I can not seem to find the "Out of Stock" field. Please help.

<div id='collection-component-1594117186977'></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: 'reistas-shopping-cart.myshopify.com',
storefrontAccessToken: '6d72b2a373b74a0a42a4f32279d43e8e',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '175346909322',
node: document.getElementById('collection-component-1594117186977'),
moneyFormat: 'R%20%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"title": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"color": "#585858"
},
"button": {
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#70b9ad"
},
"background-color": "#7ccec0",
":focus": {
"background-color": "#70b9ad"
},
"padding-left": "42px",
"padding-right": "42px"
},
"price": {
"font-family": "Montserrat, sans-serif",
"color": "#585858"
},
"compareAt": {
"font-family": "Montserrat, sans-serif",
"color": "#585858"
},
"unitPrice": {
"font-family": "Montserrat, sans-serif",
"color": "#585858"
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "Koop"
},
"googleFonts": [
"Montserrat"
]
},
"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": "Montserrat, sans-serif",
":hover": {
"background-color": "#70b9ad"
},
"background-color": "#7ccec0",
":focus": {
"background-color": "#70b9ad"
},
"padding-left": "42px",
"padding-right": "42px"
},
"title": {
"font-family": "Montserrat, sans-serif",
"color": "#585858"
},
"price": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"color": "#585858"
},
"compareAt": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"color": "#585858"
},
"unitPrice": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"color": "#585858"
},
"description": {
"font-family": "Montserrat, sans-serif",
"color": "#585858"
}
},
"googleFonts": [
"Montserrat"
],
"text": {
"button": "Voeg in mandjie"
}
},
"cart": {
"styles": {
"button": {
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#70b9ad"
},
"background-color": "#7ccec0",
":focus": {
"background-color": "#70b9ad"
}
},
"title": {
"color": "#585858"
},
"header": {
"color": "#585858"
},
"lineItems": {
"color": "#585858"
},
"subtotalText": {
"color": "#585858"
},
"subtotal": {
"color": "#585858"
},
"notice": {
"color": "#585858"
},
"currency": {
"color": "#585858"
},
"close": {
"color": "#585858",
":hover": {
"color": "#585858"
}
},
"empty": {
"color": "#585858"
},
"noteDescription": {
"color": "#585858"
},
"discountText": {
"color": "#585858"
},
"discountIcon": {
"fill": "#585858"
},
"discountAmount": {
"color": "#585858"
}
},
"text": {
"title": "Jou mandjie",
"total": "Subtotaal",
"empty": "Jou mandjie is leeg",
"notice": "Die standaard afleweringskoste is R100 per mandjie. Bestellings van meer as R1000 word gratis afgelewer.",
"button": "Koop"
},
"popup": false,
"googleFonts": [
"Montserrat"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Montserrat, sans-serif",
"background-color": "#7ccec0",
":hover": {
"background-color": "#70b9ad"
},
":focus": {
"background-color": "#70b9ad"
}
}
},
"googleFonts": [
"Montserrat"
]
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#585858"
},
"title": {
"color": "#585858"
},
"price": {
"color": "#585858"
},
"fullPrice": {
"color": "#585858"
},
"discount": {
"color": "#585858"
},
"discountIcon": {
"fill": "#585858"
},
"quantity": {
"color": "#585858"
},
"quantityIncrement": {
"color": "#585858",
"border-color": "#585858"
},
"quantityDecrement": {
"color": "#585858",
"border-color": "#585858"
},
"quantityInput": {
"color": "#585858",
"border-color": "#585858"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

0 Likes
Highlighted
New Member
2 0 1

Same over here Webbado.

 

No 'Out of stock' in the code.

And the same with 'Next' for bigger collections. I want to translate this as well.

 

Anybody? TIA!

0 Likes
Highlighted
New Member
2 0 0

@Fat_Fish  I managed to solve both issues, I hope this helps:

1. Translating the "Out of Stock" text in the Shopify Button:

Add the following code to your button code under "text": { in line 158

"outOfStock": "Your Language Here"

 

2. Translating the "Next" Button Text:

Edit the button code as explained here:

Editing an embedded collection is similar to editing a product or a cart. To edit the properties of the products within the collection (for example, the layout of each product), you need to find the product configuration object and edit it in the same way that you would edit a product embed. To edit the properties of the collection itself (for example, the text of the Next page button), edit the productSet key instead.

Some properties, such as the text of a component, are configured through nested objects, which are objects that appear inside other objects. For example, the text for the Next page button appears inside the productSet component's text object:

options:

  "productSet": {

    "text": {

      "nextPageButton": "Continue" },

(Note: Remember the "," after "Continue" }. It took a non-coder like me hours after I realized the code from the Shopify Help center needs a "," in order for it to work.)

Hope this helps

0 Likes
Highlighted
New Member
2 0 1

@Webbado  thx a lot! I managed to find the solution with the help of your reply.

It was a bit different, probably because I use 'view product' instead of 'at to cart'. So some code had to be on another spot. But it works fine now.

 

Thx!

1 Like