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

Solved
Highlighted
Tourist
18 0 0

Hi, 

So I currently have a section called product-features which I want to duplicate to have on my landing page as well. So from what I've read I need to create a dynamic section from the static section using "presets" - although when I do this it comes up with an error for invalid JSON in tag 'schema'.

 

Here is the original section. 

{%- 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 imdb 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."
}
]
}
],
"default": {
"blocks": [
{
"type": "feature",
"settings": {
"title": "Feature 1"
}
},
{
"type": "feature",
"settings": {
"title": "Feature 2"
}
},
{
"type": "feature",
"settings": {
"title": "Feature 3"
}
}
]
}
}
{% endschema %}

The other thing I want to do is add color options to change the text & icons (one option) as well as the background color (another option). 

Any help would be greatly appreciated! 

 

 

0 Likes
Highlighted
Shopify Partner
147 23 30

@maddie_teez Hi,

A dynamic sections can be used for Homepage only. If you plan to use it exactly for Homepage, kindly try next one section code instead of the original:

{%- 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 imdb 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."
}
]
}
],
"default": {
"blocks": [
{
"type": "feature",
"settings": {
"title": "Feature 1"
}
},
{
"type": "feature",
"settings": {
"title": "Feature 2"
}
},
{
"type": "feature",
"settings": {
"title": "Feature 3"
}
}
]
},
"presets": [{}]
}
{% endschema %}

 

0 Likes
Highlighted
Tourist
18 0 0

Hi

Thanks for the speedy reply! 

Unfortunately it's showing an error...

Screen Shot 2020-06-18 at 12.01.09 PM.png

Also is it okay to call the section that or does it need to be another name?

0 Likes
Highlighted
Shopify Partner
147 23 30

@maddie_teez  Yes, you can use the same name for the sections. But it is not recommended since it can lead to confusion with a using theme editor.

Kindly use next one section code instead of the previous 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">
<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 imdb 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": [{}]
}
{% endschema %}

 

0 Likes
Highlighted
Tourist
18 0 0

Thankyou @Sasha2 !!

Unfortunately another issue has popped up....

Screen Shot 2020-06-18 at 12.24.36 PM.png

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 -%}
<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": "Brand 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": [{}]
}
{% endschema %}

0 Likes
Highlighted
Shopify Partner
147 23 30

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 %}
0 Likes
Highlighted
Tourist
18 0 0

Easy! I figured that one out in the end.

Honestly @Sasha2  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...

 

Screen Shot 2020-06-18 at 12.35.39 PM.png

^ so this is the settings panel on the side

Screen Shot 2020-06-18 at 12.35.50 PM.png

^ so this is the output on the page

 

Is there another liquid file i need to amend?

0 Likes
Highlighted
Shopify Partner
147 23 30

@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?

0 Likes
Highlighted
Tourist
18 0 0

Hey @Sasha2 

I figured it out, beneath the comment tag at the top this needs to be added to change the <i> value to <svg> which is a supported update from these guys.

<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg></script>

 

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?

0 Likes
Highlighted
Shopify Partner
147 23 30

This is an accepted solution.

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 %}

 

0 Likes