Buy Button (Sales Channel) - How do I change "Next Page" button text

[leAdmin]

Hello Community and Shopify Staff / Developers

I am trying to change the text of the "Next page" button, when I set up an embed code for a collection in the buy button channel app, which I am going to use on my homepage.

The other buttons (Add to cart / Buy now / View product) can be customized, and the text can be changed, but not the "Next page" button. This is a problem, if someone wants to use another language than English for their navigation / buttons.

It seems, this would be an easy and necessary fix in the code of the app, that would benefit many.

Since I see no way to change this in the code, and we have no way of manipulating the iframe, once it is embedded on our page, I am hoping for some help from the Developer (Shopify).

I came across this post, but failed to see, where the code changes would have to be made. If I can add some lines to the embed code, that would also be a solution, but I don't know what I would have to declare and where exactly.

Another thing that bothers me, is that there is no way to reuse the existing embed code, that was set up already. For example, I would want to use the same embed code (styles) for a different category, there is no way of getting that code from the app. It would be nice if we can save a couple different layouts and reuse them for other categories. I assume I could just go another way and change the id in line 29 of the embed code:

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '29807339XXXX', 

But how do i find out the id of each collection in my shop?

Thanks for any suggestions

[leAdmin]

Of course...

[leAdmin]

Also, I would like to add that once the "Next page" is loaded, there is no previous page button, that gets loaded. Once the last page is loaded, that's it. No way forward or back. This is terrible UX and should be fixed immediately.

If @Gabe or any of the @Shopify developers could please respond to this, I would appreciate it.

[Gabe]

Hey @leAdmin 

Thanks for tagging me and sorry for the delay in responding! 😉

Have you sorted this issue yet, and what have you tried so far that hasn't worked for you? You are trying to edit your homepage as you say - is this an offsite where you want to embed the Shopify Buy Button? And would you consider posting a link to this website so I can take a 👀 look at your specific use-case such as why you would need a "previous page button"? Would an "infinite scroll or load more" button not be a better UX instead of a "previous page" button?

There are free apps for that here, a lot of threads on the topic of infinite scroll buttons, and on topic of previous page buttons that might be able to help you! 

And you say you came across this post, but failed to see, where the code changes would have to be made. If you can add some lines to the embed code, that would also be a solution, but you don't know what you would have to declare and where exactly.

Changing the text of the "Next page" button in the Shopify Buy Button channel app, particularly for a collection embedded on your homepage, requires you to edit the Buy Button embed code. Regarding the specific issue with the "Next page" button, have you tried modifying the embed code's productSet configuration object i.e. locate that in your embed code and adjust the text for the "Next page" button? Here's a simplified example of how you might structure this change:

options: {
  productSet: {
    text: {
      nextPageButton: 'Your Custom Text Here'
    }
  }
}

This JS snippet is a basic example - adapt it to your specific setup and replace 'Your Custom Text Here' with the text you want to display.

Based on the information in the post you provided, it appears they successfully customized the "Next Page" button text in a Shopify Buy Button collection by inserting a new line into the productSet block of the JavaScript embed code. This line specifies the text for the "Next Page" button within the text object. The key here is to insert the text key with your desired button text inside the productSet block of the JavaScript code used for the Shopify Buy Button.

If you need further customization or functionality, such as adding a "Previous Page" button, you might need to delve deeper into the buy-button-js library and possibly adjust the templates or classes within the productSet block to accommodate the additional button. For detailed customization, referring to the official GitHub repository for Shopify's buy-button-js can provide further guidance on the available options and methods you can use.

As for reusing embed codes for different collections, you can indeed change the collection ID in the embed code to switch categories. To find the ID of each collection in your shop, you usually need to access the collection through your Shopify admin interface. The URL of the collection (ex: "https://admin.shopify.com/store/yourstore/collections/123456789011") will typically contain the collection ID, which you can then use in your embed code.

Lastly, the absence of a "previous page" button and the inability to navigate back once the last page is loaded is indeed a UX concern and is often solved with a breadcrumb trail or possibly even with a different approach to how you're embedding and displaying collections on your site. There isn't an out-of-the-box solution for adding a "previous page" button and the Buy Button Settings primarily focus on customizing aspects like the button's color, size, layout, and actions when clicked, but it doesn't explicitly cover navigation between pages in a collection.

Don't forget you can modify the text of other buttons like the "Add to Cart," text by following this video i.e. in the theme's language settings which does not require editing embed codes​.

Hope that helps! 😉

[leAdmin]

Hey @Gabe and everyone else

Thank you for your reply, and sorry for my late answer. I have been very busy, so this had to wait for a while.

Yes, I am planing on using the buy button embed code offsite (link to example page). I figured that's what it was made for (websites / blogs).

You are absolutely right about the "infinite scroll" or "load more" button being a better UX, instead of working with pages at all. In my dawn theme, all collections are already set up with infinite scroll (Scrollio: Infinite Scroll).

Onsite, the user never has to click any buttons to load more products in a collection. I would love to be able to set up the embed code with the same behavior on an external page, to display my products there as well.

Is there a way to NOT display a "Next page" button and instead just load more products when the user scrolls? I figure it should be possible, using intersection observer or a similar method, to lazy load more products as soon as the user scrolls down on the page, but before reaching the last row of products.

I don't want the user to think there are no more products and start scrolling up, before all products in a collection can load. Of course this could also be achieved by displaying a loading animation or similar, I prefer not to go this way if possible. The way my collections load more products onsite would be my preferred way to load products offsite as well.

As a sidenote:

It seems some changes have been made to the buy button channel since I last posted here.

The "Next page" button now adds more products to the same page and does not navigate to the next page, eliminating the before mentioned problem of not being able to navigate backwards. Is this only the case because I integrated Scrollio or were changes made here?

Sadly, the text for the "Next page" button can still not be changed in the setup process for a collection embed. This should really be included, mainly to be able to set this up in other languages. Only the text for the button to view the product can be changed in the layout section during setup.

Thanks to your answer, I have been able to change the button text from "Next Page" to my preferred button text in German. I would still prefer a solution where products just load automatically and hope someone has an idea how to get this to work.

Since Shopify is the developer of the Buy Button channel, I hope for a change in the code or an update to include the things mentioned above.

Thanks