avada.io
AVADA logo
Published on
Product Pages

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

753 words4 min read
Author
  • Name
    claire
    Twitter

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 {#step-1}

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 {#step-2}

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 {#step-3}

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 {#step-4}

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 {#step-5}

Click Save to finish and save the changes.

Step 6: Go to Asset {#step-6}

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 {#step-7}

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 {#step-1}

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.

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month