Shopify themes, liquid, logos, and UX
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
In Online Store > Themes > Edit Code, under Sections click Add new section
Add this code into that new empty file
<div class="grid-uniform grid-link__container">.
{%- 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 -%}
<div class="grid__item {{ grid_item_width }}">
{% include 'product-grid-item' %}
</div>
{%- endfor -%}
{%- endfor -%}
</div>
{% 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.
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).
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024