Shopify themes, liquid, logos, and UX
I want to add a the according Collection Heading which is standing in the broadcrumps above each Collection.
There should be standing the Collection Title in this case "Hoodies Herren"
The Changes i want to do in my updated Vantage Shopify Theme:
https://p98nefyrf7lydlxm-60835692762.shopifypreview.com
Atm Soulsideshop.com (there the headings work above the collections)
Did you check if you can add collection banner or rich text on that side.
Like this.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hello @adminsoulside
It is possible to add collection name in the top of the collection. To do this you need to add a liquid code into collection liquid. If you want I can do it for you. Feel free to contact me.
Yes please here is my Collection Liquid, if that helps 🙂
{% comment %}
sections/main-collection.liquid
{% endcomment %}
{%- liquid
assign products_per_page = section.settings.products_per_page
assign products_per_row = section.settings.products_per_row
assign show_sidebar = false
assign show_topbar = false
assign show_accordion_links = false
assign show_subcollections = false
assign sc_menu = section.settings.menu
if section.settings.show_layout_buttons or section.blocks.size > 0
assign show_topbar = true
endif
if section.settings.show_subcollections
assign show_subcollections = true
endif
assign current_collection = collection.url
if section.blocks.size > 0
for block in section.blocks
case block.type
when 'menu' or 'sidebar_filter' or 'image' or 'sort_by'
assign show_sidebar = true
when 'menu' or 'sidebar_filter' or 'sort_by'
assign show_accordion_links = true
endcase
endfor
endif
assign filter_count = 0
for filter in collection.filters
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign filter_count = 1
endif
endif
assign filter_count = filter_count | plus: filter.active_values.size
endfor
if section.settings.show_image and collection.image != blank
assign collection_image = true
assign desc_width = 'span-9'
else
assign collection_image = false
assign desc_width = 'span-12'
endif
case products_per_row
when 2
assign grid = 'span-6'
when 3
assign grid = 'span-4'
when 4
assign grid = 'span-3'
endcase
-%}
{% capture collection_description %}
<div class="rte {{ desc_width }} sm-span-12 auto">
{{ collection.description | remove: "[banner]" }}
</div><!-- /.rte -->
{% endcapture %}
<section class="row" data-section-loaded="false" data-section-id="{{ section.id }}" data-section-type="collection-section">
<div class="collection-template main__section">
{% paginate collection.products by products_per_page %}
<div id="CollectionProductGrid">
{% unless section.settings.description_bottom %}
{% if collection.description != blank %}
<div class="grid__wrapper">
<div class="collection-description span-12 auto{% if settings.animation != 'none' %} animate {{ settings.animation }}{% endif %}">
{{ collection_description }}
</div>
</div>
{% endif %}
{% endunless %}
{% if show_subcollections %}
{% liquid
if section.index == 1
assign loading = 'eager'
assign fetch_priority = 'high'
endif
%}
{%
render 'subcollections',
collection: collection,
sc_menu: sc_menu,
loading: loading,
fetchpriority: fetch_priority
%}
{% endif %}
{% if show_topbar %}
{%
render 'collection-topbar',
section: section,
collection: collection,
filter_count: filter_count,
show_accordion_links: show_accordion_links
%}
{% endif %}
{% if show_sidebar %}
<aside class="slideout slideout__drawer-right"
data-wau-slideout="collection-sidebar"
data-wau-accordions-closed
id="slideout-collection-sidebar">
<div class="slideout__trigger--close">
<button class="slideout__trigger-collection-sidebar js-slideout-close button-as-link"
data-slideout-direction="right" aria-label="Close sidebar" tabindex="0" type="button" name="button">
<div class="icn-close"></div>
</button>
</div>
{%
render 'collection-sidebar'
collection: collection
%}
</aside>
{% endif %}
<div class="clear"></div><!-- /.clear -->
{%- if collection.products.size >= 1 -%}
<div id="main-collection-product-grid"
class="product-loop grid__wrapper"
data-grid-type="grid"
data-id="{{ section.id }}">
{% for product in collection.products %}
{% if paginate.current_page == 1 %}
{% for block in section.blocks %}
{% if block.type == 'featured_image' %}
{% liquid
assign has_image = false
if block.settings.image
assign has_image = true
assign image = block.settings.image
endif
if collection.metafields.custom.image_position != blank
assign position = collection.metafields.custom.image_position | plus: 0
else
assign position = block.settings.position
endif
assign title = block.settings.title
assign text = block.settings.text
assign link = block.settings.link
assign button_text = block.settings.button_text
assign has_content = true
if has_image == false and title == '' and text == '' and button_text == ''
assign has_content = false
endif
assign overlay_color = block.settings.overlay_color | color_to_rgb | remove: 'rgb(' | remove: ')'
assign overlay_opacity = block.settings.overlay_opacity | plus: 0 | divided_by: 100.0
%}
{% if position == forloop.parentloop.index and has_content %}
<div data-position="{{ position }}" data-content="{{ has_content }}" class="collection--loop_ad block-{{ block.id }} product-index {{ grid }} md-span-4 sm-span-6 auto {% if settings.animation != 'none' %} animate {{ settings.animation }} delay--{{ forloop.index }}{% endif %}" {{ block.shopify_attributes }} style="--overlay-color: {{ overlay_color }}; --overlay-opacity: {{ overlay_opacity }}">
{% if has_image %}
<div class="collection--loop_ad-image">
{{ image | image_url: height: 800 | image_tag: loading: 'lazy' }}
</div>
{% endif %}
<div class="collection--loop_ad-content {{ block.settings.text_position }}">
{% if title != blank %}
<p class="h3">{{ title | escape }}</h3>
{% endif %}
{% if text != blank %}
{{ text }}
{% endif %}
{% if link and button_text != blank %}
<a class="button collection--loop_ad-button" href="{{ link }}">
{{ button_text | escape }}
</a>
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
<div class="product-index {{ grid }} md-span-4 sm-span-6 auto {% if settings.animation != 'none' %} animate {{ settings.animation }} delay--{{ forloop.index }}{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}" data-product-id="{{ product.id }}">
{% liquid
assign loading = 'lazy'
assign fetch_priority = 'auto'
if section.index == 1 and show_subcollections == false and forloop.index <= section.settings.products_per_row
assign loading = 'eager'
assign fetch_priority = 'high'
endif
%}
{% render 'product-listing',
product: product,
grid: section.settings.products_per_row, loading: loading, fetchpriority: fetch_priority %}
</div>
{% endfor %}
<div class="span-12 auto">
{% render 'pagination', paginate: paginate %}
</div>
</div><!-- /#main-collection-product-grid -->
{%- else -%}
<div id="main-collection-product-grid"
class="collection collection--empty grid__wrapper"
data-id="{{ section.id }}">
<span class="rte span-8 push-2 auto">{{ 'collections.filters.use_fewer_filters_html' | t: link: collection.url, class: "underline" }}</span>
</div><!-- /#main-collection-product-grid -->
{%- endif -%}
{% if section.settings.description_bottom %}
<div class="lower-collection-description grid__wrapper {% if settings.animation != 'none' %} animate {{ settings.animation }}{% endif %}">
<div class="span-12 auto">
{{ collection_description }}
</div>
</div>
{% endif %}
</div><!-- /#CollectionProductGrid -->
<div class="clear"></div>
{% endpaginate %}
</div><!-- /.collection-template -->
</section><!-- /.row -->
{% for block in section.blocks %}
{% if block.type == 'featured_image' %}
{% style %}
.collection--loop_ad.block-{{ block.id }} h3,
.collection--loop_ad.block-{{ block.id }} p {
color: {{ block.settings.text_color }};
}
.collection--loop_ad.block-{{ block.id }} {
background: {{ block.settings.background }};
}
.collection--loop_ad.block-{{ block.id }}:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content:"";
background: rgba(var(--overlay-color), var(--overlay-opacity));
pointer-events: none;
z-index: 1;
}
{% endstyle %}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Collection",
"max_blocks": 10,
"settings":
[
{
"type": "range",
"id": "products_per_page",
"min": 2,
"max": 48,
"step": 1,
"label": "Products per page",
"default": 24
},
{
"type": "range",
"id": "products_per_row",
"min": 2,
"max": 4,
"step": 1,
"label": "Products per row",
"default": 4
},
{
"type": "checkbox",
"id": "description_bottom",
"label": "position description below products",
"default": false
},
{
"type": "checkbox",
"id": "show_layout_buttons",
"label": "Show grid/list layout options",
"default": true
},
{
"type": "checkbox",
"id": "show_subcollections",
"label": "Show subcollections",
"default": true
},
{
"type": "link_list",
"id": "menu",
"label": "Choose a menu",
"default": "main-menu",
"info": "Select the menu you use for your stores header navigation"
}
],
"blocks":
[
{
"type": "menu",
"name": "Sidebar slideout menu",
"settings":
[
{
"type": "link_list",
"id": "side_nav",
"label": "Menu",
"info": "This menu has limited support for dropdown items"
},
{
"type": "text",
"id": "header",
"label": "Header",
"default": "Explore"
}
]
},
{
"type": "sidebar_filter",
"name": "Sidebar slideout filter",
"limit": 1,
"settings": [{
"type": "paragraph",
"content": "Learn how to add storefront filters [here](https:\/\/help.shopify.com\/en\/manual\/online-store\/themes\/os20\/customize\/filters)"
},
{
"type": "checkbox",
"id": "show_filter_swatches",
"label": "Show filter color swatches",
"default": true
}]
},
{
"type": "sort_by",
"name": "Sidebar slideout sort by",
"limit": 1,
"settings":[]
},
{
"type": "image",
"name": "Sidebar slideout image",
"settings":
[
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
},
{
"type": "featured_image",
"name": "Featured image",
"limit": 3,
"settings":
[
{
"type": "paragraph",
"content":"Insert a featured image at a selected position within your product grid. Position must be within the number of items on the first page of a collection."
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "position",
"min": 1,
"max": 50,
"step": 1,
"label": "Position",
"default": 4,
"info": "For a unique position in specific collections create a collection metafield named: image_position, with type: integer, min: 1, max: 50 and enter a value in each collection admin page"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default":"Featured content"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default":"<p>Promote products or collections</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default":"Button"
},
{
"type": "url",
"id": "link",
"label": "Link",
"default":"/"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"default": "jc-center",
"options":
[
{
"value": "jc-start",
"label": "Top"
},
{
"value": "jc-center",
"label": "Center"
},
{
"value": "jc-end",
"label": "Bottom"
}
]
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default":"#ffffff"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default":"#454545"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Overlay opacity",
"default": 0
}
]
}
]
}
{% endschema %}
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024