Solved

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

AlexSantos
Excursionist
13 1 2

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

 

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-col... but I don't know where to add the code to the generated code for the button.

 

AlexSantos_1-1597490127575.png

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

 

 

 

 

Accepted Solution (1)
AlexSantos
Excursionist
13 1 2

This is an accepted solution.

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

 

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: '<h2 class="{{data.classes.productSet.title}}">{{data.collection.attrs.title}}</h2>',
      products: '<div class="{{data.classes.productSet.products}}"></div>',
      pagination: '<button class="{{data.classes.productSet.paginationButton}} {{data.nextButtonClass}}">{{data.text.nextPageButton}}</button>',
    },
    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

View solution in original post

Replies 8 (8)

suyash1
Shopify Partner
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AlexSantos
Excursionist
13 1 2

Hello 

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

AlexSantos
Excursionist
13 1 2

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

suyash1
Shopify Partner
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AlexSantos
Excursionist
13 1 2

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.

suyash1
Shopify Partner
9077 1129 1479
can you add me to staff
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AlexSantos
Excursionist
13 1 2

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.

AlexSantos
Excursionist
13 1 2

This is an accepted solution.

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

 

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: '<h2 class="{{data.classes.productSet.title}}">{{data.collection.attrs.title}}</h2>',
      products: '<div class="{{data.classes.productSet.products}}"></div>',
      pagination: '<button class="{{data.classes.productSet.paginationButton}} {{data.nextButtonClass}}">{{data.text.nextPageButton}}</button>',
    },
    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