Name of the post

{% liquid
assign products_limit = section.settings.products_limit
assign selected_collection = section.settings.collection
%}

{% if section.settings.heading != blank %}

{{ section.settings.heading }}

{% endif %}

{% if selected_collection != blank %}
{% for product in selected_collection.products limit: products_limit %}
{% liquid
assign fu_subtitle = blank
assign fu_rating = blank
assign fu_reviews = blank
assign fu_reviews_number = 0
assign fu_has_reviews = false

assign fu_title_limit = section.settings.title_limit | default: 65
assign fu_card_title = product.title | strip

if fu_card_title.size > fu_title_limit
assign fu_card_title = fu_card_title | truncate: fu_title_limit, '...'
endif

if product.metafields.custom.card_subtitle != blank
assign fu_subtitle = product.metafields.custom.card_subtitle.value
elsif product.metafields.custom.subtitle != blank
assign fu_subtitle = product.metafields.custom.subtitle.value
elsif product.metafields.custom.device_compatibility != blank
assign fu_subtitle = product.metafields.custom.device_compatibility.value
elsif product.metafields.custom.compatibility != blank
assign fu_subtitle = product.metafields.custom.compatibility.value
endif

if product.metafields.reviews.rating.value != blank
assign fu_rating = product.metafields.reviews.rating.value.rating | round: 1
elsif product.metafields.custom.rating != blank
assign fu_rating = product.metafields.custom.rating.value
endif

if product.metafields.reviews.rating_count != blank
assign fu_reviews = product.metafields.reviews.rating_count.value
elsif product.metafields.custom.review_count != blank
assign fu_reviews = product.metafields.custom.review_count.value
elsif product.metafields.custom.reviews_count != blank
assign fu_reviews = product.metafields.custom.reviews_count.value
endif

if fu_reviews != blank
assign fu_reviews_number = fu_reviews | plus: 0
endif

if fu_reviews_number > 0
assign fu_has_reviews = true
endif

assign color_option = blank
assign color_option_position = blank

for option in product.options_with_values
assign option_name = option.name | downcase
if option_name contains 'color' or option_name contains 'colour'
assign color_option = option
assign color_option_position = option.position
break
endif
endfor

assign first_variant = product.selected_or_first_available_variant
assign fu_discount_percent = 0

if product.compare_at_price > product.price and product.compare_at_price > 0
assign fu_discount_amount = product.compare_at_price | minus: product.price
assign fu_discount_percent = fu_discount_amount | times: 100 | divided_by: product.compare_at_price | round
endif
%}

{% if product.featured_image != blank %}
{{
product.featured_image
| image_url: width: 900
| image_tag:
loading: 'lazy',
widths: '320, 480, 640, 720, 900',
sizes: '(max-width: 749px) calc(50vw - 19px), (max-width: 1199px) calc(50vw - 42px), 330px',
class: 'fu-product-card__image',
alt: product.title,
data-fu-card-image: ''
}}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'fu-product-card__image fu-product-card__image--placeholder' }}
{% endif %}

{% if fu_discount_percent > 0 %}

{{ fu_discount_percent }}% OFF

{% endif %}

{% if color_option != blank %}

{% for value in color_option.values limit: section.settings.swatches_limit %}
{% liquid
assign value_label = value.name | default: value
assign value_name = value_label | downcase
assign swatch_bg = '#d9d9d9'
assign swatch_variant = blank
assign swatch_image = blank

if value.swatch.color != blank
assign swatch_bg = value.swatch.color
elsif value_name contains 'black'
assign swatch_bg = '#050505'
elsif value_name contains 'white'
assign swatch_bg = '#f3f3f3'
elsif value_name contains 'blue'
assign swatch_bg = '#587198'
elsif value_name contains 'orange'
assign swatch_bg = '#de7833'
elsif value_name contains 'grey' or value_name contains 'gray'
assign swatch_bg = '#8b8d8c'
elsif value_name contains 'green'
assign swatch_bg = '#6e857a'
elsif value_name contains 'brown'
assign swatch_bg = '#a7672b'
elsif value_name contains 'gold'
assign swatch_bg = '#b89a68'
elsif value_name contains 'red'
assign swatch_bg = '#b9312d'
elsif value_name contains 'purple'
assign swatch_bg = '#76548f'
elsif value_name contains 'pink'
assign swatch_bg = '#d799aa'
endif

for variant in product.variants
assign matched_variant = false

if color_option_position == 1 and variant.option1 == value_label
assign matched_variant = true
elsif color_option_position == 2 and variant.option2 == value_label
assign matched_variant = true
elsif color_option_position == 3 and variant.option3 == value_label
assign matched_variant = true
endif

if matched_variant
if swatch_variant == blank
assign swatch_variant = variant
endif

if variant.available
assign swatch_variant = variant
break
endif
endif
endfor

if swatch_variant.featured_media.preview_image != blank
assign swatch_image = swatch_variant.featured_media.preview_image
elsif swatch_variant.image != blank
assign swatch_image = swatch_variant.image
elsif product.featured_image != blank
assign swatch_image = product.featured_image
endif
%}

{% endfor %}

{% endif %}

{{ fu_card_title }}

{% if fu_subtitle != blank %}
{{ fu_subtitle }}
{% endif %}

{% if fu_has_reviews %}

{% if fu_rating != blank %}
{{ fu_rating }}
{% else %}
0
{% endif %}
★
|

{{ fu_reviews_number }}
{% if fu_reviews_number == 1 %}
Review
{% else %}
Reviews
{% endif %}


{% endif %}

{% if product.price_varies %}
From {{ product.price | money_without_trailing_zeros }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% if product.compare_at_price > product.price %}

MRP {{ product.compare_at_price | money_without_trailing_zeros }}

{% endif %}

{% if first_variant != blank %}
{%- form 'product', product, class: 'fu-product-card__form', data-type: 'add-to-cart-form' -%}


{% if product.available %}
ADD TO CART
{% else %}
SOLD OUT
{% endif %}

{%- endform -%}
{% endif %}


{% else %}
{% for i in (1..4) %}



{{ 'product-1' | placeholder_svg_tag: 'fu-product-card__image fu-product-card__image--placeholder' }}

35% OFF

Product title
For iPhone

4.6
★
|
200 Reviews



₹1,299
MRP ₹1,999


ADD TO CART


{% endfor %}
{% endfor %}
{% else %}
{% for i in (1..4) %}



{{ 'product-1' | placeholder_svg_tag: 'fu-product-card__image fu-product-card__image--placeholder' }}

35% OFF

Product title
For iPhone

4.6
★
|
200 Reviews



₹1,299
MRP ₹1,999


ADD TO CART


{% endfor %}
{% endif %}

{% schema %}
{
"name": "FU Product Grid",
"class": "fu-product-grid-shopify-section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "text",
"id": "heading",
"label": "Title",
"default": "Shop Our Bestsellers"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Title alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "products_limit",
"label": "Products limit",
"min": 2,
"max": 24,
"step": 1,
"default": 8
},
{
"type": "range",
"id": "title_limit",
"label": "Product title character limit",
"min": 50,
"max": 80,
"step": 1,
"default": 65
},
{
"type": "range",
"id": "swatches_limit",
"label": "Swatches limit",
"min": 1,
"max": 6,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "max_width",
"label": "Section max width",
"min": 1100,
"max": 1800,
"step": 20,
"unit": "px",
"default": 1440
},
{
"type": "range",
"id": "desktop_columns",
"label": "Desktop columns",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "desktop_gap",
"label": "Desktop card gap",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "heading_size",
"label": "Desktop title size",
"min": 24,
"max": 72,
"step": 1,
"unit": "px",
"default": 48
},
{
"type": "range",
"id": "mobile_heading_size",
"label": "Mobile title size",
"min": 20,
"max": 44,
"step": 1,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "heading_bottom_gap",
"label": "Desktop title bottom gap",
"min": 12,
"max": 80,
"step": 1,
"unit": "px",
"default": 34
},
{
"type": "range",
"id": "mobile_heading_bottom_gap",
"label": "Mobile title bottom gap",
"min": 10,
"max": 50,
"step": 1,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "product_title_size",
"label": "Desktop product title size",
"min": 14,
"max": 26,
"step": 1,
"unit": "px",
"default": 18
},
{
"type": "range",
"id": "selling_price_size",
"label": "Desktop selling price size",
"min": 14,
"max": 30,
"step": 1,
"unit": "px",
"default": 18
},
{
"type": "range",
"id": "regular_price_size",
"label": "Desktop regular price size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"default": 15
},
{
"type": "range",
"id": "desktop_side_padding",
"label": "Desktop side padding",
"min": 0,
"max": 80,
"step": 2,
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "mobile_side_padding",
"label": "Mobile side padding",
"min": 6,
"max": 24,
"step": 1,
"unit": "px",
"default": 10
},
{
"type": "range",
"id": "padding_top",
"label": "Desktop top padding",
"min": 0,
"max": 120,
"step": 2,
"unit": "px",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"label": "Desktop bottom padding",
"min": 0,
"max": 140,
"step": 2,
"unit": "px",
"default": 46
},
{
"type": "range",
"id": "mobile_padding_top",
"label": "Mobile top padding",
"min": 0,
"max": 90,
"step": 2,
"unit": "px",
"default": 26
},
{
"type": "range",
"id": "mobile_padding_bottom",
"label": "Mobile bottom padding",
"min": 0,
"max": 90,
"step": 2,
"unit": "px",
"default": 34
}
],
"presets": [
{
"name": "FU Product Grid"
}
]
}
{% endschema %}