How to use an image for your size chart
Instead of creating an HTML table, you may want to use an image for your size chart. Clean Size Charts supports the implementation of images as a size chart. We will explain how to do it below.
While an image size chart may sound like a good idea, they can leave you open to accessibility issues with the 2.2 billion blind or visually impaired individuals around the globe who use a screen reader to shop online. We strongly recommend creating HTML tables for accessibility.
Requirements
- You already have your file uploaded to Shopify files (or another storage/CDN). For instructions on how to upload a file to Shopify files, you can view the uploading and managing files help doc.
- You are already on the Content tab of the chosen size chart.
Step 1: Delete Existing Table
Each presets comes with an existing size chart table. Before you can insert an image, you'll need to delete the table by selecting the table and clicking the delete table icon.
Step 2: Expand Table Controls
Use the ... to the right to expand the menu to show more options.
Step 3: Select Image Button
The menu will expand to three rows. The image button will be located on the 3rd row down.
Step 4: Add Your File
After clicking the image icon, a pop up box will display with several settings including a source field. The url generated by Shopify files will be placed in the source field.
Tip: Use the Alternative Description to help alleviate accessibility issues.
Step 5: Click Save
Click save on the image settings box. An image will be inserted into the text box and you will be able to adjust alignment and add additional text.
