I want to create a dynamic section from an existing static section.

[maddie_teez]

Thankyou @Alexander-MAS !!

Unfortunately another issue has popped up…

I’ve called the section : brand-features.liquid

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = ‘feature_’ | append: i | append: ‘_enabled’ -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}

{%- comment -%} Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify to which group the icon belongs {%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot bleep instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ’ ’ -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = ‘feature_’ | append: i | append: ‘enabled’ -%}
{%- assign metafield_icon_option = 'feature’ | append: i | append: ‘icon’ -%}
{%- assign metafield_title_option = 'feature’ | append: i | append: ‘title’ -%}
{%- assign metafield_content_option = 'feature’ | append: i | append: ‘_content’ -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}

{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%} {%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%} {%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}

{{ product.metafields.sf_product_features[metafield_title_option] }}

{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}

{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}

{%- endif -%}

{%- endif -%} {%- endfor -%} {%- else -%} {%- for block in section.blocks -%}

{%- if block.settings.icon_name != blank -%} {%- endif -%}

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

{{ block.settings.title }}

{%- endif -%}

{%- if block.settings.content != blank -%}

{{ block.settings.content | strip_html }}

{%- endif -%}

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

{%- endif -%}

{% schema %}
{
“name”: “Brand features”,
“max_blocks”: 6,
“settings”: [
{
“type”: “paragraph”,
“content”: “You can add per-product features using our app SuperFields. Learn more here.”
}
],
“blocks”: [
{
“type”: “feature”,
“name”: “Feature”,
“settings”: [
{
“type”: “text”,
“id”: “icon_name”,
“label”: “Icon name”,
“info”: “Click here to view the list of available icons. Example: bluetooth”,
“default”: “cog”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Default title”
},
{
“type”: “textarea”,
“id”: “content”,
“label”: “Content”,
“default”: “Enter a short text here about the feature of your product.”
}
]
}
],
“presets”: [{}]
}
{% endschema %}

[Alexander-MAS]

Ah, sorry,I have missed preset title.

Here the fixed code:

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = 'feature_' | append: i | append: '_enabled' -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}
<section class="product-features">
<div class="container">
<div class="product-features__list grid grid--huge">
{%- comment -%}
Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify
to which group the icon belongs
{%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot **bleep** instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ' ' -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = 'feature_' | append: i | append: '_enabled' -%}
{%- assign metafield_icon_option = 'feature_' | append: i | append: '_icon' -%}
{%- assign metafield_title_option = 'feature_' | append: i | append: '_title' -%}
{%- assign metafield_content_option = 'feature_' | append: i | append: '_content' -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up">
{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%}
{%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%}
<i class="product-features__icon {% if brand_icons contains icon_name %}fab{% else %}fas{% endif %} fa-{{ icon_name }}"></i>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}
<h3 class="product-features__title text--uppercase">{{ product.metafields.sf_product_features[metafield_title_option] }}</h3>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}
<p class="product-features__content text--respect-break">{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for block in section.blocks -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up" {{ block.shopify_attributes }}>
{%- if block.settings.icon_name != blank -%}
<i class="product-features__icon {% if brand_icons contains block.settings.icon_name %}fab{% else %}fas{% endif %} fa-{{ block.settings.icon_name }}"></i>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3 class="product-features__title text--uppercase">{{ block.settings.title }}</h3>
{%- endif -%}

{%- if block.settings.content != blank -%}
<p class="product-features__content text--respect-break">{{ block.settings.content | strip_html }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}

{% schema %}
{
"name": "Product features",
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "You can add per-product features using our app SuperFields. [Learn more here](http://support.maestrooo.com/article/133-product-adding-per-product-features)."
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "text",
"id": "icon_name",
"label": "Icon name",
"info": "[Click here](https://fortawesome.github.io/Font-Awesome/icons/) to view the list of available icons. Example: bluetooth",
"default": "cog"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Default title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Enter a short text here about the feature of your product."
}
]
}
],
"presets": [{
"name":"Brand features"
}]
}
{% endschema %}

[maddie_teez]

Easy! I figured that one out in the end.

Honestly @Alexander-MAS thank you for all the help!! Sorry to nag but…

So it’s appearing on the homepage which is unreal, and appears good. The only issue is that it’s not showing the icons from the list on the page…

^ so this is the settings panel on the side

^ so this is the output on the page

Is there another liquid file i need to amend?

[Alexander-MAS]

@maddie_teez It can be because for Homepage is not included Icons font.

Can you please share with me your store URL (and theme password if used), so I will able to review the issue more detailed?

[maddie_teez]

Hey @Alexander-MAS

I figured it out, beneath the comment tag at the top this needs to be added to change the value to

One last question (hopefully!),

I want to be able to customise the color for the icon, the title & the content so this will need to be built into the schema section right?

[Alexander-MAS]

Hey @maddie_teez ,

Yes, if you prefer to have customizing elements in your store, you have to provide changes for the schema of your store’s section.

Here the the changed code with an ability to manage color of the Icons, Headers and Contents elements:

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = 'feature_' | append: i | append: '_enabled' -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}
<section class="product-features">
<div class="container">
<div class="product-features__list grid grid--huge">
{%- comment -%}
Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify
to which group the icon belongs
{%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot **bleep** instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ' ' -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = 'feature_' | append: i | append: '_enabled' -%}
{%- assign metafield_icon_option = 'feature_' | append: i | append: '_icon' -%}
{%- assign metafield_title_option = 'feature_' | append: i | append: '_title' -%}
{%- assign metafield_content_option = 'feature_' | append: i | append: '_content' -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up">
{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%}
{%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%}
<i class="product-features__icon {% if brand_icons contains icon_name %}fab{% else %}fas{% endif %} fa-{{ icon_name }}"></i>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}
<h3 class="product-features__title text--uppercase">{{ product.metafields.sf_product_features[metafield_title_option] }}</h3>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}
<p class="product-features__content text--respect-break">{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for block in section.blocks -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up" {{ block.shopify_attributes }}>
{%- if block.settings.icon_name != blank -%}
<i class="product-features__icon {% if brand_icons contains block.settings.icon_name %}fab{% else %}fas{% endif %} fa-{{ block.settings.icon_name }}"
   style="color: {{ section.settings.icon_color }};"></i>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3 class="product-features__title text--uppercase"
   style="color: {{ section.settings.title_color }};">{{ block.settings.title }}</h3>
{%- endif -%}

{%- if block.settings.content != blank -%}
<p class="product-features__content text--respect-break"
   style="color: {{ section.settings.content_color }};">{{ block.settings.content | strip_html }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}

{% schema %}
{
"name": "Product features",
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "You can add per-product features using our app SuperFields. [Learn more here](http://support.maestrooo.com/article/133-product-adding-per-product-features)."
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color"
},
{
"type": "color",
"id": "title_color",
"label": "Title color"
},
{
"type": "color",
"id": "content_color",
"label": "Content color"
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "text",
"id": "icon_name",
"label": "Icon name",
"info": "[Click here](https://fortawesome.github.io/Font-Awesome/icons/) to view the list of available icons. Example: bluetooth",
"default": "cog"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Default title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Enter a short text here about the feature of your product."
}
]
}
],
"presets": [{
"name":"Brand features"
}]
}
{% endschema %}

[maddie_teez]

Unreal! Thankyou @Alexander-MAS Is there a way to change the background color as well??

[Alexander-MAS]

@maddie_teez

You can try to use next one code:

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = 'feature_' | append: i | append: '_enabled' -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}
<section class="product-features">
<div class="container" style="background-color: {{ section.settings.bg_color }};">
<div class="product-features__list grid grid--huge" style="background-color: {{ section.settings.bg_color }};">
{%- comment -%}
Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify
to which group the icon belongs
{%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot **bleep** instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ' ' -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = 'feature_' | append: i | append: '_enabled' -%}
{%- assign metafield_icon_option = 'feature_' | append: i | append: '_icon' -%}
{%- assign metafield_title_option = 'feature_' | append: i | append: '_title' -%}
{%- assign metafield_content_option = 'feature_' | append: i | append: '_content' -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up">
{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%}
{%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%}
<i class="product-features__icon {% if brand_icons contains icon_name %}fab{% else %}fas{% endif %} fa-{{ icon_name }}"></i>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}
<h3 class="product-features__title text--uppercase">{{ product.metafields.sf_product_features[metafield_title_option] }}</h3>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}
<p class="product-features__content text--respect-break">{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for block in section.blocks -%}
<div class="product-features__item grid__cell 1/3--handheld-and-up" {{ block.shopify_attributes }}>
{%- if block.settings.icon_name != blank -%}
<i class="product-features__icon {% if brand_icons contains block.settings.icon_name %}fab{% else %}fas{% endif %} fa-{{ block.settings.icon_name }}"
   style="color: {{ section.settings.icon_color }};"></i>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3 class="product-features__title text--uppercase"
   style="color: {{ section.settings.title_color }};">{{ block.settings.title }}</h3>
{%- endif -%}

{%- if block.settings.content != blank -%}
<p class="product-features__content text--respect-break"
   style="color: {{ section.settings.content_color }};">{{ block.settings.content | strip_html }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}

{% schema %}
{
"name": "Product features",
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "You can add per-product features using our app SuperFields. [Learn more here](http://support.maestrooo.com/article/133-product-adding-per-product-features)."
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color"
},
{
"type": "color",
"id": "title_color",
"label": "Title color"
},
{
"type": "color",
"id": "content_color",
"label": "Content color"
},
{
"type": "color",
"id": "bg_color",
"label": "Background color"
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "text",
"id": "icon_name",
"label": "Icon name",
"info": "[Click here](https://fortawesome.github.io/Font-Awesome/icons/) to view the list of available icons. Example: bluetooth",
"default": "cog"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Default title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Enter a short text here about the feature of your product."
}
]
}
],
"presets": [{
"name":"Brand features"
}]
}
{% endschema %}

Let me know, if the code will require adjustments.

[maddie_teez]

Unreal! works perfectly!!! Thankyou @Alexander-MAS

[maddie_teez]

Hey one more thing @Alexander-MAS , currently the bar sits with 3 icons across, is there a way to make this 4 / 5 across? In another part of the section, i have used grid_items_per_row is this possible to be used again?

Thanks!

[Alexander-MAS]

@maddie_teez Hello,

You can try to use next once changed code:

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = 'feature_' | append: i | append: '_enabled' -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}
<section class="product-features">
<div class="container" style="background-color: {{ section.settings.bg_color }};">
<div class="product-features__list grid grid--huge" style="background-color: {{ section.settings.bg_color }};">
{%- comment -%}
Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify
to which group the icon belongs
{%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot **bleep** instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ' ' -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = 'feature_' | append: i | append: '_enabled' -%}
{%- assign metafield_icon_option = 'feature_' | append: i | append: '_icon' -%}
{%- assign metafield_title_option = 'feature_' | append: i | append: '_title' -%}
{%- assign metafield_content_option = 'feature_' | append: i | append: '_content' -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}
<div class="product-features__item grid__cell 1/{{section.settings.items_per_row}}--handheld-and-up">
{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%}
{%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%}
<i class="product-features__icon {% if brand_icons contains icon_name %}fab{% else %}fas{% endif %} fa-{{ icon_name }}"></i>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}
<h3 class="product-features__title text--uppercase">{{ product.metafields.sf_product_features[metafield_title_option] }}</h3>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}
<p class="product-features__content text--respect-break">{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for block in section.blocks -%}
<div class="product-features__item grid__cell 1/{{section.settings.items_per_row}}--handheld-and-up" {{ block.shopify_attributes }}>
{%- if block.settings.icon_name != blank -%}
<i class="product-features__icon {% if brand_icons contains block.settings.icon_name %}fab{% else %}fas{% endif %} fa-{{ block.settings.icon_name }}"
   style="color: {{ section.settings.icon_color }};"></i>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3 class="product-features__title text--uppercase"
   style="color: {{ section.settings.title_color }};">{{ block.settings.title }}</h3>
{%- endif -%}

{%- if block.settings.content != blank -%}
<p class="product-features__content text--respect-break"
   style="color: {{ section.settings.content_color }};">{{ block.settings.content | strip_html }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}

{% schema %}
{
"name": "Product features",
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "You can add per-product features using our app SuperFields. [Learn more here](http://support.maestrooo.com/article/133-product-adding-per-product-features)."
},
{
"type": "select",
"id": "items_per_row",
"label": "Items per row",
"options": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
},
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
},
],
"default": "3"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color"
},
{
"type": "color",
"id": "title_color",
"label": "Title color"
},
{
"type": "color",
"id": "content_color",
"label": "Content color"
},
{
"type": "color",
"id": "bg_color",
"label": "Background color"
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "text",
"id": "icon_name",
"label": "Icon name",
"info": "[Click here](https://fortawesome.github.io/Font-Awesome/icons/) to view the list of available icons. Example: bluetooth",
"default": "cog"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Default title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Enter a short text here about the feature of your product."
}
]
}
],
"presets": [{
"name":"Brand features"
}]
}
{% endschema %}

[maddie_teez]

Hi @Alexander-MAS , seems like there is an error…

[Alexander-MAS]

@maddie_teez

Ah, my fault, here the correct one:

{%- comment -%}
Trademark integrates with SuperFields app in order to specify unique features per product, instead of relying on global features defined in the theme settings.
The logic is that if there are at least one feature set through the unique features, we use those, otherwise we fallback to the global features.
{%- endcomment -%}

{%- assign has_unique_features = false -%}

{%- for i in (1..6) -%}
{%- assign metafield_option = 'feature_' | append: i | append: '_enabled' -%}

{%- if product.metafields.sf_product_features[metafield_option] == 1 -%}
{%- assign has_unique_features = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if has_unique_features or section.blocks.size > 0 -%}
<section class="product-features">
<div class="container" style="background-color: {{ section.settings.bg_color }};">
<div class="product-features__list grid grid--huge" style="background-color: {{ section.settings.bg_color }};">
{%- comment -%}
Starting from FontAwesome 5.0, they are now splitting the icons into two different namespaces (fa or fab). We therefore have to do a check to verify
to which group the icon belongs
{%- endcomment -%}

{%- capture brand_icons -%}
500px accessible-icon accusoft adn adversal affiliatetheme algolia amazon amilia android angellist angrycreative angular app-store app-store-ios apper apple
apple-pay asymmetrik audible autoprefixer avianex aviato aws bandcamp behance behance-square bimobject bitbucket bitcoin bity black-tie blackberry blogger
blogger-b bluetooth bluetooth-b btc buromobelexperte buysellads cc-amex cc-apple-pay cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa
centercode chrome cloudscale cloudsmith cloudversify codepen codiepie connectdevelop contao cpanel creative-commons css3 css3-alt cuttlefish d-and-d dashcube delicious
deploydog deskpro deviantart digg digital-ocean discord discourse dochub docker draft2digital dribbble dribbble-square dropbox drupal dyalog earlybirds edge ember
empire envira erlang etsy expeditedssl facebook facebook-f facebook-messenger facebook-square firefox first-order firstdraft flickr fly font-awesome
font-awesome-alt font-awesome-flag fonticons fonticons-fi fort-awesome fort-awesome-alt forumbee foursquare free-code-camp freebsd get-pocket gg gg-circle git
git-square github github-alt github-square gitkraken gitlab gitter glide glide-g gofore goodreads goodreads-g google google-drive google-play google-plus google-plus-g
google-plus-square google-wallet gratipay grav gripfire grunt gulp hacker-news hacker-news-square hire-a-helper hooli hotjar houzz html5 hubspot **bleep** instagram
internet-explorer ioxhost itunes itunes-note jenkins joget joomla js js-square jsfiddle keycdn kickstarter kickstarter-k laravel lastfm lastfm-square leanpub less
line linkedin linkedin-in linode linux lyft magento maxcdn medapps medium medium-m medrt meetup microsoft mix mixcloud mizuni modx monero napster nintendo-switch
node node-js npm ns8 nutritionix odnoklassniki odnoklassniki-square opencart openid opera optin-monster osi page4 pagelines palfed patreon paypal periscope phabricator
phoenix-framework pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square playstation product-hunt pushed python qq quora ravelry react rebel
red-river reddit reddit-alien reddit-square rendact renren replyd resolving rocketchat rockrms safari sass schlix scribd searchengin sellcast sellsy servicestack
shirtsinbulk simplybuilt sistrix skyatlas skype slack slack-hash slideshare snapchat snapchat-ghost snapchat-square soundcloud speakap spotify stack-exchange
stack-overflow staylinked steam steam-square steam-symbol sticker-mule strava stripe stripe-s studiovinari stumbleupon stumbleupon-circle superpowers supple
telegram telegram-plane tencent-weibo themeisle trello tripadvisor tumblr tumblr-square twitch twitter twitter-square typo3 uber uikit uniregistry untappd usb
ussunnah vaadin viacoin viadeo viadeo-square viber vimeo vimeo-square vimeo-v vine vk vnv vuejs weibo weixin whatsapp whatsapp-square whmcs wikipedia-w windows
wordpress wordpress-simple wpbeginner wpexplorer wpforms xbox xing xing-square y-combinator yahoo yandex yandex-international yelp yoast youtube
{%- endcapture -%}

{%- assign brand_icons = brand_icons | split: ' ' -%}

{%- if has_unique_features -%}
{%- for i in (1..6) -%}
{%- assign metafield_show_option = 'feature_' | append: i | append: '_enabled' -%}
{%- assign metafield_icon_option = 'feature_' | append: i | append: '_icon' -%}
{%- assign metafield_title_option = 'feature_' | append: i | append: '_title' -%}
{%- assign metafield_content_option = 'feature_' | append: i | append: '_content' -%}

{%- if product.metafields.sf_product_features[metafield_show_option] == 1 -%}
<div class="product-features__item grid__cell 1/{{section.settings.items_per_row}}--handheld-and-up">
{%- if product.metafields.sf_product_features[metafield_icon_option] != blank -%}
{%- assign icon_name = product.metafields.sf_product_features[metafield_icon_option] -%}
<i class="product-features__icon {% if brand_icons contains icon_name %}fab{% else %}fas{% endif %} fa-{{ icon_name }}"></i>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_title_option] != blank -%}
<h3 class="product-features__title text--uppercase">{{ product.metafields.sf_product_features[metafield_title_option] }}</h3>
{%- endif -%}

{%- if product.metafields.sf_product_features[metafield_content_option] != blank -%}
<p class="product-features__content text--respect-break">{{ product.metafields.sf_product_features[metafield_content_option] | strip_html }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for block in section.blocks -%}
<div class="product-features__item grid__cell 1/{{section.settings.items_per_row}}--handheld-and-up" {{ block.shopify_attributes }}>
{%- if block.settings.icon_name != blank -%}
<i class="product-features__icon {% if brand_icons contains block.settings.icon_name %}fab{% else %}fas{% endif %} fa-{{ block.settings.icon_name }}"
   style="color: {{ section.settings.icon_color }};"></i>
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3 class="product-features__title text--uppercase"
   style="color: {{ section.settings.title_color }};">{{ block.settings.title }}</h3>
{%- endif -%}

{%- if block.settings.content != blank -%}
<p class="product-features__content text--respect-break"
   style="color: {{ section.settings.content_color }};">{{ block.settings.content | strip_html }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</section>
{%- endif -%}

{% schema %}
{
"name": "Product features",
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "You can add per-product features using our app SuperFields. [Learn more here](http://support.maestrooo.com/article/133-product-adding-per-product-features)."
},
{
"type": "select",
"id": "items_per_row",
"label": "Items per row",
"options": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
},
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
}
],
"default": "3"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color"
},
{
"type": "color",
"id": "title_color",
"label": "Title color"
},
{
"type": "color",
"id": "content_color",
"label": "Content color"
},
{
"type": "color",
"id": "bg_color",
"label": "Background color"
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "text",
"id": "icon_name",
"label": "Icon name",
"info": "[Click here](https://fortawesome.github.io/Font-Awesome/icons/) to view the list of available icons. Example: bluetooth",
"default": "cog"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Default title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Enter a short text here about the feature of your product."
}
]
}
],
"presets": [{
"name":"Brand features"
}]
}
{% endschema %}

[maddie_teez]

Amazing!! Thanks @Alexander-MAS

[maddie_teez]

Hi one last thing @Alexander-MAS

How would I add customisable hover colors, into the schema as well for the buttons?

Thanks again!!