Hello, I need to set 1 product per row in all collections just in mobile version.
Now I have 2 products per row, can you help me?
My website infinitycosmetics.it
Hi @INFINITYCOS , you have to change some classes in order to get this:
Go to edit code > sections > Not sure how your sections is called, but problably collection-template.liquid or something similar.
Anyway, find this element:
div class="grid__item col-6 col-sm-6 col-md-3 four_columns indiv-product-wrapper collection-image-anim mobile-clear tablet-clear wow fadeInUp delay-2 animated"
And change it with:
div class="grid__item col-12 col-sm-12 col-md-3 four_columns indiv-product-wrapper collection-image-anim mobile-clear tablet-clear wow fadeInUp delay-2 animated"
@MarinaPetrovic I didn’t find this code in my template–collection.liquid
This is my actual code, where I have to make changes?:
{% if section.settings.tags_enable and section.settings.sort_enable %}
@media only screen and (max-width: 574px) { .collection-page--sort-by { margin-top: 20px; } }{% endif %}
{% if section.settings.collection_image_enable %}
#main-navigation-wrapper{ margin-bottom: 0px; }{% if collection.image %}
{% render 'responsive-image' with collection.image, alt: collection.title %}
{% endif %}
{% endif %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% paginate collection.products by limit %}
{% if collection.handle == 'all' %}
{{ 'products.general.products_title' | t }}
{% else %}{{ collection.title }}
{% endif %}{% if collection.description != empty %}
{{ collection.description }}
{% endif %}
{% if section.settings.tags_enable or section.settings.sort_enable %}
{% if section.settings.tags_enable %}
{% endif %}
{% endif %}
{{ 'collections.filters.title_tags' | t }}
{{ 'tag' | link_to_tag: 'tag' }}"
{% if collection.handle %}
{% elsif collection.products.first.type == collection.title %}
{% elsif collection.products.first.vendor == collection.title %}
{% endif %}
{% if section.settings.sort_enable %}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{{ 'collections.sorting.title' | t }}
{% endif %}
{% if section.settings.enable_collection_sidebar %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% case block.type %}
{% when ‘vendors’ %}
{{ block.settings.title }}
-
{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}
- {{ product_vendor }} {% else %}
- {{ product_vendor | link_to_vendor }} {% endif %} {% endfor %}
{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}
{% if its_a_match %}
{% when ‘text’ %}
{{ block.settings.title }}
{% if block.settings.richtext != blank %}
{{ block.settings.richtext }}
{% endif %}
{% when ‘menu’ %}
{%- assign collection_linklist = block.settings.collection_linklist -%}
{{ block.settings.menu_title | escape }}
{% if linklists[collection_linklist].links.size > 0 %}-
{% for link in linklists[collection_linklist].links %}
- {{link.title}} {% endfor %}
{% when ‘image’ %}
{% if block.settings.collection-sidebar-image %}
{% if block.settings.collection-sidebar-link %}
{% endif %}
{% endif %}
{% assign alt = block.settings.collection-sidebar-image.alt | default: shop.name %}
{% render 'responsive-image' with block.settings.collection-sidebar-image, alt: alt %}
{% if block.settings.collection-sidebar-link %}
{% endif %}
{% endcase %}
{% endfor %}
{% endif %}
{% endif %}
{% if section.settings.enable_collection_sidebar and section.blocks.size > 0 %}
{% else %}
{% endif %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = ‘col-6 col-sm-6 col-md-6 two_columns’ -%}
{%- assign grid_image_width = ‘600x600’ -%}
{% when 3 %}
{%- assign grid_item_width = ‘col-6 col-sm-4 col-md-4 three_columns’ -%}
{%- assign grid_image_width = ‘600x600’ -%}
{% when 4 %}
{%- assign grid_item_width = ‘col-6 col-sm-6 col-md-3 four_columns’ -%}
{%- assign grid_image_width = ‘600x600’ -%}
{% when 5 %}
{%- assign grid_item_width = ‘col-6 col-sm-6 col-md-2dot4 five_columns’ -%}
{%- assign grid_image_width = ‘600x600’ -%}
{% when 6 %}
{%- assign grid_item_width = ‘col-6 col-sm-4 col-md-2 six_columns’ -%}
{%- assign grid_image_width = ‘600x600’ -%}
{% endcase %}
{% for product in collection.products %}
{% if product.handle contains "docapp-free-gift-" %}{% continue %}{% endif %}
{% endif %}
{%- if forloop.first == true -%}{%- capture isWsgCustomer -%}{%- render ‘wsg-is-customer’ -%}{%- endcapture -%}{%- assign isWsgCustomer = isWsgCustomer | strip -%}{%- if isWsgCustomer == “yes” -%}{%- assign wsgActiveCustomer = true -%}{%- else -%}{%- assign wsgActiveCustomer = false -%}{%- endif -%}{%- endif -%}
{%- capture wsg-loop -%}{%- render ‘wsg-status-render’, wsgTempProd: product, wsgStatusAction: ‘col-item’, wsgActiveCustomer: wsgActiveCustomer -%}{%- endcapture -%}{%- if wsg-loop contains ‘gentag’ -%}{{ wsg-loop | remove: “gentag” }}{%- endif -%}{%- if wsg-loop contains ‘prodhide’ -%}{%- continue -%}{%- endif -%}
{%-
include ‘product-grid–indiv-product’,
liquidObject: product
-%}
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == ‘all’ and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
{% for i in (1..8) %}
{{ 'collections.general.no_matches' | t }}
{% if paginate.pages > 1 %}
{% if section.settings.pagination_type == 'paged_navigation' %}
{% render 'pagination', paginate: paginate %}
{% elsif section.settings.pagination_type == 'infinite_scrolling' %}
{% endif %}
{% if paginate.next %}
{{ 'collections.paginate.infinite_scrolling' | t }}
{% endif %}
{% else %}
{% if paginate.next %}
{{ 'collections.paginate.load_more' | t }}
{% endif %}
{% endif %}
{% endpaginate %}
{% schema %}
{
“name”: {
“en”: “Collection pages”,
“de”: “Kollektionsseiten”,
“es”: “Páginas de colecciones”,
“fr”: “Pages de collection”,
“pt-PT”: “Páginas de coleções”
},
“max_blocks”: 6,
“settings”: [
{
“type”: “range”,
“id”: “grid”,
“min”: 2,
“max”: 6,
“step”: 1,
“label”: {
“en”: “Products per row”,
“de”: “Produkte pro Zeile”,
“es”: “Productos por fila”,
“fr”: “Produits par ligne”,
“pt-PT”: “Produtos por linha”
},
“default”: 4
},
{
“type”: “range”,
“id”: “rows”,
“min”: 3,
“max”: 8,
“step”: 1,
“label”: {
“en”: “Rows per page”,
“de”: “Zeilen pro Seite”,
“es”: “Filas por página”,
“fr”: “Nombre de lignes par page”,
“pt-PT”: “Linhas por página”
},
“default”: 6
},
{
“type”: “checkbox”,
“id”: “collection_image_enable”,
“label”: {
“en”: “Show collection image”,
“de”: “Kollektionsbild anzeigen”,
“es”: “Mostar la imagen de la colección”,
“fr”: “Afficher l’image de la collection”,
“pt-PT”: “Mostrar imagem da coleção”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “sort_enable”,
“label”: {
“en”: “Enable sorting”,
“de”: “Sortieren aktivieren”,
“es”: “Habilitar ordenado”,
“fr”: “Activer le tri”,
“pt-PT”: “Ativar seleção”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “tags_enable”,
“label”: {
“en”: “Enable tag filtering”,
“de”: “Tag-Filtern aktivieren”,
“es”: “Habilitar el filtrado por etiquetas”,
“fr”: “Activer le filtrage des balises”,
“pt-PT”: “Ativar filtro de etiquetas”
},
“default”: true
},
{
“type”: “header”,
“content”: {
“en”: “Pagination”
}
},
{
“type”: “select”,
“id”: “pagination_type”,
“label”: {
“en”: “Pagination type”,
“de”: “Seitenzählungsart”,
“es”: “Tipo de paginación”,
“fr”: “Type de pagination”,
“pt-PT”: “Tipo de paginação”
},
“default”: “paged_navigation”,
“options”: [
{
“value”: “paged_navigation”,
“label”: {
“en”: “Paged navigation”,
“de”: “Seitennummerierte Navigation”,
“es”: “Navegación por páginas”,
“fr”: “Navigation paginée”,
“pt-PT”: “Navegação paginada”
}
},
{
“value”: “infinite_scrolling”,
“label”: {
“en”: “Infinite scrolling”,
“de”: “Unendliches Scrolling”,
“es”: “Desplazamiento continuo”,
“fr”: “Défilé infini”,
“pt-PT”: “Rolagem infinita”
}
},
{
“value”: “load_more”,
“label”: {
“en”: “Load more button”,
“de”: “Schaltfläche ‘Mehr anzeigen’”,
“es”: “Cargar más botones”,
“fr”: “Bouton Charger plus”,
“pt-PT”: “Carregar mais botão”
}
}
]
},
{
“type”: “header”,
“content”: {
“en”: “Sidebar”,
“de”: “Seitenleiste”,
“es”: “Barra lateral”,
“fr”: “Barre latérale”,
“pt-PT”: “Barra lateral”
}
},
{
“type”: “checkbox”,
“id”: “enable_collection_sidebar”,
“label”: {
“en”: “Enable sidebar content”,
“de”: “Inhalte der Seitenleiste aktivieren”,
“es”: “Activar el contenido de la barra lateral”,
“fr”: “Activer le contenu de la barre latérale”,
“pt-PT”: “Permitir conteúdo na barra lateral”
},
“default”: false,
“info”: {
“en”: “Create a sidebar by adding content blocks below.”,
“de”: “Erstellen Sie eine Seitenleiste, indem Sie unten Inhaltsblocks hinzufügen.”,
“es”: “Cree una barra lateral añadiendo los bloques de contenido más abajo.”,
“fr”: “Créez une barre latérale en ajoutant des blocs de contenu ci-dessous.”,
“pt-PT”: “Crie uma barra lateral adicionando blocos de conteúdo abaixo.”
}
}
],
“blocks”: [
{
“type”: “text”,
“name”: {
“en”: “Text”,
“de”: “Text”,
“es”: “Texto”,
“fr”: “Texte”,
“pt-PT”: “Texto”
},
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: {
“en”: “Heading”,
“de”: “Überschrift”,
“es”: “Encabezado”,
“fr”: “Rubrique”,
“pt-PT”: “Título”
},
“default”: {
“en”: “Title”,
“de”: “Titel”,
“es”: “Título”,
“fr”: “Titre”,
“pt-PT”: “Título”
}
},
{
“type”: “richtext”,
“id”: “richtext”,
“label”: {
“en”: “Text”,
“de”: “Text”,
“es”: “Texto”,
“fr”: “Texte”,
“pt-PT”: “Texto”
},
“default”: {
“en”: “
Share details about promotions or important messages with your customers.
”,“de”: “
Teilen Sie Einzelheiten über Werbeaktionen oder wichtige Nachrichten mit Ihren Kunden.
”,“es”: “
Comparta detalles sobre promociones o mensajes importantes con sus clientes.
”,“fr”: “
Partagez les détails des promotions ou des messages importants avec vos clients.
”,“pt-PT”: “
Partilhe detalhes sobre promoções ou mensagens importantes com os seus clientes.
”}
}
]
},
{
“type”: “vendors”,
“name”: {
“en”: “Vendors”,
“de”: “Verkäufer”,
“es”: “Vendedores”,
“fr”: “Vendeurs”,
“pt-PT”: “Vendedores”
},
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: {
“en”: “Heading”,
“de”: “Überschrift”,
“es”: “Encabezado”,
“fr”: “Rubrique”,
“pt-PT”: “Título”
},
“default”: {
“en”: “Vendors”,
“de”: “Verkäufer”,
“es”: “Vendedores”,
“fr”: “Vendeurs”,
“pt-PT”: “Vendedores”
}
}
]
},
{
“type”: “menu”,
“name”: {
“en”: “Menu”,
“de”: “Menü”,
“es”: “Menú”,
“fr”: “Menu”,
“pt-PT”: “Menu”
},
“settings”: [
{
“type”: “text”,
“id”: “menu_title”,
“label”: {
“en”: “Heading”,
“de”: “Überschrift”,
“es”: “Encabezado”,
“fr”: “Rubrique”,
“pt-PT”: “Título”
},
“default”: {
“en”: “Links”,
“de”: “Links”,
“es”: “Enlaces”,
“fr”: “Liens”,
“pt-PT”: “Ligações”
}
},
{
“type”: “link_list”,
“id”: “collection_linklist”,
“label”: {
“en”: “Menu”,
“de”: “Menü”,
“es”: “Menú”,
“fr”: “Menu”,
“pt-PT”: “Menu”
},
“default”: “main-menu”
}
]
},
{
“type”: “image”,
“name”: {
“en”: “Image”,
“de”: “Bild”,
“es”: “Imagen”,
“fr”: “Image”,
“pt-PT”: “Imagem”
},
“settings”: [
{
“type”: “image_picker”,
“id”: “collection-sidebar-image”,
“label”: {
“en”: “Image”,
“de”: “Bild”,
“es”: “Imagen”,
“fr”: “Image”,
“pt-PT”: “Imagem”
},
“info”: {
“en”: “300 x 150px recommended”,
“de”: “300 x 150 px empfohlen”,
“es”: “Recomendado 300 x 150 px”,
“fr”: “300 x 150 px recommandé”,
“pt-PT”: “300 x 150px, recomendado”
}
},
{
“type”: “url”,
“id”: “collection-sidebar-link”,
“label”: {
“en”: “Link”,
“de”: “Link”,
“es”: “Enlace”,
“fr”: “Lien”,
“pt-PT”: “Ligação”
},
“info”: {
“en”: “Optional”,
“de”: “Optional”,
“es”: “Opcional”,
“fr”: “Facultatif”,
“pt-PT”: “Opcional”
}
}
]
}
]
}
{% endschema %}
@KetanKumar any suggestions?
@INFINITYCOS change this:
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-6 two_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 3 %}
{%- assign grid_item_width = 'col-6 col-sm-4 col-md-4 three_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 4 %}
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-3 four_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 5 %}
{%- assign grid_item_width = 'col-6 col-sm-6 col-md-2dot4 five_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 6 %}
{%- assign grid_item_width = 'col-6 col-sm-4 col-md-2 six_columns' -%}
{%- assign grid_image_width = '600x600' -%}
Into this:
{%- assign grid_item_width = 'col-12 col-sm-12 col-md-6 two_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 3 %}
{%- assign grid_item_width = 'col-12 col-sm-4 col-md-4 three_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 4 %}
{%- assign grid_item_width = 'col-12 col-sm-12 col-md-3 four_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 5 %}
{%- assign grid_item_width = 'col-21 col-sm-12 col-md-2dot4 five_columns' -%}
{%- assign grid_image_width = '600x600' -%}
{% when 6 %}
{%- assign grid_item_width = 'col-6 col-sm-4 col-md-2 six_columns' -%}
{%- assign grid_image_width = '600x600' -%}