Customizing Your Size Charts Using Custom CSS

Only available on the Premium and Growth Plan

The Clean Size Charts app provides you with an easy way to display size charts on your e-commerce store, helping customers make informed purchasing decisions. While the default size charts are designed to integrate seamlessly with most store themes, you might want to customize their appearance to better match your brand or to enhance readability.

This guide will walk you through common CSS changes you can make using the Custom CSS option within the Clean Size Charts app. With these tips, you can tweak the look and feel of your size charts without needing extensive coding knowledge.

Customizing Your Size Charts with Updated Classes

Use these classes to target elements in your custom CSS, allowing you to fine-tune the look and feel of your size charts.


  • .ccpops-trigger-container
  • .ccpops-trigger
  • .ccpops-trigger__icon
  • .ccpops-trigger__text

1. Where to Add Custom CSS

  1. In your Shopify Admin, go to Apps → Clean Size Charts.
  2. Click the Settings tab.
  3. Find the Custom CSS section at the bottom.
  4. Paste your CSS into the box and click Save.

Your styles will be injected directly into the Clean Size Charts app, ensuring they usually override theme styles.

2. Common CSS Customizations Using the Updated Classes

Below are frequently requested CSS snippets. Feel free to modify them to suit your theme.


A. Style the Size Chart Trigger Button

/* Targets the entire size chart trigger button */
.ccpops-trigger {
  background-color: #f8f8f8;   /* Example background color */
  border: 1px solid #cccccc;   /* Example border */
  padding: 10px 20px;          /* Adjust padding as needed */
  cursor: pointer;             /* Ensure pointer cursor on hover */
  transition: background-color 0.3s ease;
}

/* Hover effect */
.ccpops-trigger:hover {
  background-color: #eaeaea;
}

Explanation

.ccpops-trigger is the main button/link that opens the size chart. You can customize its background color, border, padding, and transition effects.

B. Change the Trigger Button Text

/* Targets the text within the size chart trigger */
.ccpops-trigger__text {
  font-size: 16px;
  color: #333333;          /* Example text color */
  white-space: pre;        /* Helps retain spacing if needed */
}

/* Hover effect for text */
.ccpops-trigger:hover .ccpops-trigger__text {
  color: #000000;
}

Explanation

.ccpops-trigger__text is where the text (e.g., “Size Chart”) is rendered. You can adjust font-size , color , and add hover styles.

C. Customize the Size Chart Trigger Icon

/* Targets the icon inside the trigger */
.ccpops-trigger__icon {
  font-size: 18px;    /* Example icon size */
  color: #666666;     /* Example icon color */
  margin-right: 8px;  /* Space between icon and text */
}

/* Hover effect for icon */
.ccpops-trigger:hover .ccpops-trigger__icon {
  color: #000000;
}

Explanation

.ccpops-trigger__icon targets the icon (often an <svg> or <span> ). Adjust font-size and color to suit your theme.



D. Adjust the Trigger Container

.ccpops-trigger-container {
  display: inline-block; /* or "block", "flex", etc. */
  text-align: right;     /* Example alignment */
  margin-bottom: 15px;   /* Example spacing below container */
}

Explanation

.ccpops-trigger-container may wrap both the trigger button and related elements. Adjust display or margin to position it where you want.

E. Bolding the Size Chart Trigger Text

.ccpops-trigger__text {
  font-weight: bold;
}

Explanation

Add font-weight: bold; to the .ccpops-trigger__text class if you’d like the “Size Chart” text (or any custom label) to appear in bold. Feel free to use other numeric weights (e.g., 600 , 700 ) if your theme supports them.

F. Underlining the Size Chart Trigger Text

css

Copy code
.ccpops-trigger__text {
  text-decoration: underline;
}
Open in CodePen

Explanation

If you want the trigger text to appear as a clickable link, add text-decoration: underline; . You can also style the hover state differently (e.g., switch it to none or change color):

css

Copy code
.ccpops-trigger:hover .ccpops-trigger__text {
  text-decoration: none;
  color: #000000;
}

3. Additional Styling Tips

A. Rounded Corners and Box Shadows

.ccpops-trigger {
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Explanation

Make your trigger button more modern by rounding corners and adding a subtle shadow.


B. Customize Focus State (Accessibility)

.ccpops-trigger:focus {
  outline: 2px solid #00aaff;
  outline-offset: 2px;
}

Explanation

This change improves navigation for keyboard users by adding a visible focus ring.


C. Hide the Icon (Show Text Only)

.ccpops-trigger__icon {
  display: none;
}

Explanation

If your store design doesn’t need the icon, hide it here.

4. Common Issues & Troubleshooting

  1. CSS Not Applying
    • Ensure your code is pasted in the Clean Size Charts Custom CSS field.

    • Try increasing specificity or using !important (sparingly) if theme overrides persist.

      Color or Font Overridden by Theme

    • Some themes have very specific rules. If your changes don’t apply, increase selector specificity or use !important .

      Layout Issues on Mobile

    • Be mindful of how the trigger is displayed on smaller screens. Add media queries if necessary.

      Icons Not Displaying

    • Confirm any icon library (e.g., Font Awesome) is loaded, or replace the icon markup with a built-in icon or an SVG in your assets.

5. Need Additional Help?

Our support team is available if you have any further questions or need more personalized assistance:


Conclusion

By targeting the updated classes—.ccpops-trigger , .ccpops-trigger__icon , .ccpops-trigger__text , and .ccpops-trigger-container —you can style your size chart trigger to match your store’s branding perfectly. Whether you need to change colors, fonts, add borders, or bold the text, these CSS tips will help you create a cohesive and user-friendly experience for your shoppers.

Still need help? Contact Us Contact Us