configuration

Creating size charts in Shopify is one thing, but displaying them is completely the other. Your size chart could be stunning, but it's no use if people can't find it. That's why you need to choose the right display settings offered by the Shopify Size Chart app. 

So, before you get to the creative step, fill out the display settings for your size charts. There are a few options for that. 

First, navigate to Sale channels > Online Store > Themes and click Customize.

Customize Shopify Theme

Move to the App embeds tab and enable the Magefan size chart. You'll see the size chart link added to the page.

magefan size chart widgets

Now it's time to get to work. Start by adding the Label of your size chart and move on to the display settings.

Size Chart Type

There are two types of size chart labels available — link and button, which would be inline or hovering. Let's explore those in more detail.

Choose Link as a Type and Inline for Placement to get the size chart link inserted into the page.

size chart link in shopify

Inline button

Keep the same option for Placement, but change the Type to Button to get the following result:

inline shopify size chart button

Hovering button

Finally, you can also display a hovering size chart button. Just change the Placement to Fixed and choose the Button Position — left or right.

hovering size chart button in shopify

Size Chart Display Style

Popup is one of the most common options for the size chart display. But we also offer to display it in the flyout drawer, regardless of the size chart type you've just configured.

To get your size chart displayed in a popup, all you need to do is choose the corresponding option as the Display Style.

shopify size chart popup

Here's what you'll get on the frontend:

size chart popup shopify

Drawer

If you want to go with the drawer option, you also have to choose where it should fly out from (Drawer Position) — left or right.

size chart in drawer display shopify

The drawer style should look like this on the fronted:

drawer size chart display shopify

Inline Size Chart Label Position

The default size chart position for the inline button or link is in the product content. However, you can change it to whatever position you need.

For that, move to the Sections tab and choose a place where to add the size chart link/button. Hit Add block and switch to Apps to add the Magefan size chart button.

magefan size chart button

Then, drag and drop it where you want to add it.

Don't forget to Save the settings once you finish and go create your size charts. Then define the size chart conditions to customize their display based on product types, collections, tags, etc.