Updating CSS Stylesheets for Commerce Websites

Updating CSS stylesheets is vital for maintaining the visual branding of your Commerce website and ensuring a positive user experience. For optimal site performance, CSS stylesheets are cached in the client-side browser for a duration of 7 days. While you can submit a request to invalidate cached styles from the Content Delivery Network (CDN), this process does not affect the browser cache. Therefore, it’s essential to coordinate your CSS updates so that both returning visitors and new customers see the most recent changes.

Best Practices for CSS Updates

To successfully update the CSS on your Commerce website and ensure timely visibility of changes:

• Plan Ahead: If you intend to implement a new style (e.g., changing the color scheme), upload the new CSS file at least 7 days in advance.
• Invalidate Cache: Submit a cache invalidation request for the current CSS file's URL before the desired go-live date.

Steps to View Updated CSS Styles

Follow these steps to ensure the updated CSS styles are visible:

1. Upload the New CSS File: Start by uploading the new stylesheet to the file cabinet.
2. Clear Cached CSS: Use the Cache Invalidation by URL page to remove the cached CSS from the CDN.
   1. In the Domain Name field, enter your website's domain (e.g., www.mywebstore.com).
   2. Enter the CSS file’s URL in the URL field (e.g., /c.7654321/shopflow-1-05-0/skins/standard/Styles-012345a6789.css).
   3. Click Save to finalize the cache invalidation.

It's important to follow these steps to ensure a seamless transition to your newly styled website.

Key Takeaways:

• CSS styles are cached for 7 days in the browser, necessitating advanced planning.
• Cache invalidation must be submitted to see updated styles.
• Ensure both returning and new customers see the updates by timing your upload and invalidation correctly.