Shopify themes, liquid, logos, and UX
I'm trying to hide a section in Shopify only on the computer by ID, it happens that after some time the ID of the section changes, is there any way for the ID to stay the same forever?
My code before changing the id:
@media(min-width:767px){ #shopify-section-template--19645135487325__multicolumn_WjzVFL{ display:none !important } }
Hi @KhallP ,
This is Richard from PageFly - Shopify Page Builder App.
The section id changes because this is a dynamic element. Will change when the theme is published. You need to set the class so you can keep the CSS
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
In a simple way, could you explain to me how to do this?
Hello @KhallP
If you're trying to hide a section on desktop only, you can use media queries based on the screen width, and you can also use classes or other selectors that are less likely to change.
Here's an example of how you can modify your code:
css:
@media only screen and (min-width: 767px) {
.your-section-class {
display: none !important;
}
}
Replace "your-section-class" with the actual class of the section you want to hide. If your section doesn't have a class, you might need to inspect the HTML code and find a more stable selector.
Not working, my section class is "shopify-section section":
<section id="shopify-section-template--19645135487325__multicolumn_87GNFy" class="shopify-section section">
In my code I put it like this:
@media (min-width: 767px) {
.shopify-section section{
display: none !important;
}
}
Try this code
@media screen and (min-width:767px){
.shopify-section section{
display: none !important;
}
}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
still not working 😕
for some reason when I enter the code the only selection that disappears is the entire section of the products page
It happed because this class used multipule time's in section.
How can I resolve this?
something is happening in my store, when I enter the code to hide the staked product section from the desktop nothing happens:
@media screen and(min-width:767px){
.shopify-section section section-featured-product{
display:none !important
}
}
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024