i currently have 2 but want 4 columns on mobile theme DEBUT

i currently have 2 but want 4 columns on mobile theme DEBUT

designdevil
Tourist
10 0 2

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

{%- assign collection = collections[section.settings.collection] -%}

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

<ul class="grid grid--uniform grid--view-items">
{% for product in collection.products limit: product_limit %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}

{% for i in (1..product_limit) %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
<div class="grid-view-item product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
<span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
</a>
<div class="grid-view-item__image-wrapper">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</li>
{% endfor %}
{% endfor %}
</ul>

{% if section.settings.show_view_all %}
<hr class="hr--invisible" aria-hidden="true" />
<div class="text-center">
<a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
{{ 'collections.general.view_all' | t }}
</a>
</div>
{% endif %}

</div>

 

{% schema %}
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Titolo",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Fremhevet samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
}
},
{
"id": "collection",
"type": "collection",
"label": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
},
{
"type": "range",
"id": "grid",
"label": {
"cs": "Počet produktů na řádek",
"da": "Produkter pr. række",
"de": "Produkte pro Reihe",
"en": "Products per row",
"es": "Productos por fila",
"fi": "Tuotteita per rivi",
"fr": "Produits par rangée",
"it": "Prodotti per riga",
"ja": "行あたりの商品数",
"ko": "열 별 제품",
"nb": "Produkter per rad",
"nl": "Producten per rij",
"pl": "Liczba produktów na wiersz",
"pt-BR": "Produtos por linha",
"pt-PT": "Produtos por linha",
"sv": "Produkter per rad",
"th": "สินค้าต่อแถว",
"tr": "Satır başına ürün",
"vi": "Số sản phẩm trên một hàng",
"zh-CN": "每行产品数",
"zh-TW": "每列產品數"
},
"min": 2,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "rows",
"label": {
"cs": "Řádky",
"da": "Rækker",
"de": "Reihen",
"en": "Rows",
"es": "Filas",
"fi": "Rivit",
"fr": "Rangées",
"it": "Righe",
"ja": "行",
"ko": "열",
"nb": "Rader",
"nl": "Rijen",
"pl": "Wiersze",
"pt-BR": "Linhas",
"pt-PT": "Linhas",
"sv": "Rader",
"th": "แถว",
"tr": "Satırlar",
"vi": "Hàng",
"zh-CN": "行数",
"zh-TW": "列"
},
"min": 1,
"max": 5,
"step": 1,
"default": 2
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"cs": "Zobrazit dodavatele produktů",
"da": "Vis produktleverandører",
"de": "Produktanbieter anzeigen",
"en": "Show product vendors",
"es": "Mostrar proveedores del producto",
"fi": "Näytä tuotteen myyjät",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitori prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandører",
"nl": "Productleveranciers weergeven",
"pl": "Pokaż dostawców produktu",
"pt-BR": "Mostrar fabricantes do produto",
"pt-PT": "Mostrar fornecedores do produto",
"sv": "Visa produktleverantörer",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcılarını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
},
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"label": {
"cs": "Zobrazit tlačítko Zobrazit vše",
"da": "Vis knappen \"Se flere\"",
"de": "'Alle anzeigen' Button anzeigen",
"en": "Show 'View all' button",
"es": "Mostrar el botón 'Ver todo'",
"fi": "Näytä \"Näytä kaikki\" -painike",
"fr": "Afficher le bouton “Tout voir”",
"it": "Mostra il pulsante \"Visualizza tutto\"",
"ja": "「すべて表示」ボタンを表示する",
"ko": "'모두 보기' 버튼 표시",
"nb": "Vis «Se alle»-knapp",
"nl": "Knop 'Alles weergeven' weergeven",
"pl": "Pokaż przycisk „Wyświetl wszystkie”",
"pt-BR": "Mostrar botão 'Ver tudo'",
"pt-PT": "Mostrar botão 'Ver tudo'",
"sv": "Visa \"Visa alla\"-knappen",
"th": "แสดงปุ่ม 'ดูทั้งหมด'",
"tr": "\"Tümünü görüntüle\" düğmesini göster",
"vi": "Hiển thị nút \"Xem tất cả\"",
"zh-CN": "显示“查看全部”按钮",
"zh-TW": "顯示「檢視全部」按鈕"
},
"default": false
}
],
"presets": [
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"category": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
}
]
}
{% endschema %}

Replies 4 (4)

Litos
Globetrotter
688 169 150

Hi @designdevil,

Please change code here:

Screenshot.png

Code:

<style>
@media only screen and (max-width: 749px){
	.grid__item--{{section.id}} {
		width: 25% !important;
		clear: initial !important;
	}
}
</style>
<ul class="grid grid--uniform grid--view-items">

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
designdevil
Tourist
10 0 2

should i remove that code? paste after or before?

designdevil
Tourist
10 0 2

WHERE DO I PASTE CODE

Litos
Globetrotter
688 169 150

Hi @designdevil,

Please change all code file:

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

{%- assign collection = collections[section.settings.collection] -%}

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

<style>
@media only screen and (max-width: 749px){
	.grid__item--{{section.id}} {
		width: 25% !important;
		clear: initial !important;
	}
}
</style>
<ul class="grid grid--uniform grid--view-items">
{% for product in collection.products limit: product_limit %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}

{% for i in (1..product_limit) %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
<div class="grid-view-item product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
<span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
</a>
<div class="grid-view-item__image-wrapper">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</li>
{% endfor %}
{% endfor %}
</ul>

{% if section.settings.show_view_all %}
<hr class="hr--invisible" aria-hidden="true" />
<div class="text-center">
<a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
{{ 'collections.general.view_all' | t }}
</a>
</div>
{% endif %}

</div>

 

{% schema %}
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Titolo",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Fremhevet samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
}
},
{
"id": "collection",
"type": "collection",
"label": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
},
{
"type": "range",
"id": "grid",
"label": {
"cs": "Počet produktů na řádek",
"da": "Produkter pr. række",
"de": "Produkte pro Reihe",
"en": "Products per row",
"es": "Productos por fila",
"fi": "Tuotteita per rivi",
"fr": "Produits par rangée",
"it": "Prodotti per riga",
"ja": "行あたりの商品数",
"ko": "열 별 제품",
"nb": "Produkter per rad",
"nl": "Producten per rij",
"pl": "Liczba produktów na wiersz",
"pt-BR": "Produtos por linha",
"pt-PT": "Produtos por linha",
"sv": "Produkter per rad",
"th": "สินค้าต่อแถว",
"tr": "Satır başına ürün",
"vi": "Số sản phẩm trên một hàng",
"zh-CN": "每行产品数",
"zh-TW": "每列產品數"
},
"min": 2,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "rows",
"label": {
"cs": "Řádky",
"da": "Rækker",
"de": "Reihen",
"en": "Rows",
"es": "Filas",
"fi": "Rivit",
"fr": "Rangées",
"it": "Righe",
"ja": "行",
"ko": "열",
"nb": "Rader",
"nl": "Rijen",
"pl": "Wiersze",
"pt-BR": "Linhas",
"pt-PT": "Linhas",
"sv": "Rader",
"th": "แถว",
"tr": "Satırlar",
"vi": "Hàng",
"zh-CN": "行数",
"zh-TW": "列"
},
"min": 1,
"max": 5,
"step": 1,
"default": 2
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"cs": "Zobrazit dodavatele produktů",
"da": "Vis produktleverandører",
"de": "Produktanbieter anzeigen",
"en": "Show product vendors",
"es": "Mostrar proveedores del producto",
"fi": "Näytä tuotteen myyjät",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitori prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandører",
"nl": "Productleveranciers weergeven",
"pl": "Pokaż dostawców produktu",
"pt-BR": "Mostrar fabricantes do produto",
"pt-PT": "Mostrar fornecedores do produto",
"sv": "Visa produktleverantörer",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcılarını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
},
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"label": {
"cs": "Zobrazit tlačítko Zobrazit vše",
"da": "Vis knappen \"Se flere\"",
"de": "'Alle anzeigen' Button anzeigen",
"en": "Show 'View all' button",
"es": "Mostrar el botón 'Ver todo'",
"fi": "Näytä \"Näytä kaikki\" -painike",
"fr": "Afficher le bouton “Tout voir”",
"it": "Mostra il pulsante \"Visualizza tutto\"",
"ja": "「すべて表示」ボタンを表示する",
"ko": "'모두 보기' 버튼 표시",
"nb": "Vis «Se alle»-knapp",
"nl": "Knop 'Alles weergeven' weergeven",
"pl": "Pokaż przycisk „Wyświetl wszystkie”",
"pt-BR": "Mostrar botão 'Ver tudo'",
"pt-PT": "Mostrar botão 'Ver tudo'",
"sv": "Visa \"Visa alla\"-knappen",
"th": "แสดงปุ่ม 'ดูทั้งหมด'",
"tr": "\"Tümünü görüntüle\" düğmesini göster",
"vi": "Hiển thị nút \"Xem tất cả\"",
"zh-CN": "显示“查看全部”按钮",
"zh-TW": "顯示「檢視全部」按鈕"
},
"default": false
}
],
"presets": [
{
"name": {
"cs": "Propagovaná kolekce",
"da": "Udvalgt kollektion",
"de": "Vorgestellte Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fi": "Esittelyssä oleva kokoelma",
"fr": "Collection en vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"ko": "추천 컬렉션",
"nb": "Utvalgt samling",
"nl": "Uitgelichte collectie",
"pl": "Polecana kolekcja",
"pt-BR": "Coleção em destaque",
"pt-PT": "Coleção em destaque",
"sv": "Utvald kollektion",
"th": "คอลเลกชันแนะนำ",
"tr": "Öne çıkan koleksiyon",
"vi": "Bộ sưu tập nổi bật",
"zh-CN": "特色产品系列",
"zh-TW": "精選商品系列"
},
"category": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
}
]
}
{% endschema %}
Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.