Hide section on desktop, but show on mobile

Store Design
21

Hi @lej123

Just find the word class in the section and then whatever class you see in “xyz” replace it with “xyz slideshow-section-home”.

Also, if you still having issues, kindly share the code of index-slideshow.liquid here.

22

Hello,

So the bit at the top here I’ve highlighted with my cursor , I should change to

index-slideshow.liquid slideshow-section-home

?

Thank you,

Lucy

23

Hello,

As I can’t seem to manage to work this, could you please let me know how to find the section ID for the section in its current position so I can try and hide it using the original method you showed me? It’s the slideshow section I want to hide on desktop, but keep on mobile.

Thanks very much

Lucu

24

Hi Lucy

It’s a simple class addition part.

Can you please share the slideshow.liquid code here so I’ll add the related class and you can copy and paste the code back into slideshow template?

25

Yes sure, thank you.

{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{%- if block.settings.image -%} {%- assign img_object = block.settings.image -%} {%- assign img_small = block.settings.image | img_url: '18x' -%} {%- assign img_api = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- else -%} {%- assign img_object = 'blank.svg' | asset_url -%} {%- assign img_small = 'blank.svg' | asset_url -%} {%- assign img_api = 'blank.svg' | asset_url -%} {%- endif -%} {%- assign transparency_class = '' -%} {%- if block.settings.transparent or block.settings.button_image -%} {%- assign transparency_class = 'hero__content--transparent' -%} {%- endif -%}

{% if block.settings.link_text == ‘’ and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% if block.settings.button_image %} {%- assign img_button = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.button_image.alt | default: block.settings.link_text }} {% else %} {% unless block.settings.title == '' %}

{{ block.settings.title | escape }}

{% endunless %} {% unless block.settings.description == '' %}

{{ block.settings.description }}

{% endunless %} {% unless block.settings.link_text == '' %} {{ block.settings.link_text | escape }} {% endunless %} {% endif %}

{% assign overlay_opacity = block.settings.overlay_opacity | times: 0.01 %}

{% if section.settings.height == ‘image-height’ %}
{{ block.settings.image.alt | default: block.settings.title }}
{% else %}

{% endif %} {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %} {% endif %}
{% endfor %}
{% endif %}

{%- assign init_color = section.blocks.first.settings.text_color -%}

{% render 'icon-arrow-left' %}
{% render 'icon-arrow-right' %}

{% if section.blocks.size == 0 %}

{{ 'home_page.onboarding.no_content' | t }}
{% endif %}

{% for block in section.blocks %}

{{ block.settings.image.alt | default: section.settings.title }}

{% if block.settings.button_image %}

{{ block.settings.button_image.alt | default: block.settings.link_text }}
{% endif %} {% endfor %}

{% schema %}
{
“name”: “Slideshow”,
“class”: “section-fullscreen”,
“settings”: [
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto-rotate slides”,
“default”: false
},
{
“type”: “range”,
“id”: “autoplay_speed”,
“min”: 4,
“max”: 15,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 8
},
{
“type”: “select”,
“id”: “height”,
“label”: “Section height”,
“default”: “screen-height-two-thirds”,
“options”: [
{ “value”: “screen-height-full”, “label”: “Full screen height”},
{ “value”: “screen-height-three-quarters”, “label”: “3/4 of screen”},
{ “value”: “screen-height-two-thirds”, “label”: “2/3 of screen”},
{ “value”: “screen-height-one-half”, “label”: “1/2 of screen”},
{ “value”: “screen-height-one-third”, “label”: “1/3 of screen”},
{ “value”: “seven-fifty-height-hero”, “label”: “750px” },
{ “value”: “sixty-fifty-height-hero”, “label”: “650px” },
{ “value”: "five-fifty-height-hero ", “label”: “550px” },
{ “value”: “four-fifty-height-hero”, “label”: “450px” },
{ “value”: “image-height”, “label”: “Image height” }
]
},
{
“type”: “checkbox”,
“id”: “show_dots”,
“label”: “Show dots”,
“default”: false
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “header”,
“content”: “Image”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “Match size to other slides”
},
{
“type”: “header”,
“content”: “Overlay”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: “Opacity”,
“info”: “Increase contrast for legible text.”,
“unit”: “%”,
“min”: 0,
“max”: 90,
“step”: 5,
“default”:15
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay color”,
“default”: “#fff”
},
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Image slide”
},
{
“type”: “textarea”,
“id”: “description”,
“label”: “Subheading”,
“default”: “Tell your brand’s story through images.”
},
{
“type”: “select”,
“id”: “flex_align”,
“label”: “Block alignment”,
“default”: “align–middle-center”,
“options”: [
{ “value”: “align–top-left”, “label”: “Top left”},
{ “value”: “align–top-center”, “label”: “Top center”},
{ “value”: “align–top-right”, “label”: “Top right”},
{ “value”: “align–middle-left”, “label”: “Middle left”},
{ “value”: “align–middle-center”, “label”: “Absolute center”},
{ “value”: “align–middle-right”, “label”: “Middle right”},
{ “value”: “align–bottom-left”, “label”: “Bottom left”},
{ “value”: “align–bottom-center”, “label”: “Bottom center”},
{ “value”: “align–bottom-right”, “label”: “Bottom right”}
]
},
{
“type”: “select”,
“id”: “text_color”,
“label”: “Text color”,
“default”: “text-light”,
“options”: [
{ “value”: “text-light”, “label”: “White”},
{ “value”: “text-dark”, “label”: “Dark”}
]
},
{
“type”: “checkbox”,
“id”: “transparent”,
“label”: “Transparent background”,
“default”: true
},
{
“type”: “header”,
“content”: “Button”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Text”,
“default”: “View products”,
“info”: “Leave blank to link entire image”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Button image (optional)”
},
{
“type”: “image_picker”,
“id”: “button_image”,
“label”: “Button image”,
“info”: "Transparent .png recommended "
}
]
}
],
“presets”: [{
“name”: “Slideshow”,
“category”: “Image”,
“settings”: {
“height”: “screen-height-two-thirds”
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}]
}
{% endschema %}

26

Hi Lucy

Thanks for posting the code.

Copy and paste below code to index-slideshow.liquid


{% if section.blocks.size > 0 %}

{% for block in section.blocks %}

{%- if block.settings.image -%}
{%- assign img_object = block.settings.image -%}
{%- assign img_small = block.settings.image | img_url: '18x' -%}
{%- assign img_api = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- else -%}
{%- assign img_object = 'blank.svg' | asset_url -%}
{%- assign img_small = 'blank.svg' | asset_url -%}
{%- assign img_api = 'blank.svg' | asset_url -%}
{%- endif -%}
{%- assign transparency_class = '' -%}
{%- if block.settings.transparent or block.settings.button_image -%}
{%- assign transparency_class = 'hero__content--transparent' -%}
{%- endif -%}

{% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% if block.settings.button_image %}
{%- assign img_button = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% else %}
{% unless block.settings.title == '' %}
# 
{{ block.settings.title | escape }}

{% endunless %}
{% unless block.settings.description == '' %}

{{ block.settings.description }}

{% endunless %}
{% unless block.settings.link_text == '' %}

{{ block.settings.link_text | escape }}

{% endunless %}
{% endif %}

{% assign overlay_opacity = block.settings.overlay_opacity | times: 0.01 %}

{% if section.settings.height == 'image-height' %}

{% else %}

{% endif %}
{% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}

{% endif %}

{% endfor %}

{% endif %}

{%- assign init_color = section.blocks.first.settings.text_color -%}
{% render 'icon-arrow-left' %}

{% render 'icon-arrow-right' %}

{% if section.blocks.size == 0 %}

{{ 'home_page.onboarding.no_content' | t }}

{% endif %}

{% for block in section.blocks %}

{% if block.settings.button_image %}

{% endif %}
{% endfor %}

{% schema %}
{
"name": "Slideshow",
"class": "section-fullscreen slideshow-section-home",
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_speed",
"min": 4,
"max": 15,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 8
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-two-thirds",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show dots",
"default": false
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Match size to other slides"
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default":15
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "textarea",
"id": "description",
"label": "Subheading",
"default": "Tell your brand's story through images."
},
{
"type": "select",
"id": "flex_align",
"label": "Block alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-light",
"options": [
{ "value": "text-light", "label": "White"},
{ "value": "text-dark", "label": "Dark"}
]
},
{
"type": "checkbox",
"id": "transparent",
"label": "Transparent background",
"default": true
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "header",
"content": "Button image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Button image",
"info": "Transparent .png recommended "
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
"height": "screen-height-two-thirds"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}

and then paste the below code which I think you already pasted in theme.liquid
27

Yes it is working. Thanks so much again for all of your help!