Wednesday , February 21 2024
Home > Magezon Extensions > Other Extensions > How to Color Your Size Chart in Magento 2

How to Color Your Size Chart in Magento 2

How to Color Size Chart in Magento 2

Wanna make your size chart a more stunning match with the store theme? Easy! With Magezon Size Chart extension, you are allowed to customize your size chart and button on the product page 

In this post, we will provide a guide to color your size chart in Magento 2 with only 2 steps. 

Step 1: Configure the size chart table 

This is the very first step to color your own brand’s size chart. However, you have to have a size chart already, if not, please check the instruction for making a size chart in the blog post “How to create a size chart on product page”. 

A small tip is that you should think about your theme for products and choose the tone of color. After that, join hands to make your eye-catching size chart.

Navigate to Stores > Setting > Configuration

Magento 2 size chart extension configuration
  • General

To enable Size chart module on the product page, select “Yes

Magento 2 size chart extension
  • Advisor 

Fulfill all of the fields in this section.

general setting size chart
  • Size name: Enter the name of the size chart. (e.g: Suit size, Women’s size, etc.)
  • Metric 1: Enter the first parameter of the size chart (e.g: Weight/ Width)
  • Metric 2: Enter the second parameter of the size chart (e.g: Height/ Length)
  • Standard table:
color size chart
  • Size name background: Set the color background for the size name of the table 
  • Table background 1: Set color background for the row in the table 
  • Table background 2: Set color background for the row in the table 
  • Text color: Set color for the text color
  • Value color: Set color for value in the chart 

Step 2: Color the size chart button 

In this step, we will focus on designing the size chart button. Magezon Size Chart extension provides many splendid button types that you can choose for displaying on the product page.

In the Button Settings field, you can customize the color for Size chart button which will be displayed on the product page. 

color size chart button
  • Title: Enter the title on the button 
  • Font Size: Set the font size for the title
  • Font Weight: Set the font weight for title 
  • Type: 6 types for admin to flexibly design the button for their size chart which is shown on the store: Default Button, Modern Button, Flat Button, 3D Button, Gradient Button, Outline Button
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over 
  • Enable Custom Icon: Choose “Yes” to show the icon on the button 
  • Upload Icon: Support file in type of png, jpg, jpeg, gif

** If you don’t want to show an icon on the size chart button you can remove it by clicking on the “Delete Image

For each Button Type, it will have a different setting:

  • Default Button: 
color size chart default button
Default Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color: Set background color for the button
  • Background Color Hover: Set the color for the button when hovering over 
  • Border Radius: Set the radius of the button border 
  • Modern Button:
color size chart modern button
Modern Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color: Set background color for the button
  • Background Color Hover: Set the color for the button when hovering over
  • Border Radius: Set the radius of button border
  • Flat Button:
magento 2 size chart color
Flat Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color: Set background color for the button
  • Background Color Hover: Set the color for the button when hovering over
  • Border Radius: Set the radius of the button border
  • 3D Button:
how to color size chart magento 2
3D Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color: Set background color for the button
  • Background Color Hover: Set the color for the button when hovering over
  • Box Shadow: Set the shadow’s color for the button 
  • Box Shadow Hover: Set shadow’s color for the button when hovering over 
  • Border Radius: Set the radius of the button border
  • Gradient Button:
color size chart magento 2 extension
Gradient Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color Left: Set the background color for the left side of the button 
  • Background Color Right: Set the background color for the right side of the button 
  • Outline Button: 
outline button magento 2 size chart extension
Outline Button Settings
  • Text Color: Set color for the title
  • Text Color Hover: Set color for the title when hovering over
  • Background Color: Set background color for the button
  • Background Color Hover: Set the color for the button when hovering over
  • Border Size: Set the size for the border of Size chart button 
  • Border Style: 7 styles of button border: Theme Defaults, Solid, Dotted, Dashed, None, Hidden, Double.
  • Border Color: Set color for the button border 
  • Border Radius: Set radius for button border 

Finally, don’t forget to save all of your configurations with the Save button on the top right corner of the screen. 

Conclusion 

It’s time to make your size chart become attractive and match your brand theme using Magento 2 Size Chart from Magezon. Visit our blog tutorial series to get more articles like this. Feel free to leave us some of your questions or comments.

Increase Purchasing with Magento 2 Size Chart

Help your customers calculate their size and choose the fit products quickly by using Magezon Size Chart. Try it today!

About Hazel

Hazel
Hazel is a marketer who is in charge of writing blogs, and SEO. Especially, she is really into traveling and listening to music.

Check Also

The ultimate guide to using Magento 2 Login & Registration Page

Magento 2 Login & Registration Page Builder: All You Should Know

Sometimes, the default Magento 2 login and registration page doesn’t satisfy all your needs. You …

Leave a Reply