Re: Collection's description

Solved

Collection's description

damien68
Excursionist
25 0 6

Hi everyone, I have changed the theme of my website, and now I have a different code. Before with the Venture Theme, I have customised my collection page to have one part of my collection above the products and one another part under the product separated with thoses 3 dashes "---". Can someone could help me to put the code that I had on my previous Theme (Venture) and adapt it to the Craft theme ?

 

It looked like this in the code of the Venture theme : 

damien68_0-1716225509916.png

And this is the description of my collection with the 2 parts separated by the dash : 

damien68_1-1716225609233.png

And this is how it looked like before : 

damien68_2-1716225774313.png

 And this is how it looks now : 

damien68_3-1716225857704.png

 

The link to my website is : https://ma-tasse-en-bois.fr/

Let me know if you could help to adapt the code for the craft theme. It will be really helpful !

 

Best,

Damien

Accepted Solution (1)
EBOOST
Shopify Partner
1038 276 314

This is an accepted solution.

Hi,

You should replace "split: '<p>---</p>'" to split: '---'

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 12 (12)

EBOOST
Shopify Partner
1038 276 314

Hi @damien68 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. sections/main-collection-product-grid.liquid
3. Add code below to top of file

{%  if collection.description != blank %}
  <div class="collection-description">
  {{ collection.description | split: '---' | first }}
  </div>
{%  endif %}

EBOOST_0-1716864716335.png

3. Add code below to bottom of file and before schema tag( refer screenshot)

{%  if collection.description != blank %}
  <div class="collection-description">
  {{ collection.description | split: '---' | last }}
  </div>
{%  endif %}

EBOOST_1-1716864833867.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Hi @EBOOST , thqnk you for your reply.

 

I added the code in my theme, ans now I have 2 problematics:

 

I have 2 times the description, and idk why but the background color of the second description is in brown instead of white, are you able to change that ?

Thank you !

 

damien68_0-1716907750366.pngdamien68_1-1716907772497.png

 

EBOOST
Shopify Partner
1038 276 314

Hi @damien68,

1. You can go to customize to turn off old description.

2. Could you share link that you added code? and code of sections/main-collection-product-grid.liquid file?

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Hi @EBOOST where can I turn off the old description ? in the code directly ?

This is the code of the section :

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{% if collection.description != blank %}
<div class="collection-description">
{{ collection.description | split: '---' | first }}
</div>
{% endif %}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
{%- paginate collection.products by section.settings.products_per_page -%}
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
<facet-filters-form class="facets facets-vertical-sort page-width small-hide">
<form class="facets-vertical-form" id="FacetSortForm">
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in collection.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</div>

<div class="product-count-vertical light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if collection.results_count -%}
{{
'templates.search.results_with_count'
| t: terms: collection.terms, count: collection.results_count
}}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: collection.products_count, count: collection.all_products_count
}}
{%- endif -%}
</span>
</h2>
{%- render 'loading-spinner' -%}
</div>
</form>
</facet-filters-form>
{%- endif -%}

<div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
<aside
aria-labelledby="verticalTitle"
class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
id="main-collection-filters"
data-id="{{ section.id }}"
>
{% render 'facets',
results: collection,
enable_filtering: section.settings.enable_filtering,
enable_sorting: section.settings.enable_sorting,
filter_type: section.settings.filter_type,
paginate: paginate
%}
</aside>
{%- endif -%}

<div
class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
id="ProductGridContainer"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
<h2 class="title title--primary">
{{ 'sections.collection_template.empty' | t -}}
<br>
{{
'sections.collection_template.use_fewer_filters_html'
| t: link: collection.url, class: 'underlined-link link'
}}
</h2>
</div>
</div>
{%- else -%}
<div
class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
>
<div class="loading-overlay gradient"></div>
<ul
id="product-grid"
data-id="{{ section.id }}"
class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}
"
>
{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
quick_add: section.settings.quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>

{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endpaginate -%}
{% if section.settings.image_shape == 'arch' %}
{% render 'mask-arch' %}
{%- endif -%}
</div>
{% if collection.description != blank %}
<div class="collection-description">
{{ collection.description | split: '---' | last }}
</div>
{% endif %}
{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"class": "section",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 36,
"step": 4,
"default": 16,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 4,
"label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__3.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.label",
"info": "t:sections.all.image_shape.info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_rating.label",
"info": "t:sections.main-collection-product-grid.settings.show_rating.info"
},
{
"type": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"info": "t:sections.main-collection-product-grid.settings.quick_add.info",
"options": [
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
]
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
}
],
"default": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.label",
"info": "t:sections.main-collection-product-grid.settings.filter_type.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

 

EBOOST
Shopify Partner
1038 276 314

Hi,

May I suggest code below:

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{% if collection.description != blank %}
<div class="collection-description page-width">
    {{ collection.description | split: '<p>---</p>' | first }}
</div>
{% endif %}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- style -%}
.section-{{ section.id }}-padding {
	padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
	padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
	@media screen and (min-width: 750px) {
		.section-{{ section.id }}-padding {
			padding-top: {{ section.settings.padding_top }}px;
			padding-bottom: {{ section.settings.padding_bottom }}px;
		}
	}
{%- endstyle -%}
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
    {%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
    <facet-filters-form class="facets facets-vertical-sort page-width small-hide">
        <form class="facets-vertical-form" id="FacetSortForm">
            <div class="facet-filters sorting caption">
                <div class="facet-filters__field">
                    <h2 class="facet-filters__label caption-large text-body">
                        <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
                    </h2>
                    <div class="select">
                        {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                        <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                            {%- for option in collection.sort_options -%}
                            <option value="{{ option.value | escape }}" {% if option.value==sort_by %} selected="selected" {% endif %}>
                                {{ option.name | escape }}
                            </option>
                            {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                    </div>
                </div>
            </div>
            <div class="product-count-vertical light" role="status">
                <h2 class="product-count__text text-body">
                    <span id="ProductCountDesktop">
                        {%- if collection.results_count -%}
                        {{
                        'templates.search.results_with_count'
                        | t: terms: collection.terms, count: collection.results_count
                        }}
                        {%- elsif collection.products_count == collection.all_products_count -%}
                        {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                        {%- else -%}
                        {{
                        'products.facets.product_count'
                        | t: product_count: collection.products_count, count: collection.all_products_count
                        }}
                        {%- endif -%}
                    </span>
                </h2>
                {%- render 'loading-spinner' -%}
            </div>
        </form>
    </facet-filters-form>
    {%- endif -%}
    <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
        {{ 'component-facets.css' | asset_url | stylesheet_tag }}
        <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
        {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
            {% render 'facets',
            results: collection,
            enable_filtering: section.settings.enable_filtering,
            enable_sorting: section.settings.enable_sorting,
            filter_type: section.settings.filter_type,
            paginate: paginate
            %}
        </aside>
        {%- endif -%}
        <div class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" id="ProductGridContainer" {% if settings.animations_reveal_on_scroll %} data-cascade {% endif %}>
            {%- if collection.products.size == 0 -%}
            <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
                <div class="loading-overlay gradient"></div>
                <div class="title-wrapper center">
                    <h2 class="title title--primary">
                        {{ 'sections.collection_template.empty' | t -}}
                        <br>
                        {{
                        'sections.collection_template.use_fewer_filters_html'
                        | t: link: collection.url, class: 'underlined-link link'
                        }}
                    </h2>
                </div>
            </div>
            {%- else -%}
            <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
                <div class="loading-overlay gradient"></div>
                <ul id="product-grid" data-id="{{ section.id }}" class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}
">
                    {%- for product in collection.products -%}
                    {% assign lazy_load = false %}
                    {%- if forloop.index > 2 -%}
                    {%- assign lazy_load = true -%}
                    {%- endif -%}
                    <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %}>
                        {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        lazy_load: lazy_load,
                        quick_add: section.settings.quick_add,
                        section_id: section.id
                        %}
                    </li>
                    {%- endfor -%}
                </ul>
                {%- if paginate.pages > 1 -%}
                {% render 'pagination', paginate: paginate, anchor: '' %}
                {%- endif -%}
            </div>
            {%- endif -%}
        </div>
    </div>
    {%- endpaginate -%}
    {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
    {%- endif -%}
</div>
{% if collection.description != blank %}
	<div class="collection-description page-width">
	    {{ collection.description | split: '<p>---</p>' | last }}
	</div>
{% endif %}
{% schema %}
{
    "name": "t:sections.main-collection-product-grid.name",
    "class": "section",
    "settings": [
        {
            "type": "range",
            "id": "products_per_page",
            "min": 8,
            "max": 36,
            "step": 4,
            "default": 16,
            "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
        },
        {
            "type": "range",
            "id": "columns_desktop",
            "min": 1,
            "max": 6,
            "step": 1,
            "default": 4,
            "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
        },
        {
            "type": "color_scheme",
            "id": "color_scheme",
            "label": "t:sections.all.colors.label",
            "info": "t:sections.all.colors.has_cards_info",
            "default": "scheme-1"
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header__3.content"
        },
        {
            "type": "select",
            "id": "image_ratio",
            "options": [
                {
                    "value": "adapt",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
                },
                {
                    "value": "square",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
                }
            ],
            "default": "adapt",
            "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
        },
        {
            "type": "select",
            "id": "image_shape",
            "options": [
                {
                    "value": "default",
                    "label": "t:sections.all.image_shape.options__1.label"
                },
                {
                    "value": "arch",
                    "label": "t:sections.all.image_shape.options__2.label"
                },
                {
                    "value": "blob",
                    "label": "t:sections.all.image_shape.options__3.label"
                },
                {
                    "value": "chevronleft",
                    "label": "t:sections.all.image_shape.options__4.label"
                },
                {
                    "value": "chevronright",
                    "label": "t:sections.all.image_shape.options__5.label"
                },
                {
                    "value": "diamond",
                    "label": "t:sections.all.image_shape.options__6.label"
                },
                {
                    "value": "parallelogram",
                    "label": "t:sections.all.image_shape.options__7.label"
                },
                {
                    "value": "round",
                    "label": "t:sections.all.image_shape.options__8.label"
                }
            ],
            "default": "default",
            "label": "t:sections.all.image_shape.label",
            "info": "t:sections.all.image_shape.info"
        },
        {
            "type": "checkbox",
            "id": "show_secondary_image",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
        },
        {
            "type": "checkbox",
            "id": "show_vendor",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
        },
        {
            "type": "checkbox",
            "id": "show_rating",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
            "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
        },
        {
            "type": "select",
            "id": "quick_add",
            "default": "none",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
            "info": "t:sections.main-collection-product-grid.settings.quick_add.info",
            "options": [
                {
                    "value": "none",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
                },
                {
                    "value": "standard",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
                },
                {
                    "value": "bulk",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header__1.content"
        },
        {
            "type": "checkbox",
            "id": "enable_filtering",
            "default": true,
            "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
            "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
        },
        {
            "type": "select",
            "id": "filter_type",
            "options": [
                {
                    "value": "horizontal",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
                },
                {
                    "value": "vertical",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
                },
                {
                    "value": "drawer",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
                }
            ],
            "default": "horizontal",
            "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
            "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
        },
        {
            "type": "checkbox",
            "id": "enable_sorting",
            "default": true,
            "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
        },
        {
            "type": "select",
            "id": "columns_mobile",
            "default": "2",
            "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
            "options": [
                {
                    "value": "1",
                    "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
                },
                {
                    "value": "2",
                    "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.all.padding.section_padding_heading"
        },
        {
            "type": "range",
            "id": "padding_top",
            "min": 0,
            "max": 100,
            "step": 4,
            "unit": "px",
            "label": "t:sections.all.padding.padding_top",
            "default": 36
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 100,
            "step": 4,
            "unit": "px",
            "label": "t:sections.all.padding.padding_bottom",
            "default": 36
        }
    ]
}
{% endschema %}

 

EBOOST_0-1717033279262.png

EBOOST_1-1717033293121.png

EBOOST_2-1717033328094.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Hi @EBOOST I turned off tge description, and now I have one part of the description above and one another below the product grid. But qt the end, I still have the brown color even in adding your code. Maybe I did something wrong or maybe there is some steps to follow ? Thank you once again for your help !

EBOOST
Shopify Partner
1038 276 314

Hi,

Did you add any custom code? Could you share your store url?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Hi @EBOOST , this is the URl : https://ma-tasse-en-bois.fr/

EBOOST
Shopify Partner
1038 276 314

Hi,

You try code below

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- style -%}
.section-{{ section.id }}-padding {
	padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
	padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
	@media screen and (min-width: 750px) {
		.section-{{ section.id }}-padding {
			padding-top: {{ section.settings.padding_top }}px;
			padding-bottom: {{ section.settings.padding_bottom }}px;
		}
	}
{%- endstyle -%}
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
	{% if collection.description != blank %}
		<div class="collection-description page-width">
		    {{ collection.description | split: '<p>---</p>' | first }}
		</div>
	{% endif %}
    {%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
    <facet-filters-form class="facets facets-vertical-sort page-width small-hide">
        <form class="facets-vertical-form" id="FacetSortForm">
            <div class="facet-filters sorting caption">
                <div class="facet-filters__field">
                    <h2 class="facet-filters__label caption-large text-body">
                        <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
                    </h2>
                    <div class="select">
                        {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                        <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                            {%- for option in collection.sort_options -%}
                            <option value="{{ option.value | escape }}" {% if option.value==sort_by %} selected="selected" {% endif %}>
                                {{ option.name | escape }}
                            </option>
                            {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                    </div>
                </div>
            </div>
            <div class="product-count-vertical light" role="status">
                <h2 class="product-count__text text-body">
                    <span id="ProductCountDesktop">
                        {%- if collection.results_count -%}
                        {{
                        'templates.search.results_with_count'
                        | t: terms: collection.terms, count: collection.results_count
                        }}
                        {%- elsif collection.products_count == collection.all_products_count -%}
                        {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                        {%- else -%}
                        {{
                        'products.facets.product_count'
                        | t: product_count: collection.products_count, count: collection.all_products_count
                        }}
                        {%- endif -%}
                    </span>
                </h2>
                {%- render 'loading-spinner' -%}
            </div>
        </form>
    </facet-filters-form>
    {%- endif -%}
    <div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
        {{ 'component-facets.css' | asset_url | stylesheet_tag }}
        <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
        {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-collection-filters" data-id="{{ section.id }}">
            {% render 'facets',
            results: collection,
            enable_filtering: section.settings.enable_filtering,
            enable_sorting: section.settings.enable_sorting,
            filter_type: section.settings.filter_type,
            paginate: paginate
            %}
        </aside>
        {%- endif -%}
        <div class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" id="ProductGridContainer" {% if settings.animations_reveal_on_scroll %} data-cascade {% endif %}>
            {%- if collection.products.size == 0 -%}
            <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
                <div class="loading-overlay gradient"></div>
                <div class="title-wrapper center">
                    <h2 class="title title--primary">
                        {{ 'sections.collection_template.empty' | t -}}
                        <br>
                        {{
                        'sections.collection_template.use_fewer_filters_html'
                        | t: link: collection.url, class: 'underlined-link link'
                        }}
                    </h2>
                </div>
            </div>
            {%- else -%}
            <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
                <div class="loading-overlay gradient"></div>
                <ul id="product-grid" data-id="{{ section.id }}" class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}
">
                    {%- for product in collection.products -%}
                    {% assign lazy_load = false %}
                    {%- if forloop.index > 2 -%}
                    {%- assign lazy_load = true -%}
                    {%- endif -%}
                    <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %}>
                        {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        lazy_load: lazy_load,
                        quick_add: section.settings.quick_add,
                        section_id: section.id
                        %}
                    </li>
                    {%- endfor -%}
                </ul>
                {%- if paginate.pages > 1 -%}
                {% render 'pagination', paginate: paginate, anchor: '' %}
                {%- endif -%}
            </div>
            {%- endif -%}
        </div>
    </div>
    {%- endpaginate -%}
    {% if section.settings.image_shape == 'arch' %}
    {% render 'mask-arch' %}
    {%- endif -%}
    {% if collection.description != blank %}
	<div class="collection-description page-width">
	    {{ collection.description | split: '<p>---</p>' | last }}
	</div>
	{% endif %}
</div>

{% schema %}
{
    "name": "t:sections.main-collection-product-grid.name",
    "class": "section",
    "settings": [
        {
            "type": "range",
            "id": "products_per_page",
            "min": 8,
            "max": 36,
            "step": 4,
            "default": 16,
            "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
        },
        {
            "type": "range",
            "id": "columns_desktop",
            "min": 1,
            "max": 6,
            "step": 1,
            "default": 4,
            "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
        },
        {
            "type": "color_scheme",
            "id": "color_scheme",
            "label": "t:sections.all.colors.label",
            "info": "t:sections.all.colors.has_cards_info",
            "default": "scheme-1"
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header__3.content"
        },
        {
            "type": "select",
            "id": "image_ratio",
            "options": [
                {
                    "value": "adapt",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
                },
                {
                    "value": "portrait",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
                },
                {
                    "value": "square",
                    "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
                }
            ],
            "default": "adapt",
            "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
        },
        {
            "type": "select",
            "id": "image_shape",
            "options": [
                {
                    "value": "default",
                    "label": "t:sections.all.image_shape.options__1.label"
                },
                {
                    "value": "arch",
                    "label": "t:sections.all.image_shape.options__2.label"
                },
                {
                    "value": "blob",
                    "label": "t:sections.all.image_shape.options__3.label"
                },
                {
                    "value": "chevronleft",
                    "label": "t:sections.all.image_shape.options__4.label"
                },
                {
                    "value": "chevronright",
                    "label": "t:sections.all.image_shape.options__5.label"
                },
                {
                    "value": "diamond",
                    "label": "t:sections.all.image_shape.options__6.label"
                },
                {
                    "value": "parallelogram",
                    "label": "t:sections.all.image_shape.options__7.label"
                },
                {
                    "value": "round",
                    "label": "t:sections.all.image_shape.options__8.label"
                }
            ],
            "default": "default",
            "label": "t:sections.all.image_shape.label",
            "info": "t:sections.all.image_shape.info"
        },
        {
            "type": "checkbox",
            "id": "show_secondary_image",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
        },
        {
            "type": "checkbox",
            "id": "show_vendor",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
        },
        {
            "type": "checkbox",
            "id": "show_rating",
            "default": false,
            "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
            "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
        },
        {
            "type": "select",
            "id": "quick_add",
            "default": "none",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
            "info": "t:sections.main-collection-product-grid.settings.quick_add.info",
            "options": [
                {
                    "value": "none",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
                },
                {
                    "value": "standard",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
                },
                {
                    "value": "bulk",
                    "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header__1.content"
        },
        {
            "type": "checkbox",
            "id": "enable_filtering",
            "default": true,
            "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
            "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
        },
        {
            "type": "select",
            "id": "filter_type",
            "options": [
                {
                    "value": "horizontal",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
                },
                {
                    "value": "vertical",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
                },
                {
                    "value": "drawer",
                    "label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
                }
            ],
            "default": "horizontal",
            "label": "t:sections.main-collection-product-grid.settings.filter_type.label",
            "info": "t:sections.main-collection-product-grid.settings.filter_type.info"
        },
        {
            "type": "checkbox",
            "id": "enable_sorting",
            "default": true,
            "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
        },
        {
            "type": "header",
            "content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
        },
        {
            "type": "select",
            "id": "columns_mobile",
            "default": "2",
            "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
            "options": [
                {
                    "value": "1",
                    "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
                },
                {
                    "value": "2",
                    "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.all.padding.section_padding_heading"
        },
        {
            "type": "range",
            "id": "padding_top",
            "min": 0,
            "max": 100,
            "step": 4,
            "unit": "px",
            "label": "t:sections.all.padding.padding_top",
            "default": 36
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 100,
            "step": 4,
            "unit": "px",
            "label": "t:sections.all.padding.padding_bottom",
            "default": 36
        }
    ]
}
{% endschema %}

EBOOST_0-1717062482122.pngEBOOST_1-1717062489028.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Hi @EBOOST thank you for your reply, now the description has the white background but it's in double ( one description above and one below ). Will you be to change that ? Ypou can see an example here :https://ma-tasse-en-bois.fr/collections/plateaux-en-bois

Thank you for your support

EBOOST
Shopify Partner
1038 276 314

This is an accepted solution.

Hi,

You should replace "split: '<p>---</p>'" to split: '---'

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
damien68
Excursionist
25 0 6

Ok it finally works ! Thank you so much for your help and your patience, I wish you a great day ! 😃