Shopify themes, liquid, logos, and UX
Hi, i've been reading a lot of posts about this subject but cant seem to find the answer for my theme. I'm using the Blockshop theme.
I would like to split my collection title and collection description and move the collection description to the bottom of the page whilst keeping the collection title up. There will be lots of text and it would be too time consuming for the customer to scroll all the way to the products every page. my url is: Lillyrose | Trendy & shiny jewelry | Shop online
Any help would be very much appreciated!
Solved! Go to the solution
This is an accepted solution.
Hi @Lillyrosenl,
You can follow these steps:
- Step 1: Go to Customize > Collection > Collection header > Show collection description. You need to disable it to not show description at title.
- Step 2: Go to collection--body.liquid file and paste this at the bottom of the file:
{% if collection.description != blank %}
<div data-section-id="" style="padding-top: 0;">
<p data-item="paragraph">
{{ collection.description }}
</p>
</div>
{% endif %}
Hope it is clear to you.
oh sorry for that can you please send collection page code so i will update
Thank you so much!
I have a collection.json in templates, and collection--body.liquid, collection--header.liquid
and collection--navigation.liquid in sections. So i guess it's collection-header.liquid? I'm pasting the code here:
{%- liquid
assign alt_color = section.settings.alt-color
assign apply_overlay = section.settings.apply-overlay
assign enable = section.settings.enable-header
assign image_height = section.settings.image-height
assign show_description = section.settings.show-description
assign show_image = section.settings.show-image
assign show_title = section.settings.show-title
assign title_alignment = section.settings.title-alignment
assign use_image_fallback = section.settings.use-image-fallback
-%}
{% if enable %}
{% capture header_image %}
<div class="collection--header--image">
{% if collection.image %}
{%
render "image",
image: collection.image,
darken: apply_overlay,
darken_mobile: apply_overlay,
full_width: true
%}
{% elsif collection.products.first.featured_media.preview_image and use_image_fallback %}
{%
render "image",
image: collection.products.first.featured_media.preview_image,
darken: apply_overlay,
darken_mobile: apply_overlay,
full_width: true
%}
{% else %}
{% assign show_image = false %}
{% endif %}
</div>
{% endcapture %}
<div
class="collection--header--root"
data-section-id="{{ section.id }}"
data-alternative-color="{{ alt_color }}"
data-apply-overlay="{{ apply_overlay }}"
data-image-height="{{ image_height }}"
data-show-image="{{ show_image }}"
data-spacing="none"
data-title-alignment="{{ title_alignment }}"
>
{% if show_image %}
{{ header_image }}
{% endif %}
{% if show_title or show_description %}
<div class="collection--header--heading">
{% if show_title and collection.title != blank %}
<h1 data-item="featured-heading">
{{ collection.title }}
</h1>
{% endif %}
{% if show_description and collection.description != blank %}
<p data-item="paragraph">
{{ collection.description }}
</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% schema %}
{
"name": "Collection header",
"settings": [
{
"id": "enable-header",
"label": "Enable",
"type": "checkbox",
"default": true
},
{
"id": "show-title",
"label": "Show collection title",
"type": "checkbox",
"default": true
},
{
"label": "Position title",
"id": "title-alignment",
"type": "radio",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" }
],
"default": "center"
},
{
"id": "show-description",
"label": "Show collection description",
"type": "checkbox",
"default": true
},
{
"id": "show-image",
"label": "Show collection image",
"type": "checkbox",
"default": true
},
{
"id": "use-image-fallback",
"label": "Use a product image if no collection image found",
"type": "checkbox",
"default": true
},
{
"id": "image-height",
"label": "Height",
"type": "select",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" },
{ "value": "original", "label": "Natural (no cropping)" }
],
"default": "medium"
},
{
"id": "alt-color",
"label": "Use light text color",
"type": "checkbox",
"default": true
},
{
"id": "apply-overlay",
"label": "Darken image",
"type": "checkbox",
"default": true,
"info": "Can enhance text visibility"
}
]
}
{% endschema %}
yes please remove this code that file
{% if show_description and collection.description != blank %}
<p data-item="paragraph">
{{ collection.description }}
</p>
{% endif %}
after your have collection bottom of the file
This is an accepted solution.
Hi @Lillyrosenl,
You can follow these steps:
- Step 1: Go to Customize > Collection > Collection header > Show collection description. You need to disable it to not show description at title.
- Step 2: Go to collection--body.liquid file and paste this at the bottom of the file:
{% if collection.description != blank %}
<div data-section-id="" style="padding-top: 0;">
<p data-item="paragraph">
{{ collection.description }}
</p>
</div>
{% endif %}
Hope it is clear to you.
It worked! Thank you so much 🙂
Hello, do you know how I can do it in the warehouse theme? I can't find it anywhere...
Hi @RVDP1999,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
yes, please share store url and code
Hello, do you know how I can do it in the warehouse theme? I can't find it anywhere... URL: www.10watches.nl
can you please send collection code
TOP PART (COLLECTION INFO + TOOLBAR)
--------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if collection.all_products_count == 0 -%}
<div class="empty-state">
<p class="empty-state__heading heading h1">{{ collection.title }}</p>
<p class="empty-state__description">{{ 'collection.general.empty' | t }}</p>
<div class="empty-state__button-container">
<a href="{{ routes.root_url }}" class="empty-state__button button button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- else -%}
<div class="collection__dynamic-part card {% if collection.products_count == 0 %}clearfix{% endif %}">
<header class="card__header {% unless collection.template_suffix == 'brand' %}card__header--tight{% endunless %}">
{%- comment -%}
IMPLEMENTATION NOTE: unfortunately I was forced to add a lot of extra div (collection__meta, collection__meta-inner, collection__header-inner,...)
to be able to accommodate with the brand related layout which make things more complicated...
{%- endcomment -%}
<div class="collection__header {% if collection.template_suffix == 'brand' %}collection__header--brand{% endif %}">
{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
<div class="collection__brand-logo-wrapper hidden-pocket">
<div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
</div>
{%- endif -%}
<div class="collection__header-inner">
<div class="collection__meta">
{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
<div class="collection__brand-logo-wrapper hidden-lap-and-up">
<div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
</div>
{%- endif -%}
<div class="collection__meta-inner">
<h1 class="collection__title heading h1">
{%- if collection.handle == 'all' -%}
{{- 'collection.general.all_products' | t -}}
{%- else -%}
{{- collection.title -}}
{%- endif -%}
</h1>
{%- assign offset = paginate.current_offset | plus: 1 -%}
{%- assign page_size = paginate.current_offset | plus: paginate.page_size | at_most: paginate.items -%}
<p class="collection__products-count text--small hidden-lap-and-up">{{ 'collection.general.products_count' | t: count: collection.all_products_count }}</p>
<p class="collection__products-count text--small hidden-pocket hidden-desk">{{ 'collection.general.showing_count' | t: offset: offset, page_size: page_size, count: paginate.items }}</p>
</div>
</div>
{%- if collection.description != blank -%}
{%- assign allow_collapse_description = false -%}
{%- if section.settings.collapse_collection_description -%}
{%- assign allow_collapse_description = true -%}
{%- endif -%}
<div class="collection__description {% if allow_collapse_description %}expandable-content{% endif %}" aria-expanded="false">
<div class="rte">
{{ collection.description }}
</div>
{%- if allow_collapse_description -%}
<button class="expandable-content__toggle">
<span class="expandable-content__toggle-icon"></span>
<span class="expandable-content__toggle-text" data-view-more="{{ 'collection.general.view_more' | t | escape }}" data-view-less="{{ 'collection.general.view_less' | t | escape }}">{{- 'collection.general.view_more' | t -}}</span>
</button>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</header>
yes this current
also i need collection code also
What do you exactly mean? The theme is warehouse. Where can I find the collection code
Hi LitCommerce,
I am having the same issue as Lily...
Can you please tell me where I can find:
"Customize > Collection > Collection header > Show collection description"
Furthermore, how can I ensure the text is formatted nicely (centre align, etc) when it is at the bottom of the section?
Thank you 🙂
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