Error: Invalid block 'product': 'presets' is not a valid attribute
Hello,
I was trying to put a featured product on in one of the pages (not home/landing page).
I'm getting this error,
Can anyone please help me with this. thanks
{% comment %} About {% endcomment %}
<div data-section-id="{{ section.id }}" data-section-type="about-template">
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'banner' -%}
{%- comment -%} Banner Settings {%- endcomment -%}
{%- assign image = block.settings.image -%}
{%- assign height = block.settings.height -%}
{%- assign subheading = block.settings.subheading -%}
{%- assign heading = block.settings.title -%}
{%- assign text = block.settings.text -%}
{%- assign text_position = block.settings.text_position -%}
{%- assign heading_size = block.settings.heading_size -%}
{%- assign text_size = block.settings.text_size -%}
{%- assign color_text = block.settings.color_text -%}
{%- assign color_overlay = block.settings.color_overlay -%}
{%- assign overlay_opacity = block.settings.overlay_opacity | times: 0.01 | round: 2 -%}
<style>
.banner--{{ block.id }} .page-title { color: {{ color_text }}; }
.banner--{{ block.id }} .page-title h1 { color: {{ color_text }} !important; }
.banner--{{ block.id }} .page-title::before { background-color: {{ color_overlay }}; opacity: {{ overlay_opacity }}; }
</style>
<section class="banner banner--{{ block.id }} {% if forloop.index == 1 %}banner--collections{% endif %}" {{ block.shopify_attributes }} data-block="banner" data-header-style="{% if forloop.index == 1 %}index{% endif %}">
<div class="banner-inner banner-padded banner-padded--{{ height }} banner--text-{{ text_position }}">
{%- unless height == 'original-height' -%}
{%- unless image == blank -%}
<div class="banner-img lazyload fade-in" data-bgset="{% include 'bgset', image: image %}" data-sizes="auto" data-parent-fit="cover"></div>
<noscript>
<div class="banner-img" style="background-image:url('{{image | img_url: '1024x' }}'); background-size: cover; background-position: center center; background-repeat: no-repeat;"></div>
</noscript>
{%- else -%}
<div class="banner-img banner-img--placeholder svg-placeholder">
{{- 'image' | placeholder_svg_tag -}}
</div>
{%- endunless -%}
{%- else -%}
{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
{%- include 'theme-rias' -%}
<img class="banner-img--original lazyload fade-in"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt }}">
<noscript>
<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}" class="banner-img--original no-js-image">
</noscript>
{% endunless %}
{%- unless heading == blank and subheading == blank and text == blank -%}
<div class="page-title">
<div class="container">
<div class="row">
{%- if subheading != blank -%}
<h4 class="page-title__subheading subheading-text">{{ subheading }}</h4>
{%- endif -%}
{%- if heading != blank -%}
<h1 class="page-title__heading size--{{ heading_size }}">{{ heading }}</h1>
{%- endif -%}
</div>
{%- if text != blank -%}
<div class="row">
<div class="page-title__text rte size--{{ text_size }}"><p>{{ text }}</p></div>
</div>
{%- endif -%}
</div>
</div>
{%- endunless -%}
</div>
</section>
{%- when 'rich-text' -%}
{%- comment %} settings {%- endcomment -%}
{%- assign id = block.id -%}
{%- assign layout = block.settings.layout -%}
{%- assign subheading = block.settings.subheading -%}
{%- assign title = block.settings.title -%}
{%- assign content = block.settings.content -%}
{%- assign cta = block.settings.cta -%}
{%- assign link = block.settings.link -%}
{%- assign button_style = block.settings.button_style -%}
{%- assign button_position = block.settings.button_position -%}
{%- assign accent_line = block.settings.accent_line -%}
{%- assign accent_line_color = block.settings.accent_line_color -%}
{%- comment -%} Typography {%- endcomment -%}
{%- assign heading_size = block.settings.heading_font_size -%}
{%- assign heading_align = block.settings.heading_align -%}
{%- assign text_size = block.settings.text_font_size -%}
<div {{ block.shopify_attributes }}>
{%- if accent_line_color != blank -%}
<style>
#text-module-{{ id }} .accent-line--straight { background-color: {{ accent_line_color }}; }
#text-module-{{ id }} .accent-line--curved svg path { fill: {{ accent_line_color }}; }
</style>
{%- endif -%}
{%- include 'rich-text' -%}
</div>
{%- when 'product-feature' -%}
{%- assign heading = block.settings.title -%}
{%- assign heading_size = block.settings.heading_font_size -%}
{%- assign text_size = block.settings.text_font_size -%}
{%- assign description = block.settings.description -%}
{%- assign image = block.settings.image -%}
{%- assign image_link = block.settings.image_link -%}
{%- assign button_text = block.settings.button_text -%}
{%- assign button_link = block.settings.button_link -%}
{%- assign button_style = block.settings.button_style -%}
{%- assign blocks_alignment = block.settings.blocks_alignment -%}
{%- assign is_block_odd = block.settings.reverse_layout -%}
<div class="product-features--container pad-sm" {{ block.shopify_attributes }}>
<div class="container">
<div class="row">
{%- include 'product-features__item' -%}
</div>
</div>
</div>
{%- when 'product' -%}
{% comment %} Settings {% endcomment %}
{% assign product = all_products[section.settings.product] %}
{% assign show_reviews = settings.show_reviews %}
{% assign color_swatches = settings.color_swatches %}
{% assign image_position = section.settings.image_position %}
{% assign image_size = section.settings.image_size %}
{% assign arrows = section.settings.product_slideshow_arrows %}
{% assign dots = section.settings.product_slideshow_dots %}
{% if image_position == '1' %}
<style>.shopify-payment-button {margin-left: auto !important; margin-right: auto !important;}</style>
{% endif %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% assign on_sale_class = ' is-sale' %}
{% endif %}
{% if product == blank %}
{% assign onboarding_product = true %}
{% endif %}
{% comment %} Set the layout for the variant images {% endcomment %}
{% for image in product.images %}
{% if forloop.length == 2 %}
{% assign thumbnail_width = 'product-image--100' %}
{% elsif forloop.length == 3 %}
{% assign thumbnail_width = 'product-image--50' %}
{% elsif forloop.length == 4 %}
{% assign thumbnail_width = 'product-image--33' %}
{% else %}
{% assign thumbnail_width = 'product-image--25' %}
{% endif %}
{% assign length = forloop.length %}
{% endfor %}
<section data-section-type="featured-product" data-section-id="{{ section.id }}" class="product container-wrap js-product-template clearfix row featured-product--{{section.id}} js-product-template--{{section.id}} featured-product {% if onboarding_product %}onboarding-product{% endif %}" data-show_reviews="{{ show_reviews }}">
{% unless onboarding_product %}
<span id="product-json" hidden>{{ product | json }}</span>
{% endunless %}
<div class="container">
<div class="row">
<div class="product-layout-{{ image_position }}--images product-layout--{{ image_size }} xxl_s12 xl_s12 lg_s12 s1">
{% comment %} Set the layout for the variant images {% endcomment %}
{% for image in product.images %}
{% if forloop.length <= 2 %}
{% assign thumbnail_width = 'product-image--100' %}
{% elsif forloop.length == 3 %}
{% assign thumbnail_width = 'product-image--50' %}
{% elsif forloop.length == 4 %}
{% assign thumbnail_width = 'product-image--33' %}
{% else %}
{% assign thumbnail_width = 'product-image--25' %}
{% endif %}
{% assign length = forloop.length %}
{% endfor %}
<div class="productImgSlider js-productImgSlider js-productImgContainer" data-gallery="{{ section.settings.image_gallery }}" data-arrows="{{ arrows }}" id="productImgSlider--{{ section.id }}">
{% unless onboarding_product %}
{% for image in product.images %}
<div class="js-slide {{ thumbnail_width }} product-image product-image--fit {% if forloop.length == 1 %}product-image--single{% endif %}{% if forloop.index == 1 %} lazyload{% endif %} fade-in" data-image="{{ image | product_img_url: 'master'}}" data-id="{{ image.id }}" data-bgset="{% include 'bgset', image: image %}" data-sizes="auto" data-parent-fit="contain" data-aspect-ratio="{{ image.aspect_ratio }}">
<a href="{{ product.url }}">
<noscript>
<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
</noscript>
</a>
</div>
{% endfor %}
{% else %}
<div class="product-image product-image--onboarding">
{{ 'product-5' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endunless %}
</div>
{% if product.images.size > 1 %}
<div class="productImgSlider-nav js-productImgSlider-nav">
{% for image in product.images %}
{% assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' %}
{% include 'theme-rias' %}
<div class="js-slide {{ thumbnail_width }} product-image-thumb" data-image="{{ image | product_img_url: 'master'}}">
<img
class="lazyload fade-in product-image-thumb-img"
data-src="{{ image_url_pattern }}"
data-widths= "[{{ image_widths }}]"
data-aspectratio="{{image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
itemprop="image"
>
<noscript>
<img src="{{ image | img_url: '1024x' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<!-- end product-images -->
<div class="product-info js-product-info product-layout-{{ image_position }}--info xxl_s12 xl_s12 lg_s12 s1">
<div class="product-info__wrapper">
{%- unless onboarding_product -%}
<div class="product-title__wrapper block s1">
<h2 itemprop="name" class="product-title"><a href="{{ product.url }}">{{ product.title }}</a></h2>
{%- include 'product-price' -%}
{%- if show_reviews -%}
<div class="product__badge">
{%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
<div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
{%- else -%}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- endif -%}
</div>
{%- endif -%}
</div>
<div class="product-form block s1">
{% form 'product', product, class:'productForm', data-color_swatches: color_swatches, data-product_id: product.id %}
<div class="productForm-block productForm-block--options-inline {% if color_swatches == true %}productForm-block--swatches is-loading{% endif %}">
{% if product.available and product.variants.size > 1 and color_swatches %}
{% include 'swatch' with 'Color' %}
{% endif %}
<select id="product-select--{{ section.id }}" name="id">
{% for variant in product.variants %}
<option{% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}" data-sku="{{variant.sku}}">
{{ variant.title }} - {{ variant.price | money | strip_html }}
</option>
{% endfor %}
</select>
</div>
<div class="productForm-block">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
{% if section.settings.show_quantity %}
<div class="qty__adjust">
<input type="number" name="quantity" id="quantity" value="1" min="1">
<span class="qty__adjust-btn js-qty__adjust-btn decrease">-</span>
<span class="qty__adjust-btn js-qty__adjust-btn increase">+</span>
</div>
{% endif %}
<div>
<button class="productForm-submit js-productForm-submit {% if settings.enable_payment_button %}add-to-cart-btn-style{% endif %}" data-ajax="{{ settings.enable_ajax_cart }}" type="submit" data-handle="{{product.handle}}">{{ 'products.form.submit' | t }}</button>
</div>
{% if settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
<div class="product-container">
<div class="product-description rte">{{ product.description }}</div>
</div>
{% if settings.share_on_facebook or settings.share_on_twitter or settings.share_on_pinterest %}
<div class="product-share">
<span class="socialBar p">{% include 'site-shareLinks' %}</span>
</div>
{% endif %}
</div>
{%- else -%}
<div class="product-title__wrapper block s1">
<h2 itemprop="name" class="product-title">{{ 'onboarding.product_title' | t }}</h2>
<div class="product-price">{{ 9900 | money }}</div>
{%- if show_reviews or settings.enable_yotpo and settings.yotpo_ID != '' -%}
<div class="product__badge">
<span class="spr-badge" data-rating="0.0">
<span class="spr-starrating spr-badge-starrating">
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
</span>
</span>
</div>
{%- endif -%}
</div>
<div class="product-form block s1">
{%- include 'pseudoform' -%}
<div class="product-container">
<div class="product-description rte">{{ 'onboarding.product_description' | t }}</div>
</div>
{% if settings.share_on_facebook or settings.share_on_twitter or settings.share_on_pinterest %}
<div class="product-share">
<span class="socialBar p">{% include 'site-shareLinks' %}</span>
</div>
{% endif %}
</div>
{%- endunless -%}
</div>
</div>
</div>
</div>
</section>
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
{%- if section.settings.show_page_title -%}
<section class="page-title container-wrap">
<div class="container">
<h1>{{ page.title }}</h1>
</div>
</section>
{%- endif -%}
{%- if page.content != blank -%}
<div class="container-wrap">
<div class="container content-about text-content row">
<div class="row row-sm rte">
{{- page.content -}}
</div>
</div>
</div>
{%- endif %}
</div>
{% schema %}
{
"name": "About page",
"settings": [
{
"type": "checkbox",
"id": "show_page_title",
"label": "Show page title",
"default": false
}
],
"blocks": [
{
"type": "banner",
"name": "Banner",
"limit": 3,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "height",
"label": "Height",
"options": [
{
"value": "one-hundred",
"label": "Full screen height"
},
{
"value": "original-height",
"label": "Image height"
},
{
"value": "big",
"label": "750px"
},
{
"value": "normal",
"label": "650px"
},
{
"value": "small",
"label": "550px"
}
],
"default": "normal"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Welcome to Modular"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>A unique layout with a striking design</p>"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"default": "center",
"options": [
{ "label": "Left", "value": "left" },
{ "label": "Center", "value": "center" },
{ "label": "Right", "value": "right" },
{ "label": "Bottom left", "value": "bottom-left" },
{ "label": "Bottom right", "value": "bottom-right" }
]
},
{
"type": "header",
"content": "Typography"
},
{
"type": "select",
"id": "heading_size",
"label": "Heading size",
"default": "normal",
"options": [
{ "label": "Small", "value": "small" },
{ "label": "Normal", "value": "normal" },
{ "label": "Large", "value": "large" },
{ "label": "Extra large", "value": "xlarge" }
]
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "normal",
"options": [
{ "label": "Small", "value": "small" },
{ "label": "Normal", "value": "normal" },
{ "label": "Large", "value": "large" },
{ "label": "Extra large", "value": "xlarge" }
]
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "color_text",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "color_overlay",
"label": "Overlay",
"default": "#222222"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"step": 1,
"max": 100,
"min": 0,
"unit": "%",
"default": 10
}
]
},
{
"type": "rich-text",
"name": "Rich text",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "layout",
"label": "Text position",
"default": "default",
"options": [
{ "label": "Stacked", "value": "default" },
{ "label": "Split", "value": "split" }
]
},
{
"type": "select",
"id": "heading_align",
"label": "Heading alignment",
"default": "left",
"options": [
{ "label": "Left", "value": "left" },
{ "label": "Center", "value": "center" },
{ "label": "Right", "value": "right" }
]
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading size",
"unit": "px",
"step": 4,
"min": 24,
"max": 44,
"default": 28
},
{
"type": "range",
"id": "text_font_size",
"label": "Text size",
"unit": "px",
"step": 2,
"min": 12,
"max": 22,
"default": 16
},
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Describe your products or brand in detail here"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "<p>Modular is a powerful Shopify theme that will set you apart from the rest. It features ample space to showcase your imagery with Mosaic, Image with text, and Slideshow sections.</p>"
},
{
"type": "select",
"id": "accent_line",
"label": "Accent line",
"default": "curved",
"options": [
{ "label": "Curved", "value": "curved" },
{ "label": "Straight", "value": "straight" },
{ "label": "None", "value": "none" }
]
},
{
"type": "color",
"id": "accent_line_color",
"label": "Color",
"default": "#333"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "cta",
"label": "Label"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "primary",
"options": [
{ "label": "Primary", "value": "primary" },
{ "label": "Light", "value": "light" }
]
},
{
"type": "select",
"id": "button_position",
"label": "Position",
"default": "left",
"options": [
{ "label": "Under heading", "value": "left" },
{ "label": "Under text", "value": "right" },
{ "label": "Bottom", "value": "center" }
]
}
]
},
{
"type": "product-feature",
"name": "Product feature",
"settings": [
{
"type": "header",
"content": "Text"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "This is a heading for a Product feature block."
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Use this text to share information about the point put forth above. Describe a product, your brand, or what makes you special.</p>"
},
{
"type": "header",
"content": "Images"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_text",
"label": "Text"
},
{
"type": "url",
"id": "button_link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "primary",
"options": [
{ "label": "Primary", "value": "primary" },
{ "label": "Light", "value": "light" }
]
},
{
"type": "header",
"content": "Blocks Alignment"
},
{
"type": "select",
"id": "blocks_alignment",
"label": "Text alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "top",
"label": "Top"
}
]
},
{
"type": "checkbox",
"id": "reverse_layout",
"label": "Reverse layout",
"default": false
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading size",
"unit": "px",
"step": 4,
"min": 24,
"max": 44,
"default": 28
},
{
"type": "range",
"id": "text_font_size",
"label": "Text size",
"min": 12,
"max": 22,
"step": 2,
"unit": "px",
"default": 14
}
]
},
{
"type": "product",
"name": "Featured product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "select",
"id": "image_position",
"label": "Image position",
"options": [{
"value": "1",
"label": "Top"
},
{
"value": "4",
"label": "Left"
}
],
"default": "4"
},
{
"type": "select",
"id": "image_size",
"label": "Image size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "product_slideshow_arrows",
"label": "Show slide navigation arrows",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity",
"label": "Show quantity dropdown",
"default": true
}
]
,
"presets": [
{
"name": "Featured product",
"category": "product"
}
]
}
]
}
{% endschema %}
Community Blog Articles
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025