How can I move the collection header in Prestige theme?

SDBdigital · August 13, 2021, 9:04am

Hi

I’m using Prestige theme (with show collection image enabled) - currently the page title and copy appear as on overlay on the image.

I would like to move the page title/header to below the parallax image.

https://zerobs.co.za/collections/product-range

Any suggestions?

dmwwebartisan · August 13, 2021, 9:10am

@SDBdigital

Please share your collection file code .

Thanks!

SDBdigital · August 13, 2021, 9:15am

{%- if section.settings.show_layout_switch -%}
{%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}

{%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}
{%- endif -%}
{%- else -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- endif -%}

{%- if desktop_items_per_row == 4 -%}
{%- assign tablet_items_per_row = 3 -%}
{%- else -%}
{%- assign tablet_items_per_row = 2 -%}
{%- endif -%}

{%- capture collection_inner -%}
{%- comment -%}This is the common part to both template{%- endcomment -%}

{%- if collection.products_count > 0 -%}
{%- paginate collection.products by section.settings.grid_items_per_page -%}

{%- for product in collection.products -%}

{%- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}

{%- endfor -%}

{%- render ‘pagination’, paginate: paginate -%}
{%- endpaginate -%}
{%- else -%}

{%- endif -%} {%- endcapture -%}

{%- if template == ‘collection.ajax’ -%}
{%- comment -%}

CONTENT FOR AJAX ALTERNATE TEMPLATE

{%- endcomment -%}

{%- else -%}
{%- comment -%}

CONTENT FOR NORMAL TEMPLATE

{%- endcomment -%}

{%- assign active_tags = ‘’ -%}

{%- for tag in current_tags -%}
{%- assign tag_as_handle = tag | replace: ‘’', ‘’ | replace: ‘"’, ‘’ | handle -%}
{%- assign active_tags = active_tags | append: tag_as_handle -%}

{%- unless forloop.last -%}
{%- assign active_tags = active_tags | append: ‘+’ -%}
{%- endunless -%}
{%- endfor -%}

{%- capture section_settings -%}
{
“collectionUrl”: {{ collection.url | default: ‘/collections/all’ | json }},
“currentTags”: {% if active_tags != blank %}{{ active_tags | split: ‘+’ | json }}{% else %}{% endif %},
“sortBy”: {{ collection.sort_by | default: collection.default_sort_by | json }},
“filterPosition”: {{ section.settings.filter_position | json }}
}
{%- endcapture -%}

{%- comment -%} -------------------------------------------------------------------------------------------------------------------- COLLECTION INFO -------------------------------------------------------------------------------------------------------------------- {%- endcomment -%}

{%- if collection.all_products_count > 0 -%}
{%- if section.settings.show_collection_image and collection.image and collection.template_suffix != ‘no-image’ -%}

{%- if section.settings.show_collection_info -%}

{%- if collection.description != blank -%}

{%- endif -%}

{%- elsif section.settings.show_collection_info -%}

{%- if collection.description != blank -%}

{%- endif -%}

{%- endif -%} {%- endif -%}

{%- comment -%}

COLLECTION TOOLBAR

{%- endcomment -%}

{%- if collection.all_products_count > 0 -%}
{%- comment -%}
In order to provide more predictable results (for instance not showing filters by tag even if the option is checked in settings,
but that there are no tags for the given collection to show), we are doing some more logic here. Basically, we try to check if there
are tags to show by stripping internal tags (those that start by “__”)
{%- endcomment -%}

{%- assign has_visible_tags = false -%}

{%- case section.settings.filter_mode -%}
{%- when ‘tag’ -%}
{%- for tag in collection.all_tags -%}
{%- unless tag contains ‘__’ -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}

{%- when ‘group’ -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: ‘_’ -%}

{%- unless tag_parts.first == ‘’ -%}
{%- if tag_parts.size >= 2 -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endcase -%}

{%- assign show_filters = false -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}

{%- if quick_links != blank or has_visible_tags -%}
{%- assign show_filters = true -%}
{%- endif -%}

{%- capture collection_toolbar -%}
{%- if show_filters or section.settings.show_sort_by or section.settings.show_layout_switch -%}

{%- if show_filters or section.settings.show_sort_by -%}

{%- if show_filters -%} {{ 'collection.filter.title' | t }} {% if current_tags %}({{ current_tags.size }}){% endif %} {%- endif -%}

{%- if section.settings.show_sort_by -%}

{{ ‘collection.sorting.title’ | t }} {% render ‘icon’ with ‘select-arrow’ %}

{%- endif -%}

{%- endif -%}

{%- if section.settings.show_layout_switch -%}

{% render 'icon' with 'wall-1' %} {% render 'icon' with 'wall-2' %}

{% render 'icon' with 'wall-2' %} {% render 'icon' with 'wall-4' %}

{%- endif -%}

{%- endif -%} {%- endcapture -%}

{%- comment -%}

FILTERS AND SORT BY POPOVER

{%- endcomment -%}

{%- if show_filters -%}
{%- comment -%}
Implementation note: the filters can be displayed in two different ways: in a sidebar menu, always visible, or in a drawer. Due to that, we are
setting the general code here, and then we will output it twice.
{%- endcomment -%}

{%- assign quick_links = linklists[section.settings.filter_menu] -%}

{%- capture filters_content -%}
{%- if quick_links != empty -%}

{{ link.title | escape }}

{%- endif -%}

{%- if has_visible_tags -%}
{%- if section.settings.filter_mode == ‘tag’ -%}

{{- tag -}}

{%- else -%} {%- assign groups = '' -%}

{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: ‘_’ -%}

{%- if tag_parts.size < 2 or tag contains ‘__’ or tag_parts.first == ‘’ -%}
{%- continue -%}
{%- endif -%}

{%- assign groups = groups | append: tag_parts.first | append: ‘,’ -%}
{% endfor %}

{%- assign color_label = ‘color,colour,couleur,colore,farbe,색,色,färg,farve’ | split: ‘,’ -%}
{%- assign groups = groups | split: ‘,’ | compact | uniq -%}

{%- for group in groups -%}
{%- assign group_downcase = group | downcase -%}

{%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
{%- assign show_color_swatch = true -%}
{%- else -%}
{%- assign show_color_swatch = false -%}
{%- endif -%}

{%- if tag_parts.size < 2 or tag_parts.first != group or tag contains ‘__’ or tag_parts.first == ‘’ -%}
{%- continue -%}
{%- endif -%}

{%- if show_color_swatch -%}

{%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%} {%- assign color_swatch_image = images[color_swatch_name] -%} {{ tag_parts.last }}
{{- tag_parts.last -}}

{%- endfor -%} {%- endif -%} {%- endif -%} {%- endcapture -%}

{{ 'collection.filter.all' | t }} {%- render 'icon' with 'close' -%}

{%- endif -%}

{%- if section.settings.show_sort_by -%}

{% render 'icon' with 'close' %} {{ 'collection.sorting.title' | t }}

{% assign collection_sort_by = collection.sort_by | default: collection.default_sort_by %}

{%- for option in collection.sort_options -%}

{{ option.name }}

{%- endfor -%}

{%- endif -%}

{%- comment -%}

COLLECTION PRODUCTS

{%- endcomment -%}

{%- if section.settings.toolbar_position == 'top' -%} {{- collection_toolbar -}} {%- endif -%}

{%- if show_filters and section.settings.filter_position == 'sidebar' -%}

<button type=“button” class=“Button Button–secondary” data-action=“reset-tags” {% if current_tags == blank %}style=“display: none”{% endif %}>{{ ‘collection.filter.reset’ | t }}

{%- endif -%}

{%- if section.settings.toolbar_position == ‘bottom’ -%}
{{- collection_toolbar -}}
{%- endif -%}

{%- else -%}

{{ 'collection.general.empty' | t: collection_title: collection.title }}

{%- endif -%} {%- endif -%}

{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}

{% schema %}
{
“name”: “Collection page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_collection_info”,
“label”: “Show collection info”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“label”: “Show collection image”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “apply_overlay”,
“label”: “Apply overlay on image”,
“info”: “This can improve text visibility.”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“info”: “Some colors appear white? Learn more.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “select”,
“id”: “collection_image_size”,
“label”: “Collection image size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “normal”
},
{
“type”: “header”,
“content”: “Toolbar”
},
{
“type”: “checkbox”,
“id”: “show_sort_by”,
“label”: “Show sort by”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_layout_switch”,
“label”: “Show layout switch”
},
{
“type”: “select”,
“id”: “toolbar_position”,
“label”: “Position”,
“options”: [
{
“value”: “top”,
“label”: “Top”
},
{
“value”: “bottom”,
“label”: “Bottom”
}
],
“default”: “top”
},
{
“type”: “header”,
“content”: “Filters”
},
{
“type”: “select”,
“id”: “filter_position”,
“label”: “Desktop position”,
“options”: [
{
“value”: “sidebar”,
“label”: “Sidebar”
},
{
“value”: “drawer”,
“label”: “Drawer”
}
],
“default”: “sidebar”
},
{
“type”: “select”,
“id”: “filter_mode”,
“label”: “Mode”,
“info”: “Filters by group requires specific tag formatting. Learn more”,
“options”: [
{
“value”: “hidden”,
“label”: “Hidden”
},
{
“value”: “tag”,
“label”: “By tag”
},
{
“value”: “group”,
“label”: “By group”
}
],
“default”: “tag”
},
{
“type”: “checkbox”,
“id”: “show_filter_color_swatch”,
“label”: “Show filter color swatch”,
“info”: “This is only used if filters by group is enabled.”,
“default”: true
},
{
“type”: “link_list”,
“id”: “filter_menu”,
“label”: “Quick links”,
“info”: “This menu won’t show dropdown items.”
},
{
“type”: “header”,
“content”: “Grid”
},
{
“type”: “range”,
“id”: “grid_items_per_page”,
“label”: “Products per page”,
“min”: 4,
“max”: 48,
“step”: 4,
“default”: 16
},
{
“type”: “select”,
“id”: “grid_mobile_items_per_row”,
“label”: “Products per row (mobile)”,
“options”: [
{
“value”: “1”,
“label”: “1”
},
{
“value”: “2”,
“label”: “2”
}
],
“default”: “2”
},
{
“type”: “range”,
“min”: 2,
“max”: 4,
“id”: “grid_desktop_items_per_row”,
“label”: “Products per row (desktop)”,
“default”: 4
}
]
}
{% endschema %}

SDBdigital · August 17, 2021, 8:43am

Hi

I’ve provided the collection file code.

dmwwebartisan · August 18, 2021, 1:30pm

@SDBdigital

Please backup your old code and try this code

{%- if section.settings.show_layout_switch -%}
{%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}

{%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}
{%- endif -%}
{%- else -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- endif -%}

{%- if desktop_items_per_row == 4 -%}
{%- assign tablet_items_per_row = 3 -%}
{%- else -%}
{%- assign tablet_items_per_row = 2 -%}
{%- endif -%}

{%- capture collection_inner -%}
{%- comment -%}This is the common part to both template{%- endcomment -%}

{%- if collection.products_count > 0 -%}
{%- paginate collection.products by section.settings.grid_items_per_page -%}

{%- for product in collection.products -%}

{%- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}

{%- endfor -%}

{%- render 'pagination', paginate: paginate -%}
{%- endpaginate -%}
{%- else -%}

# {{ 'collection.general.no_products' | t }}

{%- endif -%}
{%- endcapture -%}

{%- if template == 'collection.ajax' -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
CONTENT FOR AJAX ALTERNATE TEMPLATE
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{{- collection_inner -}}

{%- else -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
CONTENT FOR NORMAL TEMPLATE
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign active_tags = '' -%}

{%- for tag in current_tags -%}
{%- assign tag_as_handle = tag | replace: ''', '' | replace: '"', '' | handle -%}
{%- assign active_tags = active_tags | append: tag_as_handle -%}

{%- unless forloop.last -%}
{%- assign active_tags = active_tags | append: '+' -%}
{%- endunless -%}
{%- endfor -%}

{%- capture section_settings -%}
{
"collectionUrl": {{ collection.url | default: '/collections/all' | json }},
"currentTags": {% if active_tags != blank %}{{ active_tags | split: '+' | json }}{% else %}[]{% endif %},
"sortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
"filterPosition": {{ section.settings.filter_position | json }}
}
{%- endcapture -%}

{%- endif -%}

{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}

{% schema %}
{
"name": "Collection page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_collection_info",
"label": "Show collection info",
"default": true
},
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": false
},
{
"type": "checkbox",
"id": "apply_overlay",
"label": "Apply overlay on image",
"info": "This can improve text visibility.",
"default": true
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch).",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "select",
"id": "collection_image_size",
"label": "Collection image size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "normal"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "checkbox",
"id": "show_sort_by",
"label": "Show sort by",
"default": true
},
{
"type": "checkbox",
"id": "show_layout_switch",
"label": "Show layout switch"
},
{
"type": "select",
"id": "toolbar_position",
"label": "Position",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "top"
},
{
"type": "header",
"content": "Filters"
},
{
"type": "select",
"id": "filter_position",
"label": "Desktop position",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "sidebar"
},
{
"type": "select",
"id": "filter_mode",
"label": "Mode",
"info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
"options": [
{
"value": "hidden",
"label": "Hidden"
},
{
"value": "tag",
"label": "By tag"
},
{
"value": "group",
"label": "By group"
}
],
"default": "tag"
},
{
"type": "checkbox",
"id": "show_filter_color_swatch",
"label": "Show filter color swatch",
"info": "This is only used if filters by group is enabled.",
"default": true
},
{
"type": "link_list",
"id": "filter_menu",
"label": "Quick links",
"info": "This menu won't show dropdown items."
},
{
"type": "header",
"content": "Grid"
},
{
"type": "range",
"id": "grid_items_per_page",
"label": "Products per page",
"min": 4,
"max": 48,
"step": 4,
"default": 16
},
{
"type": "select",
"id": "grid_mobile_items_per_row",
"label": "Products per row (mobile)",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
},
{
"type": "range",
"min": 2,
"max": 4,
"id": "grid_desktop_items_per_row",
"label": "Products per row (desktop)",
"default": 4
}
]
}
{% endschema %}

SDBdigital · August 19, 2021, 7:50am

Hi

I tried your code. It didn’t work. Thanks for trying.

Topic		Replies	Views
Move descriptions above my collection page Technical Q&A	18	204	May 5, 2022
Adding Banner Image To Product Grid In Collection Template Store Design shopify-theme	30	491	December 14, 2025
Put description at the bottom of page collection description in warehouse theme Store Design	0	28	July 25, 2022
Help needed to center the 'out of stock' badge on Prestige theme Store Design	11	81	February 18, 2022
Collection page on mobile ( Palo Alto Theme) Shopify Discussion	4	105	September 4, 2020

How can I move the collection header in Prestige theme?

{{ 'collection.general.no_products' | t }}

{%- if template == ‘collection.ajax’ -%}
{%- comment -%}

CONTENT FOR AJAX ALTERNATE TEMPLATE

{%- else -%}
{%- comment -%}

CONTENT FOR NORMAL TEMPLATE

{{ collection.title }}

{{ collection.title }}

{%- comment -%}

COLLECTION TOOLBAR

{%- comment -%}

FILTERS AND SORT BY POPOVER

{%- comment -%}

COLLECTION PRODUCTS

{{ 'collection.general.empty' | t: collection_title: collection.title }}

How can I move the collection header in Prestige theme?

{{ 'collection.general.no_products' | t }}

{%- if template == ‘collection.ajax’ -%} {%- comment -%}

CONTENT FOR AJAX ALTERNATE TEMPLATE

{%- else -%} {%- comment -%}

CONTENT FOR NORMAL TEMPLATE

{{ collection.title }}

{{ collection.title }}

{%- comment -%}

COLLECTION TOOLBAR

{%- comment -%}

FILTERS AND SORT BY POPOVER

{%- comment -%}

COLLECTION PRODUCTS

{{ 'collection.general.empty' | t: collection_title: collection.title }}

Related topics

{%- if template == ‘collection.ajax’ -%}
{%- comment -%}

{%- else -%}
{%- comment -%}