We've recently been made aware of a minor stylesheet syntax error that has existed in many ShowTime theme versions used between 2016 and mid-2020. This error in the code has existed for a long time, but it was never detected because it did not ever cause any display issues - until now.
Apparently Shopify has recently made some changes on their end and have integrated some software that now automatically "minifies" CSS code. This means that instead of the CSS stylesheet being thousands of lines of code, it is all "compacted" down to one or very few (really long) lines of code. This is designed to improve loading performance. Whatever tool they're using to do this is now encountering this syntax error in the theme code, and this is breaking the process of minimizing the code. When the script encounters this error, it just stops writing the CSS code for the rest of the file. As a result, all the code that appears in the original file after the syntax error is not being written to the minified file, so it breaks many styles on the page.
For some reason, this is happening on some, but not all stores that are using the affected versions of ShowTime. We're not sure why this is, but it could be that Shopify is performing testing on this feature and hasn't rolled it out to all merchants.
In any event, if you are using a version of the ShowTime theme that was released in this timeframe and have noticed that some of your pages no longer look right, you may have encountered this problem. Luckily, fixing it is very simple.
To address this, please follow these steps:
Please log in to your store as an administrator and edit your stylesheet. This file might be called either style.scss.liquid or style.css.liquid. If you do not have files with these names, or your file is simply called style.css, you would not have this issue. To access the file, please follow these steps:
- From your Shopify dashboard, click Online Store > Themes and look for ShowTime
- Click the Actions button and choose Edit Code from the drop-down menu
- Navigate to the Assets folder and locate the file called either style.scss.liquid or
- Click on it to open the file in the editor
- Press Control + F (CMD + F on a Mac) and search for .prod_sku_vend until you find the bit of code that appears in the screenshot below. Note there may be lots of results for this string, so you'll need to click through them until you find this:
- Remove the extra curly bracket } as shown in the screenshot and save the file.
Once done, this issue should be resolved. If you are uncomfortable making this adjustment, please contact our support team and we can request access to your store and fix it for you.
Article is closed for comments.