This is a quick and easy way to add a temporary modal window, such as for New Year's holiday announcements, using only CSS without using Javascript.
◆Benefits of implementation
・Lightweight implementation ・Highly maintainable simple code
◆Specific implementation steps ・Add a customized Liquid section where you want to display it, insert the prepared modal code, and apply styling with CSS
* Important Note: However, if the "transform" property is set on the parent element, such as product information for the "Dawn/Rise" theme, the modal display of the entire screen will not function correctly.
You need to check the parent element's style beforehand.
Example of how to implement a modal window using only CSS without using Javascript
[How to set it up] Add a customized Liquid section where you want it to appear and insert the code.
[Note] If the parent element of the code you add to display the modal has the "transform" property set, the modal will not be displayed on the entire screen (e.g., product information for the "Dawn/Rise" theme).
