FROM CACHE - en_header
Promotion image

Re: Collection's description

Solved

Collection's description

damien68
Excursionist
25 0 6
‎05-20-2024 01:20 PM

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

800 Views
1 Like
Report
Accepted Solution (1)
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-30-2024 08:03 AM

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 ❤❤Coffee tips

View solution in original post

677 Views
0 Likes
Report
Replies 12 (12)

EBOOST
Shopify Partner
1189 310 349
‎05-27-2024 10:56 PM

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 ❤❤Coffee tips
721 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-28-2024 10:42 AM

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

 

715 Views
0 Likes
Report
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-28-2024 06:16 PM

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 ❤❤Coffee tips
713 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-29-2024 03:35 PM

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 %}

 

705 Views
0 Likes
Report
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-29-2024 09:45 PM

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 ❤❤Coffee tips
699 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-30-2024 04:39 AM

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 !

693 Views
0 Likes
Report
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-30-2024 04:54 AM

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 ❤❤Coffee tips
692 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-30-2024 05:08 AM

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

690 Views
0 Likes
Report
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-30-2024 05:51 AM

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 ❤❤Coffee tips
686 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-30-2024 08:01 AM

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

678 Views
0 Likes
Report
In response to damien68

EBOOST
Shopify Partner
1189 310 349
‎05-30-2024 08:03 AM

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 ❤❤Coffee tips
678 Views
0 Likes
Report
In response to EBOOST

damien68
Excursionist
25 0 6
‎05-30-2024 08:12 AM

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

673 Views
0 Likes
Report

Community Blog Articles

page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Jacqui_0-1725391911908.jpeg
Recap | An AMA with 2H Media: Marketing Your Shopify Store!

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

By Jacqui Sep 6, 2024
Terms of Service Privacy Policy