How to Change language Variables for BigCommerce
By Sam Nguyen
It is obvious that when an online retailer sets up their website on a third-party eCommerce solution, there is a higher chance that they would use the theme created by them. However, changes have to be made before officially releasing a brand. They have to keep an eye on every little detail from the style, the colors, the fonts, and most importantly, the content.
The content represents how a store owner is trying to communicate with their customers throughout the whole shopping process. The better it is, the more loyal your consumers can be. And this is where online merchants need to learn how to use and adjust the BigCommerce language variables.
That is also the main topic of today’s article. We are going to inform you about the definition, the functions and How to change BigCommerce language variables for your store. Keep reading to find out more!
What are BigCommerce language variables?
Language variables are the whole text found inside the language files of every BigCommerce theme. They may be changed to display static, but you might need a deeper understanding to edit the source code that these variables are referring to. There is no one-touch tool created by BigCommerce to update them.
There are three types of variables appearing in your file, however, you can identify BigCommerce language variables by the [%%LNG_abc%%] at the beginning of the source code.
How to change BigCommerce language variables for your store
Before we get started, online merchants need to know that BigCommerce language variables are only adjustable if you are using one of its blueprint themes. Up to the present, BigCommerce has not updated any permission for users to customize LNG variables for their Stencil themes.
Step 1: Go to My Themes page
First thing first, at your BigCommerce Control Panel, you can see on the left side of the screen, there is this selection named “Storefront”:
Continue, you can also see the “My Themes” alternative, click on it and move on to the next step:
Step 2: Editing HTML/CSS file
BigCommerce has divided the HTML/CSS file into three sections for users easy to catch up with: layouts, panels, and snippets.
- Layout files, usually is the default.html one, organize the page content of your website into various HTML sections
- Panels (Header.html) may typically be referenced directly in the layout files. You can check out a complete list of panel configurations at Blueprint Theme Panels.
- Snippets, containing PageMenu.html, are great for implementing simple custom HTML elements on several pages.
At the “My Themes” page, on the right-hand side of the screen, below the “Advanced Options” column, there is a button saying “Edit HTML/CSS”, once you choose it you will have full access to the Template files of your themes (only available for Blueprint versions):
Continue to click on the “Other Template Files” on the left sidebar, this is where all the HTML and CSS files creating your theme will be included, such as Style Sheets, Layouts, Panels just like we have introduced previously:
Before performing any further actions, it is necessary to understand what the tools appearing on the top row doing:
- Save: the most important function out of the list, it loads and applies all the modifications you have made into your live template
- Close: end the whole adjusting theme file process and redirect you back to the BigCommerce control panel
- Close & Refresh: exits the template file editor and reloads your control panel
- Toggle Editor: emphasize syntax and display row numbers in the file.
- Recent Files: illustrates a list of several last few files you have browsed before.
- Revert to Original: just like its name, instead of applying your changes, the system will restore the original source code for your template file. This does not turn the file into the most recently stored version of it, so be careful if you want to click on this button.
Step 3: Reviewing a list of BigCommerce language variables
As we have mentioned, BigCommerce language variables are started with [%%LNG_abc%%] so that you will not be mistaken with five other variables while adjusting the template HTML/CSS file.
Here is the list of BigCommerce language variables and its string value you might use for updating the file:
| Variable | Default string value |
|---|---|
%%LNG_AC_AbandonedCartConvertedHeading%% |
“An abandoned cart was converted to an order” |
%%LNG_AC_AbandonedCartNoticeHeading%% |
“Abandoned Cart Notice” |
%%LNG_AC_CartContentsSubheading%% |
“Products In Cart” |
%%LNG_AC_ContactDetailsSubheading%% |
“Contact Details” |
%%LNG_AC_CouponCodeAfterText%% |
” during checkout to receive “ |
%%LNG_AC_CouponCodeBeforeText%% |
“Enter coupon code “ |
%%LNG_AC_EmailUnsubscribe%% |
“Unsubscribe” |
%%LNG_AC_EmailUnsubscribeSuffix%% |
“from future emails like this” |
%%LNG_AC_RecoveredEmailIntroText%% |
“The automated emails we’ve been sending shoppers who didn’t make it all the way through the checkout process have resulted in a new order. The customer’s contact details and ordered items are shown below.” |
%%LNG_AC_RecoveredEmailSubHeading%% |
“Congratulations!” |
%%LNG_AccountDetailsDescription%% |
“Update your contact details, email address and/or change your password.” |
%%LNG_AccountEnterFirstName%% |
“Please type in your first name.” |
%%LNG_AccountEnterLastName%% |
“Please type in your last name.” |
%%LNG_AccountEnterPassword%% |
“Please type in a password.” |
%%LNG_AccountEnterPhoneNumber%% |
“Please type in your phone number.” |
%%LNG_AccountEnterValidEmail%% |
“Please type in a valid email address, such as joe@aol.com” |
%%LNG_AccountInboxIntroNoOrders%% |
“Once you place an order you’ll have full access to your inbox from this page.” |
%%LNG_AccountNoRecentItems%% |
“You haven’t looked at any items on our site. When you do, they will appear here.” |
%%LNG_AccountOrdersIntro%% |
“Your completed orders with us are shown below. Click ‘View Order’ to view an orders details.” |
%%LNG_AccountOrdersNone%% |
“You don’t have any completed orders with us. When you do, they will appear on this page.” |
Because the list was too long for us to list in this article, here are only a few of the most common BigCommerce language variables. You can check out more at their LNG Variables site.
Step 4: Adding and customizing language variables
Within each HTML or CSS file that you wish to customize for your store, scroll down until you see every line starting with <div>, this is the content appearing on your page. All you have to do is copy and paste from the BigCommerce language variables table in the previous section and put them under the <div> line. For instance, this is how we included some outstanding variables created by BigCommerce for further purposes:
If none of the brought-up value is what you are looking for to insert into your HTML templates files. You can totally replace these language variables by using your own words. More specifically, instead of “%%_CheckoutButtonTitle%%” appearing on your check out list, you can fill in “Continue to finish the checking out process”.
One more note, if you are attempting to do the same thing with BigCommerce global variables, don’t. It is directly recommended by BigCommerce not to change the source code for these specific variables. Consequently, your website’s core functions might be terribly damaged by this action.
Remember to keep a backup for your template file in case things did not turn out the way they were supposed to and “Save” your work before leaving the editing site!
Conclusion
To sum up, you must be attentive while editing any of BigCommerce variables, especially language ones. It is advisable to set up a detailed plan of what you are going to add and where to put them before doing anything. In this way, e-tailers can minimize the number of mistakes that might happen during the process.
We hope that this article has fulfilled your demand on How to change BigCommerce language variables and tips to make the best out of it.
