Shopify themes, liquid, logos, and UX
I'd like to see the banner content beyond the image and not over the image.
When I see by mobile is correct.. but on desktop it is overlay.
How could I edit it as mobile version only?
{{ 'section-collection-banner.css' | asset_url | stylesheet_tag }}
{%- assign _section = section.settings -%}
{%- assign is_sub_collection = false -%}
{%- for link in linklists[_section.collections_menu].links -%}
{%- if is_sub_collection -%}
{%- break -%}
{%- endif -%}
{%- for sublink in link.links -%}
{%- if sublink.object.handle != collection.handle -%}
{%- continue -%}
{%- endif -%}
{%- assign is_sub_collection = true -%}
{%- break -%}
{%- endfor -%}
{%- endfor -%}
{%- if settings.show_breadcrumbs -%}
{{- 'component-breadcrumbs.css' | asset_url | stylesheet_tag -}}
{%- endif -%}
<div class="collection-banner{% unless _section.show_collection_image and collection.featured_image != blank %} collection-banner--no-image{% endunless %}">
{%- if settings.show_breadcrumbs -%}
<div class="collection-banner__breadcrumbs container">
{%- render 'breadcrumbs', mod_page_title: collection.title -%}
</div><!-- /.collection-banner__breadcrumbs -->
{%- endif -%}
{%- if _section.show_collection_image and collection.featured_image != blank -%}
<div class="collection-banner__image">
{%- render 'collection-image'
with collection as collection_ref,
classes: 'collection-banner__media',
is_sub_collection: is_sub_collection,
image_vertical_position: section.settings.image_vertical_position
-%}
<span class="collection-banner__overlay" style="opacity: {{ _section.image_overlay_opacity | default: 0 }}%;"></span>
</div><!-- /.collection-banner__media -->
{%- endif -%}
<div class="collection-banner__inner container">
<div class="collection-banner__content">
<h1 class="collection-banner__title h4">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>
{%- if _section.show_collection_description -%}
<div class="collection-banner__entry{% unless _section.collections_menu_style == 'links' %} collection-banner__entry--alt{% endunless %}">
{{- collection.description -}}
</div><!-- /.collection-banner__entry -->
{%- endif -%}
</div><!-- /.collection-banner__content -->
{%-
liquid
if _section.collections_menu != blank
assign class = ''
if section.settings.collections_menu_style != 'links'
assign class = 'large-up-hide'
endif
render 'collections-menu', class: class
endif
-%}
</div><!-- /.collection-banner__inner -->
</div><!-- /.collection-banner -->
{%- if _section.collections_menu != blank and section.settings.collections_menu_style != 'links' -%}
<div class="container">
{%- render 'collections-menu', class: 'small-hide medium-hide' -%}
</div><!-- /.container -->
{%- endif -%}
{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label",
"info": "t:sections.main-collection-banner.settings.show_collection_image.info"
},
{
"type": "select",
"id": "image_vertical_position",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.label",
"options": [
{
"value": "top",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.top.label"
},
{
"value": "center",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.center.label"
},
{
"value": "bottom",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.bottom.label"
}
],
"default": "center"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "t:sections.main-collection-banner.settings.image_overlay_opacity.label",
"default": 50
},
{
"type": "header",
"content": "t:sections.main-collection-banner.settings.header_menu.content",
"info": "t:sections.main-collection-banner.settings.header_menu.info"
},
{
"type": "link_list",
"id": "collections_menu",
"label": "t:sections.main-collection-banner.settings.collections_menu.label",
"info": "t:sections.main-collection-banner.settings.collections_menu.info"
},
{
"type": "select",
"id": "collections_menu_style",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.label",
"options": [
{
"value": "links",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_1.label"
},
{
"value": "thumbnails-square",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_2.label"
},
{
"value": "thumbnails-round",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_3.label"
}
],
"default": "thumbnails-round"
}
],
"blocks": [
{
"type": "menu-item",
"name": "t:sections.main-collection-banner.blocks.menu-item.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.main-collection-banner.blocks.menu-item.settings.title.label",
"info": "t:sections.main-collection-banner.blocks.menu-item.settings.title.info"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.main-collection-banner.blocks.menu-item.settings.image.label"
}
]
}
]
}
{% endschema %}
Hello, can u send me the url of a page example?
The theme is not published. I attached the screenshots..
Senza la pagina avanti non posso aiutarti, dovrei vedere le classi degli elementi, dovresti farmi degli screen dell'ispezione elemento, se non hai problemi posso chiederti l'accesso come collaboratore e te lo faccio un secondo
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024