Shopify Lite, Collection - need to edit the 'Next Page' button text

Solved
Highlighted
Excursionist
11 1 0

Hello

I added Shopify Lite 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 am unable to edit the template because it's not available for Shopify Lite subscriptions.

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

 

 

 

 

0 Likes
Highlighted
Astronaut
837 74 99

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Excursionist
11 1 0

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

0 Likes
Highlighted
Excursionist
11 1 0

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

0 Likes
Astronaut
837 74 99

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Excursionist
11 1 0

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.

0 Likes
Highlighted
Astronaut
837 74 99
can you add me to staff
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Excursionist
11 1 0

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.

0 Likes
Highlighted
Excursionist
11 1 0

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

0 Likes