Changing text of Add to bag button

Say you want to update the text of "Add to bag" button to "Place in bag". To replace this you need to go to the file that contains the text "Add to bag" and replace it with the new text. You can find the text in the file layout.html. In the file search for the text "Add to bag" and you'd find this code

Line number 291 has Nunjucks code DUKAAN_LANGUAGE.ADD_TO_BAG It basically fetches the text equivalent for "Add to bag" from the variable DUKAAN_LANGUAGE which contains a list of all texts as per the store language set.

So, you can replace it directly with your text "Place in bag", and this is how the updated code would look like.

You need to replace the text for all occurrences of "Add to bag" button in the layout.html file since this button is used in multiple places, make sure you don't miss out on any else you'll see the "Add to bag" text in some places and "Place in bag" button in the remaining.

Deploy the change to see it live on your preview and main store.

Alternative using Javascript (Not recommended)

You can use query selectors to target the Add to Bag button and replace its text. Place this code snippet in the layout.js file and then deploy to see the changes live.

const buttons = document.querySelectorAll('.without-cart-add-to-bag-button');

buttons.forEach(button => {
  button.textContent = 'Place in bag';
});