Solved

How to add a header to feature products section?

GameDaySports
Tourist
4 0 3

Hi guys

 

I'm able to have headers for Featured Collections and Featured Promotions on my store but not Featured Products.

Anyone know how to add a Header option for Featured Products?

 

Thanks

Accepted Solution (1)
KetanKumar
Shopify Partner
36835 3635 11966

This is an accepted solution.

@GameDaySports 

can you please try this code

 

{% comment %}
** Featured products - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% if section.settings.title != blank %}
<div class="container">
<div class="sixteen columns center">
<h2 class="title">
{{ section.settings.title }}
</h2> <
div class="feature_divider"></div></div>
</div>
{% endif %}

{% if section.blocks.size > 0 %}
<section class="collection-in-detail">
<div class="clearfix frontpage_product_stagger--{{ section.settings.frontpage_product_stagger }}" itemtype="http://schema.org/ItemList">
{% for block in section.blocks %}
{%- assign product = all_products[block.settings.featured_product] -%}

{%- assign collection_handles = product.collections | map: 'handle' -%}
{% if product.empty? %}
{%- assign section_onboarding = true -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}

<div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product"
class="product-{{ product.id }} section clearfix product_section slideshow_animation--{{section.settings.slideshow_animation}}"
data-slideshow-animation="{{section.settings.slideshow_animation}}"
data-block-id="{{block.id}}"
{{ block.shopify_attributes }}>

<div class="product-images half">
{% if section_onboarding %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
{% else %}
{% include 'product-images', image_width: 'full' %}
{% endif %}
</div>

<div class="product-details half">
{% if section_onboarding %}
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">Vendor name</span>
</p>
{% endif %}

<h2 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ 'homepage.onboarding.product_title' | t }}</a>
</h2>
<div class="feature_divider"></div>
{% else %}

{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}

{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
<h1 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ product.title }}</a>
</h1>

{% if settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>

{% endif %}

{% if section_onboarding %}
<p class="modal_price" itemscope itemtype="http://schema.org/Offer">
<span class="current_price">
<span class="money">$49.00</span>
</span>
</p>
{% else %}
{% assign product_tags = product.tags | join: ' ' %}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="#size-chart{{product.id}}" class="size_chart" data-remodal-target="size-chart{{product.id}}">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% include 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="#size-chart" class="size_chart" data-remodal-target="size-chart">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}

{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
{% assign variant = product.selected_or_first_available_variant %}
<p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" content="New" />

<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>

{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price and variant.available %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
</span>
{% endif %}
</p>

{% include 'product-notify-me' %}
{% endif %}
{% endif %}

{% if section.settings.product_description_position == "top" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}

{% if section_onboarding %}
<form>
<button type="submit" name="add" class="action_button add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
</form>
{% else %}
{% unless collection_handles contains 'coming-soon' %}
<div class="js-product_section product_section">
{% include 'product-form' with 'product' %}
</div>
{% endunless %}
{% endif %}

{% if section.settings.product_description_position == "bottom" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description bottom" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description bottom" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}

{% schema %}
{
"name": "Featured products",
"class": "featured-products-section",
"max_blocks": 12,
"settings": [
{
"type": "checkbox",
"id": "frontpage_product_stagger",
"label": "Stagger products left and right",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured Product"
},
{
"type": "header",
"content": "Image"
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows on product gallery"
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "checkbox",
"id": "activate_autoplay",
"label": "Enable product gallery slideshow"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "header",
"content": "Product info"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "checkbox",
"id": "frontpage_display_description",
"label": "Show product description",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
}
],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "featured_product",
"label": "Product"
}
]
}
],
"presets": [{
"name": "Featured products",
"category": "Product",
"settings": {
},
"blocks": [
{
"type": "product"
},
{
"type": "product"
}
]
}]
}
{% endschema %}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36835 3635 11966

@GameDaySports 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GameDaySports
Tourist
4 0 3

Thanks @KetanKumar 

 

https://gamedaysportswear.co.uk/

 

If you scroll down to "Our Collections", I want to create the same structure heading above the first feature item which is currently "NEW MEN'S RUNNING SHORTS 2 IN 1 SPORTS SHORTS".

On the Shopify editor pages, the Header option is automatically available on the other sections but not for Feature Product.

 

Welcome your thoughts.

 

Cheers

KetanKumar
Shopify Partner
36835 3635 11966

@GameDaySports 

yes, please share Feature Product section code so i will add code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GameDaySports
Tourist
4 0 3

Thanks @KetanKumar 

I believe the code is of the standard Shopify templates. See below for Featured Product Code.

Attached a couple of screen shots of the templates also.

Many thanks in advance.

 

{% comment %}
** Featured products - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% if section.blocks.size > 0 %}
<section class="collection-in-detail">
<div class="clearfix frontpage_product_stagger--{{ section.settings.frontpage_product_stagger }}" itemtype="http://schema.org/ItemList">
{% for block in section.blocks %}
{%- assign product = all_products[block.settings.featured_product] -%}

{%- assign collection_handles = product.collections | map: 'handle' -%}
{% if product.empty? %}
{%- assign section_onboarding = true -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}

<div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product"
class="product-{{ product.id }} section clearfix product_section slideshow_animation--{{section.settings.slideshow_animation}}"
data-slideshow-animation="{{section.settings.slideshow_animation}}"
data-block-id="{{block.id}}"
{{ block.shopify_attributes }}>

<div class="product-images half">
{% if section_onboarding %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
{% else %}
{% include 'product-images', image_width: 'full' %}
{% endif %}
</div>

<div class="product-details half">
{% if section_onboarding %}
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">Vendor name</span>
</p>
{% endif %}

<h2 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ 'homepage.onboarding.product_title' | t }}</a>
</h2>
<div class="feature_divider"></div>
{% else %}

{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}

{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
<h1 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ product.title }}</a>
</h1>

{% if settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>

{% endif %}

{% if section_onboarding %}
<p class="modal_price" itemscope itemtype="http://schema.org/Offer">
<span class="current_price">
<span class="money">$49.00</span>
</span>
</p>
{% else %}
{% assign product_tags = product.tags | join: ' ' %}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="#size-chart{{product.id}}" class="size_chart" data-remodal-target="size-chart{{product.id}}">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% include 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="#size-chart" class="size_chart" data-remodal-target="size-chart">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}

{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
{% assign variant = product.selected_or_first_available_variant %}
<p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" content="New" />

<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>

{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price and variant.available %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
</span>
{% endif %}
</p>

{% include 'product-notify-me' %}
{% endif %}
{% endif %}

{% if section.settings.product_description_position == "top" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}

{% if section_onboarding %}
<form>
<button type="submit" name="add" class="action_button add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
</form>
{% else %}
{% unless collection_handles contains 'coming-soon' %}
<div class="js-product_section product_section">
{% include 'product-form' with 'product' %}
</div>
{% endunless %}
{% endif %}

{% if section.settings.product_description_position == "bottom" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description bottom" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description bottom" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}

{% schema %}
{
"name": "Featured products",
"class": "featured-products-section",
"max_blocks": 12,
"settings": [
{
"type": "checkbox",
"id": "frontpage_product_stagger",
"label": "Stagger products left and right",
"default": true
},
{
"type": "header",
"content": "Image"
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows on product gallery"
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "checkbox",
"id": "activate_autoplay",
"label": "Enable product gallery slideshow"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "header",
"content": "Product info"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "checkbox",
"id": "frontpage_display_description",
"label": "Show product description",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
}
],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "featured_product",
"label": "Product"
}
]
}
],
"presets": [{
"name": "Featured products",
"category": "Product",
"settings": {
},
"blocks": [
{
"type": "product"
},
{
"type": "product"
}
]
}]
}
{% endschema %}

KetanKumar
Shopify Partner
36835 3635 11966

This is an accepted solution.

@GameDaySports 

can you please try this code

 

{% comment %}
** Featured products - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% if section.settings.title != blank %}
<div class="container">
<div class="sixteen columns center">
<h2 class="title">
{{ section.settings.title }}
</h2> <
div class="feature_divider"></div></div>
</div>
{% endif %}

{% if section.blocks.size > 0 %}
<section class="collection-in-detail">
<div class="clearfix frontpage_product_stagger--{{ section.settings.frontpage_product_stagger }}" itemtype="http://schema.org/ItemList">
{% for block in section.blocks %}
{%- assign product = all_products[block.settings.featured_product] -%}

{%- assign collection_handles = product.collections | map: 'handle' -%}
{% if product.empty? %}
{%- assign section_onboarding = true -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}

<div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product"
class="product-{{ product.id }} section clearfix product_section slideshow_animation--{{section.settings.slideshow_animation}}"
data-slideshow-animation="{{section.settings.slideshow_animation}}"
data-block-id="{{block.id}}"
{{ block.shopify_attributes }}>

<div class="product-images half">
{% if section_onboarding %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
{% else %}
{% include 'product-images', image_width: 'full' %}
{% endif %}
</div>

<div class="product-details half">
{% if section_onboarding %}
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">Vendor name</span>
</p>
{% endif %}

<h2 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ 'homepage.onboarding.product_title' | t }}</a>
</h2>
<div class="feature_divider"></div>
{% else %}

{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}

{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
<h1 class="product_name" itemprop="name">
<a href="{{ product.url }}">{{ product.title }}</a>
</h1>

{% if settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>

{% endif %}

{% if section_onboarding %}
<p class="modal_price" itemscope itemtype="http://schema.org/Offer">
<span class="current_price">
<span class="money">$49.00</span>
</span>
</p>
{% else %}
{% assign product_tags = product.tags | join: ' ' %}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="#size-chart{{product.id}}" class="size_chart" data-remodal-target="size-chart{{product.id}}">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% include 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="#size-chart" class="size_chart" data-remodal-target="size-chart">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}

{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
{% assign variant = product.selected_or_first_available_variant %}
<p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" content="New" />

<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>

{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price and variant.available %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
</span>
{% endif %}
</p>

{% include 'product-notify-me' %}
{% endif %}
{% endif %}

{% if section.settings.product_description_position == "top" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}

{% if section_onboarding %}
<form>
<button type="submit" name="add" class="action_button add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
</form>
{% else %}
{% unless collection_handles contains 'coming-soon' %}
<div class="js-product_section product_section">
{% include 'product-form' with 'product' %}
</div>
{% endunless %}
{% endif %}

{% if section.settings.product_description_position == "bottom" %}
{% if section_onboarding and section.settings.frontpage_display_description %}
<div class="description bottom" itemprop="description">
<p>
{{ 'homepage.onboarding.product_description' | t }}
</p>
</div>
{% elsif section.settings.frontpage_display_description and product.description != blank %}
<div class="description bottom" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>

{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}

{% schema %}
{
"name": "Featured products",
"class": "featured-products-section",
"max_blocks": 12,
"settings": [
{
"type": "checkbox",
"id": "frontpage_product_stagger",
"label": "Stagger products left and right",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured Product"
},
{
"type": "header",
"content": "Image"
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows on product gallery"
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "checkbox",
"id": "activate_autoplay",
"label": "Enable product gallery slideshow"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "header",
"content": "Product info"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "checkbox",
"id": "frontpage_display_description",
"label": "Show product description",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
}
],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "featured_product",
"label": "Product"
}
]
}
],
"presets": [{
"name": "Featured products",
"category": "Product",
"settings": {
},
"blocks": [
{
"type": "product"
},
{
"type": "product"
}
]
}]
}
{% endschema %}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GameDaySports
Tourist
4 0 3

Thanks @KetanKumar  you hero. That worked perfectly.

Really appreciate your quick support. 

Many thanks

KetanKumar
Shopify Partner
36835 3635 11966

@GameDaySports 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

sknz
Visitor
2 0 0

When I apply this code the sub-menu also opens with main menu

html:not(.no-js) .navigation__submenu {
background-color: var(--color-background-header);
top: 45px;
}
.header__links-list li:hover ul.navigation__submenu.fs-body-base {
display: block;
}