Home > Shopify Development > How to use a different language or change the Size chart text

How to use a different language or change the Size chart text in Shopify

Sam Nguyen
Sam Updated: April 08, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

When the Shopify stores owners want to expand their business in different countries, they should invest their shops with flexible languages tool. Besides, it also is necessary for the store owners to display their product’s description with the most suitable size. Furthermore, with the size chart text, it is totally possible for the online sellers to customize the texting. In order to install these tools to their shops, the admins can choose many ways.

There is a free method that helps the Shopify users is changing the codes in the admin dashboard. Moreover, online sellers can easily add new languages to their shops. Especially, the store owners might navigate the preferred language to their shops such as English or French to approach their shops to international customers. By expressing the product’s information in their home language, Shopify store owners can boost their sales easily.

Related posts:

There are some options for admins to choose such as small, average, etc. After having the customisability to the storefronts, the images of the products help the store owners express their information in the most effective method. If you are the beginners, you also can follow these steps to add the tool to make your store are flexible with multiple languages and text sizes through this article How to use a different language or change the Size chart text in Shopify. However, this tool can not be used under the non-sectioned Brooklyn so the store owners should use another way without the support from Shopify.

How to use a different language or change the Size chart text in Shopify

Step 1: Click Edit code

At the Shopify admins dashboard, the store owners can click to Online Store and then Themes. Moreover, after the users can continue by finding they need to be edited, they click Actions and Edit code.

use different language on size chart text in shopify

Step 2: Open the product-template.liquid file

In this step, in the Sections directory, the store owners tap product-template.liquid file to open it.

use different language on size chart text in shopify

Step 3: Add the Size chart

For the third step, the users copy the following code and paste above Add to cart button to add a Size chart button.

{% if product.options contains 'Size' %}
<a class="btn size-chart-open-popup" href="#size-chart">See size chart</a>
{% endif %}

Step 4: Add code

At the bottom of product-template.liquid file, the store owners can continue by pasting the code:

<div id="size-chart" class="mfp-hide">
{{ pages.size-chart.content }}
</div>
<style>
#size-chart {
  border: 2px #555 solid;
  background-color: #ffffff;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

Step 5: Click Save

Click Save to finish and save the changes.

Step 6: Go to Asset

In this step, the users go to the Assets section and then clicking theme.js to open it. In addition, they can add the following code at the bottom of the file:

$('.size-chart-open-popup').magnificPopup({
  type:'inline',
  midClick: true
});

Step 7: Click Save

Click Save

Conclusion

Because the Shopify store owners need to install the Magnific Popup for their customization, so they can not work without it. In that case, the size chart does not appear, it is necessary for the store owners to add more extra codes to their theme. The users need to follow these following steps :

Step 1: Click Edit code

From the Assets section, the store owners can tap theme.scss.liquid file or timber.scss.liquid file to open it. Then, they should add this case to the bottom.

Step 2: Choose the best option

After the first step, the store owners can follow one of the following steps:

  • In the Assets directory, if the store has vendor.js files, the store owners can open the file and add this code to the bottom.
  • In the Assets directory, if the store does not have vendor.js files, the store owners need to add this code in theme.js file above $('.size-chart-open-popup').magnificPopup code.

Step 3: Click Save.

Click Save.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.