Photos

{% comment %} Section: products-showcase.liquid Purpose: Drop this section onto any custom Page in the Theme Editor to showcase products from a chosen collection with a clean, responsive grid and optional quick add. Notes: - Works in Online Store 2.0 themes (sections everywhere). - Pagination is server-side using the `paginate` tag. - "Quick add" uses the product's first available variant (common pattern). For complex products, link to product page. {% endcomment %}

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

{{ section.settings.title | escape }}

Select a collection in the section settings to display products here.

{%- else -%}

{%- if section.settings.title != blank -%}

{{ section.settings.title | escape }}

{%- endif -%} {%- liquid assign per_page = section.settings.per_page | default: 12 if per_page < 2 assign per_page = 2 endif -%} {%- paginate coll.products by per_page -%}

{%- for product in coll.products -%}

{%- assign img = product.featured_media | default: product.featured_image -%} {%- if img -%}

{%- else -%}

No image

{%- endif -%}

{%- if section.settings.show_vendor and product.vendor != blank -%}

{{ product.vendor }}

{%- endif -%}

{{ product.title }}

{%- if product.compare_at_price_max > product.price -%} {{ product.price | money }} {{ product.compare_at_price_max | money }} {%- if section.settings.show_badge -%} {{ section.settings.badge_text }} {%- endif -%} {%- else -%} {{ product.price | money }} {%- endif -%}

{%- if section.settings.show_quick_add -%} {%- assign first_available = product.first_available_variant -%} {%- if first_available -%}

{{ section.settings.quick_add_label }}

{%- else -%} View options {%- endif -%} {%- endif -%}

{%- endfor -%}

{%- if paginate.pages > 1 -%} {%- endif -%} {%- endpaginate -%}

{%- endif -%}

{% schema %} { "name": "Products Showcase", "tag": "section", "class": "section-products-showcase", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Explore Our Products" }, { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "range", "id": "per_page", "label": "Products per page", "min": 2, "max": 48, "step": 2, "default": 12 }, { "type": "select", "id": "columns_desktop", "label": "Columns (desktop)", "default": "4", "options": [ {"value": "2", "label": "2"}, {"value": "3", "label": "3"}, {"value": "4", "label": "4"}, {"value": "5", "label": "5"} ] }, { "type": "select", "id": "columns_mobile", "label": "Columns (mobile)", "default": "2", "options": [ {"value": "1", "label": "1"}, {"value": "2", "label": "2"}, {"value": "3", "label": "3"} ] }, { "type": "select", "id": "aspect", "label": "Image aspect ratio", "default": "square", "options": [ {"value": "square", "label": "Square (1:1)"}, {"value": "portrait", "label": "Portrait (4:5)"}, {"value": "landscape", "label": "Landscape (4:3)"} ] }, { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false }, { "type": "checkbox", "id": "show_badge", "label": "Show discount badge when on sale", "default": true }, { "type": "text", "id": "badge_text", "label": "Badge text", "default": "Sale" }, { "type": "checkbox", "id": "show_quick_add", "label": "Show quick add button", "default": true }, { "type": "text", "id": "quick_add_label", "label": "Quick add label", "default": "Add to cart" }, { "type": "range", "id": "gap", "label": "Grid gap (px)", "min": 0, "max": 40, "step": 2, "default": 16 }, { "type": "range", "id": "card_padding", "label": "Card padding (px)", "min": 8, "max": 28, "step": 2, "default": 14 } ], "presets": [ { "name": "Products Showcase", "category": "Products" } ] } {% endschema %} {% javascript %} /* No JavaScript required; everything is server-rendered and progressively enhanced. */ {% endjavascript %}