Trim to 2 lines insted of one

[Sao23]

 Hi ,im using on aiciavem.ro ,the shella theme.. The point is that I have selected for products cards the option “ trim title to one line “ .I wanna trim to 2 lines insted of only one.Can you tell me please where I need to edit the code?:)

[Liquid_xPert_SJ]

@Sao23 

please update the below css into your theme file called, custom.css

Online Store > Edit Code > Assets folder > custom.css file paste below code at the end.

.product-collection__title a {
	white-space: unset !important;
	overflow: auto !important;
	text-overflow: unset !important;
}

Result:

Thanks

[Sao23]

Bi sir,this is not what I ask for

[Liquid_xPert_SJ]

.product-collection__title a {
	overflow: hidden;
	height: 35px;
	text-overflow: unset;
}

result:

[Sao23]

 

Mate..this is still not what i was looking for..The point it that you can see I have an option “trim to one line” ..when I use this option (because is not with this css) when the number of characters is reached you can see at final “ … “ at you I can t see anymore because you ve put an css..I judt wanna please help me modify the number of characters in code

[Liquid_xPert_SJ]

send me the code of this template file

[Sao23]

{% include 'global-variables' %}
{%- assign main_object = collection | default: search -%}
{%- assign terms = search.terms | escape -%}
{%- assign sort_by = main_object.sort_by | default: main_object.default_sort_by -%}
{% comment %}View grid{% endcomment %}
{%- assign breakpoints = 'xs|sm|md|lg|xl' | split: '|' -%}
{% capture grid_values %}{{ section.settings.default_view_grid_xs }}|{{ section.settings.default_view_grid_sm }}|{{ section.settings.default_view_grid_md }}|{{ section.settings.default_view_grid_lg }}|{{ section.settings.default_view_grid_xl }}{% endcapture %}
{%- assign grid_values = grid_values | split: '|' -%}
{%- for bp in breakpoints -%}
{%- assign grid_value = grid_values[forloop.index0] -%}
{%- assign grid_set = 12 -%}
{%- if grid_value == 'list' -%}
{% capture list_breakpoints %}{{ list_breakpoints }}{% if list_breakpoints != blank %}|{% endif %}{{ bp }}{% endcapture %}
{%- else -%}
{%- assign grid_set = grid_set | divided_by: grid_value -%}
{%- if grid_value == '1' -%}
{% capture centered_breakpoints %}{{ centered_breakpoints }}{% if centered_breakpoints != blank %}|{% endif %}{{ bp }}{% endcapture %}
{%- endif -%}
{%- endif -%}
{% capture grid_classes %}{% if grid_classes %}{{ grid_classes }} {% endif %}col{% if bp != 'xs' %}-{{ bp }}{% endif %}-{{ grid_set }}{% endcapture %}
{%- endfor -%}
{%- assign centered_breakpoints = centered_breakpoints | split: '|' -%}
{%- for bp in centered_breakpoints -%}
{% capture centered_classes %}{{ centered_classes }} collection-grid-centered-{{ bp }}{% endcapture %}
{%- endfor -%}
{%- assign list_breakpoints = list_breakpoints | split: '|' -%}
{% capture list_wrapper_classes %} {%- if section.settings.view_grid_list_design == '1' -%}collection-grid-list--v1{%- elsif section.settings.view_grid_list_design == '2' -%}collection-grid-list--v2{% endif %}{% endcapture %}
{%- for bp in list_breakpoints -%}
{% capture list_wrapper_classes %}{{ list_wrapper_classes }} collection-grid-list-{{ bp }}{% endcapture %}
{%- endfor -%}
{%- assign info_visibility = section.settings.info_visibility | default: 'hide' -%}
<div class="page-width collection-filters" id="main-collection-filters" data-id="{{ section.id }}">
<div class="collections pb-10">
{%- if collection != blank -%}
<div class="d-none">
<div id="DynamicCollectionBreadcrumbs">
{% include 'breadcrumbs' %}
</div>
</div>
<div id="CollectionHeadingTop"></div>
{%- endif -%}
<div class="pt-10 pt-lg-{{ offset_collection_page_content_margin_top_d }} overflow-hidden">
<div class="{% if section.settings.container == 'fullwidth' %}container-fluid{% else %}container{% endif %}">
<div class="row mb-40 mb-lg-{{ offset_collection_page_pagination_margin_bottom_d }}">
{%- if settings.collection_show_sidebar != 'hide' -%}
{%- if settings.collection_sidebar_position == 'dropdown' -%}
<div class="collections__sidebar collection-sidebar-type-1 collections__sidebar--dropdown d-none">
{% include 'collection-sidebar' %}
</div>
{%- elsif settings.collection_sidebar_position == 'left' or settings.collection_sidebar_position == 'right' -%}
<div class="collections__sidebar collection-sidebar-type-1 collections__sidebar--width-md d-none col-auto d-lg-block collections__sidebar--{% if settings.collection_sidebar_position == 'right' %}right order-2{% else %}left{% endif %}{% if settings.collection_enable_sticky %} sticky-sidebar-lg js-sticky-sidebar{% endif %}">
{%- if settings.collection_enable_sticky -%}
<div data-js-sticky-sidebar-body>
{%- endif -%}
<div data-js-position-desktop="sidebar">
{% include 'collection-sidebar' %}
</div>
{%- if settings.collection_enable_sticky -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- else -%}
<div class="d-none">
{% include 'collection-sidebar' %}
</div>
{%- endif -%}
<div class="collections__body col pb-25">
{%- if collection != blank -%}
<div id="CollectionHeadingProductsGridWidth"></div>
{%- endif -%}
{%- if section.settings.view_grid_visibility != 'hide' -%}
{%- for bp in breakpoints -%}
{% capture grid_attrs %}{{ grid_attrs }} data-value-{{ bp }}="{{ grid_values[forloop.index0] }}"{% endcapture %}
{%- endfor -%}
{%- endif -%}
<div class="collection-body{% if section.settings.view_grid_visibility != 'hide' %} js-collection-grid{% endif %}"{% if grid_attrs %}{{ grid_attrs }}{% endif %}>
{%- if section.settings.sort_by_visibility != 'hide' or info_visibility != 'hide' or section.settings.view_grid_visibility != 'hide' -%}
{%- capture sort_by_html -%}
{%- if section.settings.sort_by_visibility != 'hide' -%}
<div class="collection-control__sort-by-wrapper d-none d-lg-block" data-js-position-desktop="sort-by">
<div class="collection-control__sort-by mr-20{% if section.settings.sort_by_visibility == 'desktop_n_mobile' %} js-position{% endif %}" data-js-position-name="sort-by">
<collection-sorting-clone-form>
<form id="CollectionFiltersSortingCloneForm" class="mb-0">
<div class="js-sh-filter" data-index="tags-sorting-clone">
<div class="collection-filters__item">
<div class="collection-filters__field">
<div class="select position-relative js-dropdown js-select">
{%- assign sort_by = main_object.sort_by | default: main_object.default_sort_by -%}
<div class="d-flex align-items-center" data-js-dropdown-button>
<label class="collection-filters__label caption-large mb-0 mr-5" for="SortByClone">{{ 'collection_template.sort_by_label' | t }}:</label>
<select name="sort_by_clone" class="collection-filters__sort select__select caption-large p-0 pr-10 pr-lg-25 mb-0 border-0 cursor-pointer" id="SortByClone">
{%- for option in main_object.sort_options -%}
<option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
{%- capture dropdown_options -%}
{{ dropdown_options }}
<span data-value="{{ option.value | escape }}"{% if option.value == sort_by %} class="selected"{% endif %}>{{ option.name | escape }}</span>
{%- endcapture -%}
{%- endfor -%}
</select>
<i class="position-absolute d-none d-lg-inline right-0">{% render 'icon-theme-229' %}</i>
</div>
<div class="select__dropdown dropdown d-none position-lg-absolute top-lg-100 left-lg-0" data-js-dropdown data-js-select-dropdown>
<div class="px-15 pb-30 py-lg-15">
{{ dropdown_options }}
</div>
</div>
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js">{{ 'collection_template.sort_button' | t }}</button>
</noscript>
</div>
</div>
</form>
</collection-sorting-clone-form>
</div>
</div>
{%- endif -%}
{%- endcapture -%}
<div class="collection-control mb-15 mb-lg-{{ offset_collection_page_products_margin_top_d }}">
<div class="row">
{%- if settings.collection_show_sidebar != 'hide' and settings.collection_sidebar_position == 'dropdown' -%}
{%- assign desktop_need_button = true -%}
{%- endif -%}
{%- if settings.collection_show_sidebar == 'desktop_and_mobile' -%}
{%- assign mobile_need_button = true -%}
{%- endif -%}
{% capture control_grid %}col{% if mobile_need_button %}-8{% else %}-0{% endif %} col-lg{% if desktop_need_button %}-4{% endif %}{% if mobile_need_button != true %} d-none{% else %} d-flex{% endif %}|col-lg{% if desktop_need_button %}-3{% endif %}|col{% if mobile_need_button %}-4{% else %}-12{% endif %} col-lg{% if desktop_need_button %}-5{% endif %}{% endcapture %}
{%- assign control_grid = control_grid | split: '|' -%}
<div class="{{ control_grid[0] }} d-lg-flex align-items-center">
{%- if settings.collection_show_sidebar != 'hide' -%}
<div class="{% if mobile_need_button == true %}d-flex{% else %}d-none{% endif %}{% if desktop_need_button == true %} d-lg-flex{% else %} d-lg-none{% endif %} mr-30">
<div class="collection-control__button-sidebar d-flex align-items-center cursor-pointer js-popup-button" data-js-popup-button="sidebar">
<i class="mr-5">{% render 'icon-theme-084' %}</i>
{{ 'collection_template.filter_button' | t }}
<span id="CollectionProductCountMobileFilterButton"><span class="d-inline ml-3">{% if main_object.products_count > 0 %}({{ main_object.products_count }}){% endif %}</span></span>
</div>
</div>
{%- endif -%}
{%- if desktop_need_button != true -%}
{{ sort_by_html }}
{%- assign added_sort_by_html = true -%}
{%- endif -%}
</div>
<div class="{{ control_grid[1] }} d-none d-lg-flex flex-lg-center" data-js-position-desktop="collection-info">
<div{% if info_visibility == 'desktop_n_mobile' %} class="js-position"{% endif %} data-js-position-name="collection-info">
{%- if info_visibility != 'hide' -%}
{%- if collection != blank -%}
<div class="collection-control__information">
<div class="collection-product-count light" role="status">
<p id="CollectionProductCount" class="collection-product-count__text m-0">
{%- if collection.products_count == 0 -%}
{{ 'collection_template.product_count_empty' | t }}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'collection_template.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{ 'collection_template.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
{%- endif -%}
</p>
</div>
</div>
{%- endif -%}
{%- endif -%}
</div>
</div>
<div class="collection-control__view-wrapper {{ control_grid[2] }} d-flex justify-content-lg-end align-items-center">
{%- if settings.collection_sidebar_position == 'dropdown' or settings.collection_sidebar_position == 'top' -%}
{%- unless added_sort_by_html-%}
{{ sort_by_html }}
{%- endunless-%}
{%- endif -%}
{%- if section.settings.view_grid_visibility != 'hide' -%}
<div class="collection-control__grid-buttons ml-auto ml-lg-15{% if section.settings.view_grid_visibility == 'desktop' %} d-none d-lg-block{% endif %}"
{% if section.settings.enable_grid_tooltip -%}
data-js-tooltip
data-tippy-content="{{ 'collection_template.view_grid_tooltip' | t }}"
data-tippy-placement="top"
data-tippy-distance="8"
{%- endif -%}
>
<div class="collection-grid-buttons d-flex" data-js-collection-grid-buttons>
{%- assign view_grid_handles = '1|2|3|4|6|list' | split: '|' -%}
{%- assign view_grid_visible_classes = ' d-md-none|| d-none d-sm-block| d-none d-md-block| d-none d-lg-block| d-none d-lg-block' | split: '|' -%}
{% capture view_grid_icons %}{% render 'icon-theme-304' %}|<span class="d-lg-none">{% render 'icon-theme-185' %}</span><span class="d-none d-lg-block">{% render 'icon-theme-323' %}</span>|<span class="d-lg-none">{% render 'icon-theme-186' %}</span><span class="d-none d-lg-block">{% render 'icon-theme-324' %}</span>|<span class="d-lg-none">{% render 'icon-theme-305' %}</span><span class="d-none d-lg-block">{% render 'icon-theme-325' %}</span>|<span class="d-lg-none">{% render 'icon-theme-305' %}</span><span class="d-none d-lg-block">{% render 'icon-theme-326' %}</span>|<span class="d-lg-none">{% render 'icon-theme-187' %}</span><span class="d-none d-lg-block">{% render 'icon-theme-327' %}</span>{% endcapture %}
{%- assign view_grid_icons = view_grid_icons | split: '|' -%}
{%- for handle in view_grid_handles -%}
{%- assign visible_prop = 'show_view_grid_' | append: handle -%}
{%- if section.settings[visible_prop] == false -%}
{%- continue -%}
{%- endif -%}
{%- assign active_attrs = null -%}
{%- for value in grid_values -%}
{%- if value == handle -%}
{% capture attr %} data-active-{{ breakpoints[forloop.index0] }}{% endcapture %}
{% assign active_attrs = active_attrs | append: attr %}
{%- endif -%}
{%- endfor -%}
<div class="mx-8 mx-lg-4 cursor-pointer{{ view_grid_visible_classes[forloop.index0] }}" data-value="{{ handle }}"{{ active_attrs }}>
<i>{{ view_grid_icons[forloop.index0] }}</i>
</div>
{%- endfor -%}
</div>
</div>
{%- endif -%}
</div>
{%- if section.settings.sort_by_visibility == 'desktop_n_mobile' -%}
<div class="col-12 d-lg-none mt-15">
<div class="row align-items-center">
{%- if section.settings.sort_by_visibility == 'desktop_n_mobile' -%}
<div class="col-6 col-sm-5 col-md-4" data-js-position-mobile="sort-by"></div>
{%- elsif info_visibility == 'desktop_n_mobile' -%}
<div class="col-6 col-sm-5 col-md-4" data-js-position-mobile="collection-info"></div>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- if info_visibility == 'desktop_n_mobile' and section.settings.sort_by_visibility == 'desktop_n_mobile' -%}
<div class="col-12 d-lg-none mt-15" data-js-position-mobile="collection-info"></div>
{%- endif -%}
{%- if settings.collection_sidebar_position == 'top' and settings.collection_show_sidebar != 'hide' -%}
<div class="col-12 d-none d-lg-block mt-20 mb-10">
<div class="collections__sidebar collections__sidebar--top collection-sidebar-type-2 position-relative invisible" data-js-position-desktop="sidebar" data-accordion-desktop-as-dropdown="sidebar-section">
{% include 'collection-sidebar' %}
</div>
</div>
{%- endif -%}
{%- if section.settings.current_filters_visibility != 'hide' or settings.collection_sidebar_position == 'top' -%}
{% capture current_filters_html %}
{% include 'collection-current-filters', type: '2' %}
{% endcapture %}
<div id="CollectionCurrentFiltersClone" class="col-12 collections__sidebar__current-filters{% if section.settings.current_filters_visibility == 'mobile' and settings.collection_sidebar_position != 'top' %} d-lg-none{% elsif section.settings.current_filters_visibility == 'desktop' %} d-none d-lg-block{% endif %}">
<div class="mt-25 mt-lg-15{% unless has_current_filters %} d-none{% endunless %}">
{{ current_filters_html }}
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div id="CollectionBuilder"></div>
<div id="CollectionProducts" class="collection-products{{ list_wrapper_classes }}{{ centered_classes }}">
{%- if collection != blank -%}
{%- paginate collection.products by section.settings.products_per_page -%}
<div id="main-collection-product-grid" data-id="{{ section.id }}">
<div id="CollectionProductGrid" class="row collection-product-grid{% if collection.products.size == 0 %} collection-product-grid--empty{% endif %}">
{%- if collection.products.size == 0 -%}
<div class="col">
<div class="d-flex flex-column align-items-center py-40 py-md-100 my-100">
<h2 class="h3">{{ 'collection_template.empty_title' | t }}</h2>
<p>{{ 'collection_template.empty_paragraph' | t }}</p>
<a href="{{ collection.url }}" class="btn empty-btn mt-20">{{ 'collection_template.use_fewer_filters' | t }}</a>
</div>
</div>
{%- else -%}
{%- for product in collection.products -%}
<div class="{{ grid_classes }}">
{% include 'product-collection' product_margin_bottom: offset_collection_page_product_margin_bottom_d %}
</div>
{%- endfor -%}
{%- endif -%}
</div>
<collection-pagination class="d-block" data-pagination-type="{{ settings.layout_pagination_type }}">
<div id="CollectionPagination">
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '', type: settings.layout_pagination_type %}
{%- endif -%}
</div>
</collection-pagination>
</div>
{%- endpaginate -%}
{%- else -%}
{%- paginate search.results by section.settings.products_per_page -%}
<div id="main-collection-product-grid" data-id="{{ section.id }}">
<div id="CollectionProductGrid" class="row collection-product-grid{% if main_object.products.size == 0 %} collection-product-grid--empty{% endif %}">
{%- if search.performed -%}
{%- if search.results.size == 0 -%}
<div class="col">
<div class="d-flex flex-column align-items-center py-40 py-md-100 my-100">
<h2 class="h3">{{ 'collection_template.empty_title' | t }}</h2>
<p>{{ 'collection_template.empty_paragraph' | t }}</p>
<a href="{{ collection.url }}" class="btn empty-btn mt-20">{{ 'collection_template.use_fewer_filters' | t }}</a>
</div>
</div>
{%- else -%}
{%- for item in search.results -%}
{%- if item.object_type == 'product' -%}
<div class="{{ grid_classes }}">
{% include 'product-collection' product: item, product_margin_bottom: offset_collection_page_product_margin_bottom_d, show_first_product_image: true %}
</div>
{%- elsif section.settings.search_show_only_products != true -%}
<div class="{{ grid_classes }}">
<div>
{%- if item.image -%}
<a href="{{ item.url }}" class="d-block mb-20" title="{{ item.title | escape }}">
{% render 'rimage' with image: item.image alt: item.image.alt %}
</a>
{%- endif -%}
</div>
<p class="mb-10">{{ item.object_type | capitalize }}:</p>
<p><a href="{{ item.url }}">{{ item.title | escape }}</a></p>
</div>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
</div>
<collection-pagination class="d-block" data-pagination-type="{{ settings.layout_pagination_type }}">
<div id="CollectionPagination">
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '', type: settings.layout_pagination_type %}
{%- endif -%}
</div>
</collection-pagination>
</div>
{%- endpaginate -%}
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
</div>
{%- if collection != blank -%}
<div id="CollectionHeadingBottom"></div>
{%- endif -%}
</div>
</div>

{%- if collection != blank -%}
<script>
window.renderCollectionPageHeadings = function(html = document, clearContainers) {
const pageHeading = html.querySelectorAll('.collection-page-heading-template');
const headingTop = document.getElementById('CollectionHeadingTop');
const headingProductsGridWidth = document.getElementById('CollectionHeadingProductsGridWidth');
const headingBottom = document.getElementById('CollectionHeadingBottom');

if(clearContainers) {
headingTop.innerHTML = '';
headingProductsGridWidth.innerHTML = '';
headingBottom.innerHTML = '';
}
pageHeading.forEach(element => {
const collectionHeadingInsertElement = element.classList.contains('collection-page-heading-template--position-container') || element.classList.contains('collection-page-heading-template--position-fullwidth') ?
headingTop :
element.classList.contains('collection-page-heading-template--position-container_n_bottom') || element.classList.contains('collection-page-heading-template--position-fullwidth_n_bottom') ?
headingBottom :
headingProductsGridWidth;

collectionHeadingInsertElement.appendChild(element.content.cloneNode(true));
element.closest('.shopify-section').remove();
});
};
window.renderCollectionPageBuilders = function(html = document, renderOnlyInsert = false, clearContainers) {
const pageBuilder = html.querySelectorAll('.collection-page-builder-template:not(.processed)');
const collectionBuilder = document.getElementById('CollectionBuilder');
const selectorCollectionHiddenElements = [
'#CollectionProducts',
'.collection-sidebar-section--content-filters',
'.collection-sidebar-section--content-current-filters',
'#CollectionCurrentFiltersClone',
'.collection-control__sort-by',
'.collection-control__information',
'.collection-control__view-wrapper'
];
let hasBuilderReplaceContent = false;

if(clearContainers) collectionBuilder.innerHTML = '';
pageBuilder.forEach(element => {
const sectionTypeInsert = element.classList.contains('collection-page-builder-template--type-insert');

if(renderOnlyInsert && !sectionTypeInsert) {
return;
}
if (sectionTypeInsert) {
const collectionProductGrid = document.getElementById('CollectionProductGrid');

if (collectionProductGrid && !collectionProductGrid.classList.contains('collection-product-grid--empty')) {
const productGridClasses = collectionProductGrid.children[0].getAttribute('class');

for (let elementBlock of element.content.children) {
let gridElement = document.createElement('div');
let gridElementClone = elementBlock.cloneNode(true);

gridElement.setAttribute('data-promobox-grid-visible', gridElementClone.dataset.promoboxGridVisible);
gridElementClone.removeAttribute('data-promobox-grid-visible');
gridElement.setAttribute('class', productGridClasses);
gridElement.appendChild(gridElementClone);
collectionProductGrid.insertAdjacentElement('afterbegin', gridElement);
}
}
} else {
if (element.content.querySelector('.collection-page-builder')) hasBuilderReplaceContent = true;
if (hasBuilderReplaceContent) collectionBuilder.appendChild(element.content.cloneNode(true));

element.closest('.shopify-section').remove();
}

element.classList.add('processed');
});
selectorCollectionHiddenElements.forEach(selector => {
const elements = document.querySelectorAll(selector);

elements.forEach(element => element.classList[hasBuilderReplaceContent ? 'add' : 'remove']('d-none-important'));
});
};
renderCollectionPageHeadings();
renderCollectionPageBuilders();
</script>
{%- endif -%}
{%- if settings.collection_sidebar_position == 'top' and settings.collection_show_sidebar != 'hide' -%}
<script>
window.checkFilterAccordion = (function() {
let lastValueIsDesktop = false;

function toggleFilterAccordion(element, show = true) {
element.querySelector('.collection-sidebar-section__head').classList[show ? 'add' : 'remove']('open');
element.querySelector('.collection-sidebar-section__accordion').classList[show ? 'remove' : 'add']('d-none');
};
return function(html = document, forced) {
const isDesktop = window.innerWidth > theme.breakpoints.main - 1;

if(!forced && lastValueIsDesktop === isDesktop) return;

html.querySelectorAll('.collection-sidebar-section[data-js-accordion]')
.forEach(element => {
toggleFilterAccordion(element,
isDesktop ?
false :
element.dataset.accordionDefaultState === 'open' ?
true :
false
);
});
lastValueIsDesktop = isDesktop;
};
})();

window.checkFilterAccordion();
window.addEventListener('resize', () => window.checkFilterAccordion());
document.querySelector('.collections__sidebar--top').classList.remove('invisible');
</script>
{%- endif -%}
{%- if section.settings.view_grid_visibility != 'hide' -%}
<script>
class ProductsView {
constructor() {
this.selectorElement = '.js-collection-grid';
this.element = document.querySelector(this.selectorElement);

this.load();
}

load() {
let gridObj = localStorage.getItem('collection-grid');

if(window.location.href.indexOf('collection-grid=reset') !== -1) localStorage.setItem('collection-grid', null);
else if(gridObj) this.firstPageLoad(gridObj);

this.element.querySelectorAll('[data-js-collection-grid-buttons] [data-value]').forEach(element => element.addEventListener('click', this.onButtonsClick.bind(this)));
}

firstPageLoad(obj) {
const parsedObj = JSON.parse(obj);
let isDefault = true;

for(let key in parsedObj) {
let valueAttr = `data-value-${key}`;

if(this.element.getAttribute(valueAttr) === parsedObj[key]) {
continue;
}

isDefault = false;
let activeAttr = `data-active-${key}`;
let activeButton = this.element.querySelector(`[data-js-collection-grid-buttons] [${activeAttr}]`);
let currentButton = this.element.querySelector(`[data-js-collection-grid-buttons] [data-value="${parsedObj[key]}"]`);

this.element.setAttribute(valueAttr, parsedObj[key]);
if(activeButton) activeButton.removeAttribute(activeAttr);
if(currentButton) currentButton.setAttribute(activeAttr, true);
}

if(!isDefault) this.update();
}

onButtonsClick(event) {
const activeAttr = `data-active-${theme.current.bp}`;

if(!event.currentTarget.hasAttribute(activeAttr)) {
const activeButton = this.element.querySelector(`[data-js-collection-grid-buttons] [${activeAttr}]`);
let gridObj = {};

if(activeButton) activeButton.removeAttribute(activeAttr);

event.currentTarget.setAttribute(activeAttr, true);
this.element.setAttribute(`data-value-${theme.current.bp}`, event.currentTarget.dataset.value);
this.update();

for(let key in theme.breakpoints.values) {
gridObj[key] = this.element.getAttribute(`data-value-${key}`);
}

localStorage.setItem('collection-grid', JSON.stringify(gridObj));
}
}

update(html = document) {
const collectionProducts = html.getElementById('CollectionProducts');
let gridClasses = '';

for (let key in theme.breakpoints.values) {
let gridValue = this.element.getAttribute(`data-value-${key}`);
let columnSize = (gridValue === 'list' ? 12 : 12 / +gridValue);

collectionProducts.classList[+gridValue === 1 ? 'add' : 'remove'](`collection-grid-centered-${key}`);
collectionProducts.classList[gridValue === 'list' ? 'add' : 'remove'](`collection-grid-list-${key}`);
gridClasses += `${gridClasses !== '' ? ' ' : ''}col-${key === 'xs' ? '' : `${key}-`}${columnSize}`;
}

collectionProducts.querySelectorAll('[data-js-product], [data-js-promobox]')
.forEach(element => {
element.parentNode.setAttribute('class', gridClasses);
});

window.dispatchEvent(new Event('checkImages'));
}
}

theme.ProductsView = new ProductsView;
</script>
{%- endif -%}
{%- if settings.collection_enable_sticky -%}
<script>
theme.AssetsLoader.require('scripts', 'sticky_sidebar');
</script>
{%- endif -%}

[Sao23]

I ve put you first the file im 85% it is ,and a secound file where maybe should be..Thanks a lot for your help!