Shopify Horizon: Hide a Block on Mobile or Desktop

Shopify Horizon has no setting to hide a block on mobile or desktop. Its Group block scales padding on smaller screens but has no separate mobile padding settings. We added both options with one custom theme block, Responsive group, which you put around any content in the theme editor. You can show the content on all devices, on mobile only, or on desktop only, and you can give it separate mobile padding. Use it to show a block only on mobile or only on desktop, or to show different content on phones and computers.

The block is a single new file, and Horizon’s own files stay unchanged. We built and tested it on Horizon 4.2.0. Below you will find the complete code, the editor setup, and the limits you should know before you duplicate content for each device.

The Mobile version container is selected. It holds a Group with a heading, text, and a button, and shows only on screens narrower than 750px.

Choose the right option

How you hide the content depends on how much you need to hide and who will manage it:

• A whole Custom section, once. Set the section’s Height to Auto, then use its Custom CSS field in the theme editor. This does not require a new file. For example, this hides a Custom section’s content on screens narrower than 750px:

@media screen and (max-width: 749px) {
  .section-content-wrapper {
    display: none;
  }
}

In our Horizon 4.2.0 test with Height set to Auto, the Custom section left no empty band on mobile and still showed on desktop. The rule works only in Custom sections: other section types, such as Featured collection, use different markup, so pasting it into their Custom CSS does not hide them.

• Blocks inside a section, or changes you make often. Use the Responsive group block. After it is installed, you choose the device and padding from a menu for each block. You do not need to write CSS for each change.
• Different content on mobile and desktop. Build one Responsive group, then duplicate it from the block’s … menu. Set one copy to Mobile and the other to Desktop, and adjust each copy for its screen size. This is useful when a layout cannot work on both screen sizes, such as a wide comparison row.

Both options hide content with CSS. The hidden content is still in the page HTML, and the last section explains why that matters.

Add the Responsive group block

Work on an unpublished duplicate of your theme, and publish it only after you have tested it.

1. In Shopify admin, go to Online Store > Themes, open the … menu on the duplicate theme, and choose Edit code.
2. In the blocks folder, add a new file named cw-responsive-group.liquid.
3. Paste the complete code below and save.

{% comment %}Modified by CheckoutWorks.dev{% endcomment %}
{% assign cw_attribute = block.settings.attribute | handleize %}

<div
  class="cw-responsive-group spacing-style cw-responsive-group--{{ block.settings.device }}{% if block.settings.different_mobile_padding %} cw-responsive-group--mobile-padding{% endif %}{% if block.blocks.size == 0 and request.design_mode == false %} cw-responsive-group--empty{% endif %}"
  style="
    {% render 'spacing-style', settings: block.settings %}
    {% if block.settings.different_mobile_padding %}
      --cw-mobile-padding-top: {% if block.settings.mobile_padding_top > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_top }}px)){% else %}{{ block.settings.mobile_padding_top }}px{% endif %};
      --cw-mobile-padding-bottom: {% if block.settings.mobile_padding_bottom > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_bottom }}px)){% else %}{{ block.settings.mobile_padding_bottom }}px{% endif %};
…

{% comment %}Modified by CheckoutWorks.dev{% endcomment %}
{% assign cw_attribute = block.settings.attribute | handleize %}

<div
  class="cw-responsive-group spacing-style cw-responsive-group--{{ block.settings.device }}{% if block.settings.different_mobile_padding %} cw-responsive-group--mobile-padding{% endif %}{% if block.blocks.size == 0 and request.design_mode == false %} cw-responsive-group--empty{% endif %}"
  style="
    {% render 'spacing-style', settings: block.settings %}
    {% if block.settings.different_mobile_padding %}
      --cw-mobile-padding-top: {% if block.settings.mobile_padding_top > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_top }}px)){% else %}{{ block.settings.mobile_padding_top }}px{% endif %};
      --cw-mobile-padding-bottom: {% if block.settings.mobile_padding_bottom > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_bottom }}px)){% else %}{{ block.settings.mobile_padding_bottom }}px{% endif %};
      --cw-mobile-padding-left: {% if block.settings.mobile_padding_left > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_left }}px)){% else %}{{ block.settings.mobile_padding_left }}px{% endif %};
      --cw-mobile-padding-right: {% if block.settings.mobile_padding_right > 20 %}max(20px, calc(var(--spacing-scale) * {{ block.settings.mobile_padding_right }}px)){% else %}{{ block.settings.mobile_padding_right }}px{% endif %};
    {% endif %}
  "
  {% if cw_attribute != blank %}data-cw-{{ cw_attribute }}{% endif %}
  {{ block.shopify_attributes }}
>
  {% content_for 'blocks' %}
</div>

{% stylesheet %}
  .cw-responsive-group {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .layout-panel-flex--row > .cw-responsive-group {
    width: auto;
  }

  .layout-panel-flex--row > .cw-responsive-group:has(> .group-block--width-fill) {
    flex: 1;
  }

  .cw-responsive-group--empty {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .cw-responsive-group.cw-responsive-group--mobile-padding {
      padding-block: calc(var(--cw-mobile-padding-top) + var(--section-top-offset, 0px)) var(--cw-mobile-padding-bottom);
      padding-inline: var(--cw-mobile-padding-left) var(--cw-mobile-padding-right);
    }

    .layout-panel-flex--row.mobile-column > .cw-responsive-group {
      width: 100%;
    }

    .cw-responsive-group--desktop-only {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .cw-responsive-group--mobile-only {
      display: none;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Responsive group",
  "tag": null,
  "blocks": [
    { "type": "@theme" },
    { "type": "@app" }
  ],
  "settings": [
    {
      "type": "select",
      "id": "device",
      "label": "Device",
      "options": [
        { "value": "all", "label": "All" },
        { "value": "mobile-only", "label": "Mobile" },
        { "value": "desktop-only", "label": "Desktop" }
      ],
      "default": "all"
    },
    {
      "type": "text",
      "id": "attribute",
      "label": "Attribute",
      "info": "Adds a data-cw- attribute for Custom CSS."
    },
    { "type": "header", "content": "Padding" },
    { "type": "range", "id": "padding-block-start", "label": "Top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding-block-end", "label": "Bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding-inline-start", "label": "Left", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding-inline-end", "label": "Right", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 },
    { "type": "checkbox", "id": "different_mobile_padding", "label": "Different mobile padding", "default": false },
    { "type": "header", "content": "Mobile padding", "visible_if": "{{ block.settings.different_mobile_padding }}" },
    { "type": "range", "id": "mobile_padding_top", "label": "Top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0, "visible_if": "{{ block.settings.different_mobile_padding }}" },
    { "type": "range", "id": "mobile_padding_bottom", "label": "Bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0, "visible_if": "{{ block.settings.different_mobile_padding }}" },
    { "type": "range", "id": "mobile_padding_left", "label": "Left", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0, "visible_if": "{{ block.settings.different_mobile_padding }}" },
    { "type": "range", "id": "mobile_padding_right", "label": "Right", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0, "visible_if": "{{ block.settings.different_mobile_padding }}" }
  ],
  "presets": [
    { "name": "Responsive group", "category": "Layout" }
  ]
}
{% endschema %}

The code has three parts:

• A container. Any theme block can go inside it, including Horizon’s Group, Text, Image, and Button blocks.
• A device setting. It hides the container on mobile or desktop with CSS. The switch happens at 750px, the same width where Horizon changes to its mobile layout.
• Padding that follows Horizon’s rules. The block uses Horizon’s own spacing snippet. Values above 20px get smaller on narrower screens, the same way they do on Horizon’s Group block.

The optional Attribute field adds a data-cw- attribute to the container. For example, promo becomes data-cw-promo. You can then target this container in the section’s Custom CSS to change its background, border, or opacity without affecting other Responsive groups:

[data-cw-promo] {
  background: #f1f4f1;
  border: 1px solid #2e4843;
  border-radius: 12px;
}

Build mobile-only and desktop-only versions

This works best when one design cannot serve both screen sizes. A three-column feature grid, a wide comparison table, or a long image-and-text row often becomes cramped or very long on a phone. Instead of forcing one layout to fit both, you can build a separate mobile version that is shorter or arranged differently, and keep the desktop version as it is.

1. Open the theme editor on the duplicate theme and go to the page you want to change.
2. In the section, select Add block and choose Responsive group from the Layout category.
3. Add blocks inside it, or drag existing blocks into it. The Responsive group has no gap setting, so blocks placed directly inside it touch each other. To add space between blocks, or to set direction, alignment, or background, add a Group inside the Responsive group and use the Group’s settings.
4. Set Device to All, Mobile, or Desktop, and save.

On our Horizon 4.2.0 development theme, we added two Responsive groups to the same section. The desktop version shows three steps in a row. The mobile version replaces them with one short summary and a button.

Desktop: only the three-column version is visible.

Mobile: the same position shows the shorter version.

Set different padding on mobile

A block that needs 40px of space on desktop often looks too spaced out on a phone. To set separate spacing:

1. Set the desktop values under Padding.
2. Turn on Different mobile padding.
3. Set the Mobile padding values. They apply to screens narrower than 750px.

When Different mobile padding is off, the desktop values apply on every screen and scale down on smaller screens, like Horizon’s own padding. When it is on, the mobile values scale the same way.

In our test, 40px on a Responsive group and 40px on Horizon’s Group gave the same spacing at 375px, 800px, and 1200px.

Know what hiding does and does not do

• Hidden content still loads with the page. Liquid runs on Shopify’s servers and does not know the visitor’s device, so both copies are in the page HTML. CSS then hides one of them. Keep duplicated copies short, and avoid duplicating large images or videos.
• Two copies mean two sets of headings in the HTML. If you duplicate a section for mobile and desktop, both headings stay in the page source. Where you can, duplicate only the part that needs a different layout rather than the whole section.
• Hidden blocks are hard to select in the editor. A Mobile block does not appear in the desktop preview. Select it in the sidebar, or switch the editor preview to mobile.
• Width in horizontal layouts. In a vertical layout, the container spans the full width. In a horizontal Group, it only takes the space its content needs. If the Group inside it is set to Fill, the container expands to fill the row. A Custom percentage width on that inner Group is measured against the container, not the row, so for a precise width, put the Responsive group inside the custom-width Group instead.
• Empty containers do not show. On the live storefront, a Responsive group with no blocks inside is hidden, so it does not leave an empty gap.

Test and recheck after a Horizon update

Before you publish the duplicate theme, check it at a phone width and a desktop width. The breakpoint is between 749px and 750px, so also check a tablet width just above and below it. Check each Responsive group in these states:

• Set to Mobile, Desktop, and All.
• With a Group inside, set to Fill width, in sections aligned left and centered.
• Inside a horizontal Group, with and without Vertical on mobile.
• With and without separate mobile padding.

On Horizon 4.2.0, each version switched exactly between 749px and 750px, only one version showed at any width, and neither left an empty gap.

Horizon updates do not overwrite a new block file, but the block depends on a few parts of Horizon: the spacing-style snippet and its 20px scaling threshold, the --spacing-scale and --section-top-offset CSS variables, the layout-panel-flex--row, mobile-column, and group-block--width-fill classes, and the 750px breakpoint. After an update, repeat the checks above on an unpublished copy first. Our guide to updating Shopify Horizon without losing custom code covers the full process.