Collection - need to edit the 'Next Page' button text

Store Design
1

Hello

I added Shopify Buy Button collections to my Squarespace site and the experience is stellar but there is a real problem that I cannot solve, the “Next page” button needs to be localized to Polish to accommodate for audience in this region.

![image.png|998x352](upload://3MShm8arBRTk5QopPoAK7ohgMZ8.png)

I went through all the customization options before code is generated for injection but don’t see any location to edit.

There is some promise here, https://help.shopify.com/en/manual/online-sales-channels/buy-button/edit-delete#edit-an-embedded-collection but I don’t know where to add the code to the generated code for the button.

AlexSantos_1-1597490127575.png
AlexSantos_1-1597490127575.png826×496 42.5 KB

I have googled high and low and searched the shopify community but I found nothing that could be helpful, only the link mentioned.

Could someone help and if more information is required please let me know.

Kind regards

—Alex

2

Hi Alex

looks like the link you shared too works on template files only, so you need to upgrade shopify to be enable to edit template files.

Or check if you have any option to make text changes is languages option in settings

online store->themes->language

3

Hello suyash1

Thanks for your reply.

I checked those settings and everything is set to Polish.

I poked around and noticed that I still have access to the theme’s liquid code by choosing Settings > Checkout > Customize Checkout, sadly I can’t find anything relevant in the various code pages that come up after clicking on Edit Code.

Obviously this is somewhere and I believe there is a key:value that I can set somewhere in the code generated by the Buy Button App but I don’t know how to apply it.

The first link I offered, makes mention of a so-called next page button, although the wording is not “next page”

Do you have any other thoughts?

kind regards

—Alex

4

If it helps, the theme I am using is Brooklyn.

5

can you add me to staff? I will have look at files, or those files are not available at all?

6

One small correction, I do actually have access to the full code for edits. When I originally wrote this I thought I didn’t. Sorry for the confusion.

7

can you add me to staff

8

Hi Suyash

I contacted Shopify support and I quote, the support person said “I agree it should be the same language throughout!” For the time being I have been told that they are going to investigate this and come back to me. If they have an answer I will share it. Thank you for your offer but I will wait for now.

9

Ok, I sorted it. Shopify wasn’t able to. Directly below is the code block I had to use.

"productSet": {
    "text": { "nextPageButton": "Następna strona",
      "styles": {
       "products": {
          "@media (min-width: 601px)": {
           "margin-left": "-20px"
          }
        }
      }
    }
  },

The significant part is the insertion of line two into the productSet block. The text that will appear in the button is inside the last quote in line 2. I marked the button with the changed text in red as rendered in an incognito browser window.

Screen Shot 2020-08-17 at 12.48.59.png
Screen Shot 2020-08-17 at 12.48.59.png1091×596 64.3 KB

I used this page as a reference. https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js

Here is the portion of the javascript that shows the key : values (the text value and nextPageButton has to be inserted inside the productSet block) with your new text.

productSet: {
    iframe: true,
    manifest: ['product', 'option', 'productSet'],
    contents: {
      title: false,
      products: true,
      pagination: true,
    },
    order: ['title', 'products', 'pagination'],
    templates: {
      title: '## {{data.collection.attrs.title}}',
      products: '
',
      pagination: '',
    },
    classes: {
      wrapper: 'shopify-buy__collection-wrapper',
      productSet: 'shopify-buy__collection',
      title: 'shopify-buy__collection__title',
      collection: 'shopify-buy__collection',
      products: 'shopify-buy__collection-products',
      product: 'shopify-buy__collection-product',
      paginationButton: 'shopify-buy__collection-pagination-button shopify-buy__btn',
    },
    text: {
      nextPageButton: 'Next page',
    },
  },

So in summary a collection created using the Buy Button that you inject in your third party site that needs the text for the Next Page button to modified will need a snippet of code like the first one at the top.

Hope this helps

Kind regards

—Alex Santos

1 Like