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

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

leAdmin
Shopify Partner
4 0 2

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

Replies 3 (3)
leAdmin
Shopify Partner
4 0 2

Of course...

leAdmin
Shopify Partner
4 0 2

 

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
Shopify Staff
18317 2876 4237

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! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog