How to add a size chart to the storefront

Mageplaza Size Chart

Mageplaza Instagram Feed

1-how-to-connect-and-enable-app.md

2-how-to-create-instagram-feeds.md

3-how-to-set-up-product-tags.md

4-how-to-manage-instagram-feed.md

5-how-to-use-analytics-feature.md

6-auto-translate-ig-feed-on-storefront.md

8-how-to-set-up-settings.md

9-information-center.md

91-privacy-policy.md

99-faq.md

Mageplaza Google Shopping Feed

1-how-to-connect-a-google-account.md

2-how-to-create-feed-and-sync-feed-on-your-gmc.md

3-how-to-manage-product-feed.md

4-how-to-view-google-error-report-and-manage-products-in-feed.md

5-how-to-configure-settings.md

6-how-to-use-dashboard.md

7-information-center.md

8-privacy-policy.md

9-faqs.md

Mageplaza TikTok Feed

1-how-to-connect-a-tiktok-account.md

2-how-to-create-and-display-tiktok-feeds-on-your-store.md

3-how-to-manage-tiktok-feed.md

4-how-to-set-up-preferences.md

5-information-center.md

6-faqs.md

Mageplaza Digital Downloads

1-how-to-create-a-new-digital-product.md

2-how-to-manage-digital-products.md

3-how-to-manage-files.md

4-how-to-manage-orders.md

5-how-to-customize-the-download-email-template-to-match-my-brand.md

6-how-to-customize-the-thank-you-page-to-match-my-brand.md

7-how-to-add-our-block-to-thank-you-page.md

faqs.md

Mageplaza Product Quiz

1-how-do-I-create-and-manage-quizzes.md

10-how-do-i-link-product-and-collections-to-quiz-answers.md

2-what-is-the-quiz-creation-process.md

3-what-question-types-can-I-use-in-my-quiz.md

4-how-do-I-customize-the-design-of-my-quiz.md

5-how-do-I-publish-my-quiz-to-my-store.md

6-how-do-I-view-customer-responses-to-my-quiz.md

7-what-advanced-features-are-available-for-managing-my-quizzes.md

91-faqs.md

Mageplaza Hide Price & Access Control

0-how-to-create-an-access-control-rule.md

1-how-to-create-a-hide-price-rule.md

91-faqs.md

How to add a size chart to the storefront

In this article, you will be guided to select size chart position on your product page. By this, you can choose any size chart position directly and visually on your live site. Let’s get started!

Go to Appearance screen > Button type card, select one option from dropdown menu:

There are three ways to display the size chart button: Button, Dropdown, or Button & Dropdown.

1. Button

Floating button option: Display a floating button on product pages so customers can easily view the size chart without needing to scroll.

Inline link:

Both floating button & inline link:

2. Dropdown

3. Button & dropdown section

Method 1 - Add with App Block (Recommended for Theme 2.0)

This is the recommended method for stores using Shopify Theme 2.0:

Click the Add app block button to open a new tab
In the new tab, you can select the exact position for the size chart link on your page
Once you’ve selected a position, the button will change to Change position
You can click this button anytime to modify the position

Method 2 - Add with CSS Selector

Use this method if your theme doesn’t support App Blocks or if you need more customization:

Edit the CSS selector for the element where you want the size chart link to appear
Click Reselect button to show popup, then click Start choosing button to select a new position on theme.
Then, go back to the app and click Save to complete.

For assistance with CSS selectors, click the Contact us button to open a chat window.

How to add a size chart to the storefront
- Method 1 - Add with App Block (Recommended for Theme 2.0)
- Method 2 - Add with CSS Selector