How do I add a product grid too homepage?

Store Design
1

Hello,

I am trying to add a product grid to my homepage without changing the entire theme. It seems to only allow me to make collections but would prefer Product grid like the look of Blockshop. My theme is Boundless. Any help to accomplish that look would be appreciated.

Thanks

Ryan

1 Like
2

In Online Store > Themes > Edit Code, under Sections click Add new section

Add this code into that new empty file

.
  {%- for collection in collections -%}
  	{%- for product in collection.products -%}
   	 {%- assign grid_item_width = 'post-large--one-quarter medium--one-quarter small--one-half' -%}
   	 {%- assign product_width = 300 -%}
    	{%- assign featured = product -%}
	
    		

      {% include 'product-grid-item' %}
    	

  	{%- endfor -%}
  {%- endfor -%}

{% schema %}
{
  "name": {
    "en": "Collection Grid"
  },
  "class": "index-section",
  "settings": [
        {
          "type": "collection",
          "id": "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": "商品系列"
          }
        }
      ],
  "presets": [
    {
      "name": {
        "cs": "Propagovaný produkt",
        "da": "Fremhævet produkt",
        "de": "Vorgestelltes Produkt",
        "en": "Product list",
        "es": "Producto destacado",
        "fi": "Esittelyssä oleva tuote",
        "fr": "Produit vedette",
        "it": "Prodotto in primo piano",
        "ja": "おすすめ商品",
        "ko": "특별 상품",
        "nb": "Utvalgt produkt",
        "nl": "Uitgelicht product",
        "pl": "Polecany produkt",
        "pt-BR": "Produto em destaque",
        "pt-PT": "Produto em destaque",
        "sv": "Utvald produkt",
        "th": "สินค้าที่แนะนำ",
        "tr": "Öne çıkan ürün",
        "vi": "Sản phẩm nổi bật",
        "zh-CN": "特色产品",
        "zh-TW": "精選產品"
      },
      "category": {
        "cs": "Produkty",
        "da": "Produkter",
        "de": "Produkte",
        "en": "Products",
        "es": "Productos",
        "fi": "Tuotteet",
        "fr": "Produits",
        "it": "Prodotti",
        "ja": "商品について",
        "ko": "제품",
        "nb": "Produkter",
        "nl": "Producten",
        "pl": "Produkty",
        "pt-BR": "Produtos",
        "pt-PT": "Produtos",
        "sv": "Produkter",
        "th": "สินค้า",
        "tr": "Ürünler",
        "vi": "Sản phẩm",
        "zh-CN": "产品",
        "zh-TW": "產品"
      }
    }
  ]
}
{% endschema %}

Save it

Edit your home page and add the new section that’s called Collection Grid. Select which collection you want to use.

3

Hey,

hope you’re still around. I’ve done this but i cannot see the sections in the list when i go to add (I have refreshed).