A Shopify store owner using the Horizon theme seeks guidance on preserving CSS customizations during theme updates. The user has been editing code directly, including custom styling for out-of-stock variant buttons.
Key Recommendations:
Resolution:
The original poster successfully relocated their customizations to the proper Custom CSS location and updated to the latest Horizon version. Multiple contributors emphasized that placing code in the theme customizer’s Custom CSS tab prevents update conflicts, while editing liquid files directly requires manual maintenance during updates.
Hi! I am currently working in the Horizon Theme. I have made a few customizations over the course of building our site. To be clear, I am not a developer.
Other than backing up the site (just in case) before updating is there anything a novice can do to make sure their changes to CSS, etc. carry over?
Try to always use custom-css settings, or custom-liuid settings/sections/blocks to make changes.
If you modify files directly it’s likely to prevent automatic updates.
In that case of breaking the update path you should be using version control , such as the shopify github integration, to track your changes so they can be extracted then reapplied to new versions.
Otherwise your having to do it all manually, even with the help of a Diff tool to compare the files to show you all changes.
Remember where you edited site code before and better customize code in one place all the time. In this way, you can easily back up or find out the previous history after updating.
Thank you for your advice. Yes, I have been editing the code throughout. A specific example would be editing how an variant button appears when it is out of stock. I did this in the CSS:
/* testing hover for out of stock variant*/
.variant-option__button-label:has([data-option-available=‘false’]):has(:hover) {
--variant-picker-stroke-color: #f70202;
background-color: #FFFFFF;
color: rgb(var(--color-variant-text-rgb) / var(--opacity-100));
border-color: #f70202;
}
Would there have been a better location to do this type of adjustment? Or, as Zachary1 has suggested, put these all in one location (maybe at the very bottom of the CSS?)
Thank you! Would you recommend placing every customization at the bottom of the CSS. Does it matter the location in the CSS? This is how much of a novice I am.
Hello @ambullseye ,
I hope you are well!
No, do not paste at bottom of the page. Instead, I recommnend you to paste the custom CSS at Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab. This will not block the updates of the theme.
Thank you so much!!!
I just wanted to say again how much I appreciate your responses. Following your advice, I made changes and now have the CSS in the correct location and fully updated to the latest Horizon version. Very grateful!
It is definitely not recommended to place all codes at the bottom of CSS. You need to place them based on specific pages and if it can be applied from customization page directly, you had better place the code in the theme page and this will not affect the normal code contents in liquid files.