Hide a Conversion Block on mobile or desktop

Most blocks have no mobile or desktop switch. Paste a short rule in the block's Custom CSS box instead.

Hide a block

1. In Shopify admin, open Online Store → Themes.
2. Click Customize on your theme.
3. Open the template.
4. Select the block.
5. Scroll to Custom CSS at the bottom of its settings.
6. Paste one of the rules below.
7. Click Save.

To hide it on phones:

@media (max-width: 749px) {
  :host { display: none !important; }
}

To hide it on desktop:

@media (min-width: 750px) {
  :host { display: none !important; }
}

Check the result on your live page, on a phone and on a computer. The empty space your theme leaves around a block can stay.

To show different blocks on each device

Add the block twice. Hide one on phones and the other on desktop. Give each its own settings.

Three blocks work differently

The rules above don't work on these three.

• Wrapper: turn off Use wrapper on mobile to show the box from 768px wide and up.
• Atc button styling: the block restyles your theme's button on every device. You can't limit it to one.
• Sticky add to cart: Hide image on mobile hides the image, not the bar. To hide the bar on phones, paste this rule in the block's Custom CSS:

@media (max-width: 749px) {
  .sticky-atc-wrapper { display: none !important; }
}

For desktop, use min-width: 750px instead.

Related

• Add custom CSS to Conversion Blocks
• Remove a Conversion Block from your theme

Also searched as: hide block on mobile, hide block on desktop, mobile only block, desktop only block, show block on mobile only, block not on phone