This guide empowers you to take control of your Shopify website’s appearance by creating sections that only show on Desktop or Mobile. We can make this happen with some simple CSS, no coding experience required. Learn how to:
- Hide desktop sections to streamline your mobile experience.
- Create mobile-specific sections to deliver a tailored experience for mobile users.
This is perfect for themes like Dawn that lack built-in mobile section editing functionalities. So let’s jump right in!
Prefer to watch? Here is the video 🫶🏽
Part 1: Hide Desktop Section on Mobile Devices
STEP 1: Open the Theme Customizer.
Begin by accessing the Customizer of your website. This is where you’ll make the necessary changes to hide or display sections based on the device.
In your Shopify admin, navigate to the theme editor and click on Customize.
STEP 2: Select the section you want to hide on mobile.
- Select the section you wish to hide on mobile devices.
- Scroll to the button to access the “Custom CSS” section
STEP 3: Add CSS.
Paste the CSS code below in the the Custom CSS section
@media screen and (max-width: 751px) {
{
display: none !important;
}
}
Understanding the Code:
This code uses a media query, which tells your website how to style content based on the screen size. In this case, the @media screen and (max-width: 751px) part targets screens with a maximum width of 750 pixels (typical mobile screen size).
The display: none !important; rule essentially hides the section by making its display invisible on these screens. The !important part ensures the rule overrides any other styles that might conflict with hiding the section.
STEP 4: Save and View.
Save your changes and preview your website to see the desktop and mobile versions. The desktop section should be hidden on mobile.
Part 2: Create a Mobile-Specific Section
STEP 1: Open the Theme Customizer.
Begin by accessing the Customizer of your website. This is where you’ll make the necessary changes to hide or display sections based on the device.
In your Shopify admin, navigate to the theme editor and click on Customize.
STEP 2: Add/design a section for mobile.
Add the desired section, edit the content to be mobile-friendly (e.g., use a vertical image).
STEP 3: Add CSS.
In the section, scroll to the button to access the “Custom CSS” section. Then paste the CSS code below in the the CSS section.
@media screen and (min-width: 750px) {
{
display: none !important;
}
}
Understanding the Code:
This code snippet utilizes a media query as well. Here, @media screen and (min-width: 750px) targets screens with a minimum width of 750 pixels. This means the code applies to screens wider than a typical mobile device (around 750px).
The display: none !important; rule hides the section on these screens. This is typically used in the mobile-specific section code to ensure it’s hidden on desktops and larger screens. The !important part again guarantees this rule overrides any conflicting styles.
STEP 4: Save and View.
Save your changes and preview your website to see the desktop and mobile versions. The desktop section should be hidden on mobile.
Bonus Tip:
Experiment with different breakpoints (e.g., min-width: 900px) to find the optimal viewing experience for various screen sizes (tablets, desktops, etc.).
Pssssst…. You can 📌 pin this article for reference to your Shopify Board on Pinterest! 👍🏽
Finding Your Theme’s Breakpoint
This guide uses a general breakpoint of 750px. However, some themes might have different breakpoints. To locate your theme’s specific breakpoint:
- Go to “Online Store” > “Themes” in your Shopify admin.
- Click “Actions” > “Edit code”
- In the “Assets” folder, locate the “base.css” or “theme.scss”
- Search for “@media” using the search function.
- Look for media queries related to screen width. This will reveal the breakpoint used by your theme.
Enjoy the Flexibility! You’ve successfully customized your website to hide or display sections based on device size. With this basic CSS technique, you gain more control over your Shopify website layout. Remember to tailor the code and breakpoints to your specific needs and theme.
YOU GOT THIS!
Betsy
FAQ’s
Why would I want to hide sections on mobile devices?
Hiding certain sections on mobile devices can help optimize the user experience by removing clutter or content that may not be relevant or display well on smaller screens.
Can I use this method to show different content on mobile and desktop?
Yes, you can use this method to show different content on mobile and desktop by duplicating sections and customizing them separately for each device.
Do I need coding experience to implement this tutorial?
No, you don’t need coding experience. The tutorial provides simple CSS code that you can copy and paste into your website’s Customizer.
Can I hide specific elements within a section instead of hiding the entire section?
Yes, you can target specific elements within a section using CSS selectors. This allows for more granular control over which content is displayed or hidden on different devices.
