Make Sections different on Mobile Desktop

Store Design
,
1

Hey got some sections i want to be only on desktop / mobile as i want to have different sections (design of sections) on mobile and desktop

Can someone please help me? Want to be Multicolum to be different on mobile/desktop, as i have to use different padding etc.

Same for Featured collection as i want to show more products on desktop than on mobile..

https://f66a28-c1.myshopify.com/?_ab=0&_fd=0&_sc=1

burtah

2

You can just make all your sections as you normally would and then you can select which sections to show on desktop and hide on mobile or vice versa.

The problem i believe you would face or you have already been there is Shopify does not allow the option to hide sections in terms of devices, it either displays on all or hides on all.

So you probably have to go with css. This would do it but that wouldn’t be a precise solution. One way that comes to my mind now is to edit each section and insert some liquid and css code where you as a store owner customising your store gets an option to hide or show sections on specific devices.

3

for image banner i was able to do it with this css code:

@media screen and (min-width: 750px) {
.banner,
slideshow-component {
display: none;
}
}

I just need the same for other sections

4

Yeah, already told you this is possible with css. But the other way is a more controlled way.

But if this suits you, you can tell me all the sections that you wanna hide on desktop / mobile respectively and I can help you with this

One problem with this is you have to make sure the ones you are hiding on desktop you also have to write css code to make sure that section does not hide on mobile. I am sure you get my point.

5

Its multicolumn section and featured collection

6

Please tell me the theme you are using and also send your store url.

7

Craft Theme

https://y1re4xa02f76t65f-85421687108.shopifypreview.com

burtah

8

Okk, i believe this is a free theme so probably won’t need access to your store, I can try this out on my system and update the code with you.

9

Hey @noah12x2 I just updated the code for multicolumn. The way i did it gives you much better customization opportunity.

Shadab_dev_0-1727578101651.png
Shadab_dev_0-1727578101651.png241×142 3.41 KB

You get an option like this in the customizer.

Just open the multicolumn.liquid file from code editor and paste this code. Dont worry i havent changed much. Just added liquid and a bit of css for the options. Let me know if this works out for you, i can update you with the code for featured collection.

{{ ‘section-multicolumn.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
{% if section.settings.hide-on-desktop %}
.multicolumn{
display:none;
}
{% else %}
.multicolumn{
display:block;
}
{% endif %}}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media screen and (max-width: 767px){
{% if section.settings.hide-on-mobile %}
.multicolumn{
display:none;
}
{% else %}
.multicolumn{
display:block;
}
{% endif %}}
{%- endstyle -%}

{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}

{%- unless section.settings.title == blank -%}

{{ section.settings.title }}

{%- if section.settings.button_label != blank and show_mobile_slider -%} {{- section.settings.button_label | escape -}} {%- endif -%}
{%- endunless -%}
    {%- liquid assign highest_ratio = 0 for block in section.blocks if block.settings.image.aspect_ratio > highest_ratio assign highest_ratio = block.settings.image.aspect_ratio endif endfor -%} {%- for block in section.blocks -%} {%- assign empty_column = '' -%} {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%} {%- assign empty_column = ' multicolumn-list__item--empty' -%} {%- endif -%}
  • {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %}
    {%- liquid assign number_of_columns = section.settings.columns_desktop assign number_of_columns_mobile = section.settings.columns_mobile assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px' if section.settings.image_width == 'half' assign image_width = 0.5 elsif section.settings.image_width == 'third' assign image_width = 0.33 else assign image_width = 1 endif -%} {% capture sizes %} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}), calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }}) {% endcapture %} {{ block.settings.image | image_url: width: 3200 | image_tag: widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200', sizes: sizes, class: 'multicolumn-card__image' }}
    {%- endif -%}
    {%- if block.settings.title != blank -%}

    {{ block.settings.title }}

    {%- endif -%} {%- if block.settings.text != blank -%}
    {{ block.settings.text }}
    {%- endif -%} {%- if block.settings.link_label != blank -%} {{- block.settings.link_label | escape -}}  {{ 'icon-arrow.svg' | inline_asset_content }} {%- endif -%}
    • {%- endfor -%}

{%- if show_mobile_slider -%}

{{ 'icon-caret.svg' | inline_asset_content }}
1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }}
{{ 'icon-caret.svg' | inline_asset_content }}
{%- endif -%}
{%- if section.settings.button_label != blank -%} {{ section.settings.button_label | escape }} {%- endif -%}

{% schema %}
{
“name”: “t:sections.multicolumn.name”,
“class”: “section”,
“tag”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “checkbox”,
“label”: “Hide Section on Desktop”,
“id”: “hide-on-desktop”,
“default”:false
},
{
“type”: “checkbox”,
“label”: “Hide Section on Mobile”,
“id”: “hide-on-mobile”,
“default”:false
},
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “t:sections.multicolumn.settings.title.default”,
“label”: “t:sections.multicolumn.settings.title.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “select”,
“id”: “image_width”,
“options”: [
{
“value”: “third”,
“label”: “t:sections.multicolumn.settings.image_width.options__1.label”
},
{
“value”: “half”,
“label”: “t:sections.multicolumn.settings.image_width.options__2.label”
},
{
“value”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.options__3.label”
}
],
“default”: “full”,
“label”: “t:sections.multicolumn.settings.image_width.label”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__3.label”
},
{
“value”: “circle”,
“label”: “t:sections.multicolumn.settings.image_ratio.options__4.label”
}
],
“default”: “adapt”,
“label”: “t:sections.multicolumn.settings.image_ratio.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 6,
“step”: 1,
“default”: 3,
“label”: “t:sections.multicolumn.settings.columns_desktop.label”
},
{
“type”: “select”,
“id”: “column_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.multicolumn.settings.column_alignment.options__2.label”
}
],
“default”: “left”,
“label”: “t:sections.multicolumn.settings.column_alignment.label”
},
{
“type”: “select”,
“id”: “background_style”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.multicolumn.settings.background_style.options__1.label”
},
{
“value”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.options__2.label”
}
],
“default”: “primary”,
“label”: “t:sections.multicolumn.settings.background_style.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “t:sections.multicolumn.settings.button_label.default”,
“label”: “t:sections.multicolumn.settings.button_label.label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.multicolumn.settings.button_link.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.multicolumn.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.multicolumn.settings.columns_mobile.options__2.label”
}
],
“default”: “1”,
“label”: “t:sections.multicolumn.settings.columns_mobile.label”
},
{
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.multicolumn.settings.swipe_on_mobile.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.multicolumn.blocks.column.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.multicolumn.blocks.column.settings.image.label”
},
{
“type”: “inline_richtext”,
“id”: “title”,
“default”: “t:sections.multicolumn.blocks.column.settings.title.default”,
“label”: “t:sections.multicolumn.blocks.column.settings.title.label”
},
{
“type”: “richtext”,
“id”: “text”,
“default”: “t:sections.multicolumn.blocks.column.settings.text.default”,
“label”: “t:sections.multicolumn.blocks.column.settings.text.label”
},
{
“type”: “text”,
“id”: “link_label”,
“label”: “t:sections.multicolumn.blocks.column.settings.link_label.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.multicolumn.blocks.column.settings.link.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.multicolumn.presets.name”,
“blocks”: [
{
“type”: “column”
},
{
“type”: “column”
},
{
“type”: “column”
}
]
}
]
}
{% endschema %}