My site redesign is not yet live so I am unable to provide a URL but I am hoping I could get help from someone knowledgeable in Liquid. My theme (Envy by WeTheme) offers the option to display my collections title on my collections page but it appears below my collections banner. I would like it to appear on top of my collections banner as a text overlay.
Here is the code:
{% if section.settings.tags_enable and section.settings.sort_enable %}
{% endif %}
{% if section.settings.collection_image_enable %}
{% if collection.image %}
{% render 'responsive-image' with collection.image, alt: collection.image.alt %}
{% endif %}
{% endif %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% paginate collection.products by limit %}
{% if collection.handle == 'all' %}
## {{ 'products.general.products_title' | t }}
{% else %}
## {{ collection.title }}
{% endif %}
{% if collection.description != empty %}
{{ collection.description }}
{% endif %}
{% if section.settings.tags_enable or section.settings.sort_enable %}
{% if section.settings.tags_enable %}
{{ 'tag' | link_to_tag: 'tag' }}"
{% if collection.handle %}
{% elsif collection.products.first.type == collection.title %}
{% elsif collection.products.first.vendor == collection.title %}
{% endif %}
{% endif %}
{% if section.settings.sort_enable %}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{% endif %}
{% endif %}
{% if section.settings.enable_collection_sidebar %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'vendors' %}
## {{ block.settings.title }}
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}
{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}
{% if its_a_match %}
- {{ product_vendor }}
{% else %}
- {{ product_vendor | link_to_vendor }}
{% endif %}
{% endfor %}
{% when 'text' %}
## {{ block.settings.title }}
{% if block.settings.richtext != blank %}
{{ block.settings.richtext }}
{% endif %}
{% when 'menu' %}
{%- assign collection_linklist = block.settings.collection_linklist -%}
## {{ block.settings.menu_title | escape }}
{% if linklists[collection_linklist].links.size > 0 %}
{% for link in linklists[collection_linklist].links %}
- {{link.title}}
{% endfor %}
{% endif %}
{% when 'image' %}
{% if block.settings.collection-sidebar-image %}
{% if block.settings.collection-sidebar-link %}
{% endif %}
{% assign alt = block.settings.collection-sidebar-image.alt | default: shop.name %}
{% render 'responsive-image' with block.settings.collection-sidebar-image, alt: alt %}
{% if block.settings.collection-sidebar-link %}
{% endif %}
{% endif %}
{% endcase %}
{% endfor %}
{% endif %}
{% endif %}
{% if section.settings.enable_collection_sidebar and section.blocks.size > 0 %}
{% else %}
{% endif %}
{%- assign is_empty_collection = false -%}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-6 two_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 3 %}
{%- assign grid_item_width = 'col-6 col-sm-4 col-md-4 three_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 4 %}
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-3 four_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 5 %}
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-2dot4 five_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 6 %}
{%- assign grid_item_width = 'col-6 col-sm-4 col-md-2 six_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% endcase %}
{%- capture olclasses -%}
{%- case section.settings.grid -%}
{%- when 2 -%}
{% cycle 'mobileCycle': ' alpha mobile-clear tablet-clear', ' omega' %} wow fadeInUp {% cycle 'animDelay': '', 'delay-1' %}
{%- when 3 -%}
{% cycle 'mobileCycle': ' alpha mobile-clear', '', ' mobile-clear omega', 'alpha', ' mobile-clear', ' omega' %} wow fadeInUp {% cycle 'animDelay': '', 'delay-1', 'delay-2' %}
{%- when 4 -%}
{% cycle 'mobileCycle': ' alpha mobile-clear tablet-clear', '', ' mobile-clear tablet-clear', ' omega' %} wow fadeInUp {% cycle 'animDelay': '', 'delay-1', 'delay-2', 'delay-3' %}
{%- when 5 -%}
{% cycle 'mobileCycle': ' alpha mobile-clear tablet-clear', '', ' mobile-clear tablet-clear', '', ' omega mobile-clear tablet-clear', ' alpha', ' mobile-clear tablet-clear', '', ' mobile-clear tablet-clear', ' omega' %} wow fadeInUp {% cycle 'animDelay': '', 'delay-1', 'delay-2', 'delay-3', 'delay-4' %}
{%- when 6 -%}
{% cycle 'mobileCycle': ' alpha mobile-clear tablet-clear', '', ' mobile-clear', ' tablet-clear', ' mobile-clear', ' omega' %} wow fadeInUp {% cycle 'animDelay': '', 'delay-1', 'delay-2', 'delay-3', 'delay-4', 'delay-5' %}
{%- endcase -%}
{%- endcapture -%}
{% for product in collection.products %}
1. {%-
render 'product-grid--indiv-product',
liquidObject: product
-%}
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
{% for i in (1..8) %}
{%- capture alphaclasses -%}
{%- case section.settings.grid -%}
{%- when 2 -%}
{% cycle 'alpha', 'omega' %}
{%- when 3 -%}
{% cycle ' alpha', '', ' omega' %}
{%- when 4 -%}
{% cycle ' alpha', '', '', ' omega' %}
{%- when 5 -%}
{% cycle ' alpha', '', '', '', ' omega' %}
{%- when 6 -%}
{% cycle ' alpha', '', '', '', '', ' omega' %}
{%- endcase -%}
{%- endcapture -%}
{% render 'product-grid--onboarding' %}
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
{% if is_empty_collection %}
{{ 'collections.general.no_matches' | t }}
{% endif %}
{% if paginate.pages > 1 %}
{% if section.settings.pagination_type == 'paged_navigation' %}
{% render 'pagination', paginate: paginate %}
{% elsif section.settings.pagination_type == 'infinite_scrolling' %}
{% if paginate.next %}
{{ 'collections.paginate.infinite_scrolling' | t }}
{% endif %}
{% else %}
{% if paginate.next %}
{{ 'collections.paginate.load_more' | t }}
{% endif %}
{% endif %}
{% endif %}
{% endpaginate %}
{% schema %}
{
"name": {
"en": "Collection pages",
"de": "Kollektionsseiten",
"es": "Páginas de colecciones",
"fr": "Pages de collection",
"pt-PT": "Páginas de coleções"
},
"max_blocks": 6,
"settings": [
{
"type": "range",
"id": "grid",
"min": 2,
"max": 6,
"step": 1,
"label": {
"en": "Products per row",
"de": "Produkte pro Zeile",
"es": "Productos por fila",
"fr": "Produits par ligne",
"pt-PT": "Produtos por linha"
},
"default": 4
},
{
"type": "range",
"id": "rows",
"min": 3,
"max": 8,
"step": 1,
"label": {
"en": "Rows per page",
"de": "Zeilen pro Seite",
"es": "Filas por página",
"fr": "Nombre de lignes par page",
"pt-PT": "Linhas por página"
},
"default": 6
},
{
"type": "checkbox",
"id": "collection_image_enable",
"label": {
"en": "Show collection image",
"de": "Kollektionsbild anzeigen",
"es": "Mostar la imagen de la colección",
"fr": "Afficher l'image de la collection",
"pt-PT": "Mostrar imagem da coleção"
},
"default": true
},
{
"type": "checkbox",
"id": "sort_enable",
"label": {
"en": "Enable sorting",
"de": "Sortieren aktivieren",
"es": "Habilitar ordenado",
"fr": "Activer le tri",
"pt-PT": "Ativar seleção"
},
"default": true
},
{
"type": "checkbox",
"id": "tags_enable",
"label": {
"en": "Enable tag filtering",
"de": "Tag-Filtern aktivieren",
"es": "Habilitar el filtrado por etiquetas",
"fr": "Activer le filtrage des balises",
"pt-PT": "Ativar filtro de etiquetas"
},
"default": true
},
{
"type": "header",
"content": {
"en": "Pagination"
}
},
{
"type": "select",
"id": "pagination_type",
"label": {
"en": "Pagination type",
"de": "Seitenzählungsart",
"es": "Tipo de paginación",
"fr": "Type de pagination",
"pt-PT": "Tipo de paginação"
},
"default": "load_more",
"options": [
{
"value": "paged_navigation",
"label": {
"en": "Paged navigation",
"de": "Seitennummerierte Navigation",
"es": "Navegación por páginas",
"fr": "Navigation paginée",
"pt-PT": "Navegação paginada"
}
},
{
"value": "infinite_scrolling",
"label": {
"en": "Infinite scrolling",
"de": "Unendliches Scrolling",
"es": "Desplazamiento continuo",
"fr": "Défilé infini",
"pt-PT": "Rolagem infinita"
}
},
{
"value": "load_more",
"label": {
"en": "Load more button",
"de": "Schaltfläche 'Mehr anzeigen'",
"es": "Cargar más botones",
"fr": "Bouton Charger plus",
"pt-PT": "Carregar mais botão"
}
}
]
},
{
"type": "header",
"content": {
"en": "Sidebar",
"de": "Seitenleiste",
"es": "Barra lateral",
"fr": "Barre latérale",
"pt-PT": "Barra lateral"
}
},
{
"type": "checkbox",
"id": "enable_collection_sidebar",
"label": {
"en": "Enable sidebar content",
"de": "Inhalte der Seitenleiste aktivieren",
"es": "Activar el contenido de la barra lateral",
"fr": "Activer le contenu de la barre latérale",
"pt-PT": "Permitir conteúdo na barra lateral"
},
"default": false,
"info": {
"en": "Create a sidebar by adding content blocks below.",
"de": "Erstellen Sie eine Seitenleiste, indem Sie unten Inhaltsblocks hinzufügen.",
"es": "Cree una barra lateral añadiendo los bloques de contenido más abajo.",
"fr": "Créez une barre latérale en ajoutant des blocs de contenu ci-dessous.",
"pt-PT": "Crie uma barra lateral adicionando blocos de conteúdo abaixo."
}
}
],
"blocks": [
{
"type": "text",
"name": {
"en": "Text",
"de": "Text",
"es": "Texto",
"fr": "Texte",
"pt-PT": "Texto"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Überschrift",
"es": "Encabezado",
"fr": "Rubrique",
"pt-PT": "Título"
},
"default": {
"en": "Title",
"de": "Titel",
"es": "Título",
"fr": "Titre",
"pt-PT": "Título"
}
},
{
"type": "richtext",
"id": "richtext",
"label": {
"en": "Text",
"de": "Text",
"es": "Texto",
"fr": "Texte",
"pt-PT": "Texto"
},
"default": {
"en": "
Share details about promotions or important messages with your customers.
",
"de": "
Teilen Sie Einzelheiten über Werbeaktionen oder wichtige Nachrichten mit Ihren Kunden.
",
"es": "
Comparta detalles sobre promociones o mensajes importantes con sus clientes.
",
"fr": "
Partagez les détails des promotions ou des messages importants avec vos clients.
",
"pt-PT": "
Partilhe detalhes sobre promoções ou mensagens importantes com os seus clientes.
"
}
}
]
},
{
"type": "vendors",
"name": {
"en": "Vendors",
"de": "Verkäufer",
"es": "Vendedores",
"fr": "Vendeurs",
"pt-PT": "Vendedores"
},
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Überschrift",
"es": "Encabezado",
"fr": "Rubrique",
"pt-PT": "Título"
},
"default": {
"en": "Vendors",
"de": "Verkäufer",
"es": "Vendedores",
"fr": "Vendeurs",
"pt-PT": "Vendedores"
}
}
]
},
{
"type": "menu",
"name": {
"en": "Menu",
"de": "Menü",
"es": "Menú",
"fr": "Menu",
"pt-PT": "Menu"
},
"settings": [
{
"type": "text",
"id": "menu_title",
"label": {
"en": "Heading",
"de": "Überschrift",
"es": "Encabezado",
"fr": "Rubrique",
"pt-PT": "Título"
},
"default": {
"en": "Links",
"de": "Links",
"es": "Enlaces",
"fr": "Liens",
"pt-PT": "Ligações"
}
},
{
"type": "link_list",
"id": "collection_linklist",
"label": {
"en": "Menu",
"de": "Menü",
"es": "Menú",
"fr": "Menu",
"pt-PT": "Menu"
},
"default": "main-menu"
}
]
},
{
"type": "image",
"name": {
"en": "Image",
"de": "Bild",
"es": "Imagen",
"fr": "Image",
"pt-PT": "Imagem"
},
"settings": [
{
"type": "image_picker",
"id": "collection-sidebar-image",
"label": {
"en": "Image",
"de": "Bild",
"es": "Imagen",
"fr": "Image",
"pt-PT": "Imagem"
},
"info": {
"en": "300 x 150px recommended",
"de": "300 x 150 px empfohlen",
"es": "Recomendado 300 x 150 px",
"fr": "300 x 150 px recommandé",
"pt-PT": "300 x 150px, recomendado"
}
},
{
"type": "url",
"id": "collection-sidebar-link",
"label": {
"en": "Link",
"de": "Link",
"es": "Enlace",
"fr": "Lien",
"pt-PT": "Ligação"
},
"info": {
"en": "Optional",
"de": "Optional",
"es": "Opcional",
"fr": "Facultatif",
"pt-PT": "Opcional"
}
}
]
}
]
}
{% endschema %}
Basically, I want the “collections.title” to show up as a text overlay on top of the “collections.image”. Can anyone point me in the right direction? Thank you in advance!
