Solved

Featured Product Liquid - Can someone help me with this error?

oowe
Tourist
5 0 3

Schermata 2021-10-27 alle 00.45.20.png

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @oowe ,

I checked and it is getting html error by your product description display code: https://i.imgur.com/yYfb7yr.png 
So you can remove the description or change the code as follows:

{% if product.description contains '[#' %}
{{ product.description | split: '[#' | first | truncatewords: 50 }}
{% else %}
{{ product.description | split: '<!-- split -->' | first | truncatewords: 50 }}
{% endif %}

=>

{% if product.description contains '[#' %}
{{ product.description | split: '[#' | first | strip_html | truncatewords: 50 }}
{% else %}
{{ product.description | split: '<!-- split -->' | first | strip_html | truncatewords: 50 }}
{% endif %}

It will remove the html tags and make the truncatewords function work well.
Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36839 3635 11972

@oowe 

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.

also please share  Featured Product Liquid section 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
oowe
Tourist
5 0 3

Hello Ketan,

thank you for your reply.

https://outofordinaryweek.com

theme I use is iconn

 

oowe
Tourist
5 0 3

Here is the code

{%- assign product = all_products[section.settings.featured_product] -%}
{% assign current_variant = product.selected_or_first_available_variant %}
{% if product == empty %}
  {%- assign section_onboarding = true -%}
{% endif %}
 
<section
  id="product-{{ product.id }}"
  class="product-page product-template prod-{{ section.id }}"
  data-product-id="{{ product.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product-section">
 
  {% if section_onboarding %}
   {% include 'onboard-single-product' %}
  {% else %}
   <div class="section-title">
     <h2>
       <a href="{{ product.url }}">
         {{ section.settings.heading }}
       </a>
     </h2>
   </div>
   <div class="row grid_wrapper">
 
     <meta itemprop="name" content="{{ product.title }}">
     <meta itemprop="url" content="{{ routes.root_url }}{{ product.url }}">
     <meta itemprop="image" content="{{ product.featured_media.media | img_url: '1024x1024' }}">
     {% include 'product-json' %}
     {% case section.settings.image_section_size %}
     {% when 'small' %}
       {%- assign image_width = 'desktop-5 desktop-push-1 tablet-3 mobile-3 span-5 push-1' -%}
       {%- assign descr_width = 'desktop-5 tablet-3 mobile-3 span-5' -%}
     {% when 'medium' %}
       {%- assign image_width = 'desktop-6 tablet-3 mobile-3 span-6' -%}
       {%- assign descr_width = 'desktop-6 tablet-3 mobile-3 span-6' -%}
     {% when 'large' %}
       {%- assign image_width = 'desktop-8 tablet-3 mobile-3 span-8' -%}
       {%- assign descr_width = 'desktop-4 tablet-3 mobile-3 span-4' -%}
     {% when 'ultra' %}
       {%- assign image_width = 'desktop-9 tablet-3 mobile-3 span-9' -%}
       {%- assign descr_width = 'desktop-3 tablet-3 mobile-3 span-3' -%}
     {% endcase %}
 
     {% assign thumbnail_position = section.settings.thumbnail_position %}
     {% assign click_to_enlarge = section.settings.click_to_enlarge %}
     {% assign enable_video_looping = section.settings.enable_video_looping %}
     {% capture product_gallery_config %}{
       "thumbPosition": {{ section.settings.thumbnail_position | json }},
       "thumbsShown": {{ section.settings.thumbs_to_show | json }},
       "enableVideoLooping": {{ section.settings.enable_video_looping | json }},
       "navStyle": {{ section.settings.slide_controls | json }},
       "mainSlider": {% if product.media.size <= 1 %}false{% else %}true{% endif %},
       "thumbSlider": {% if product.media.size >= 4 %}true{% else %}false{% endif %},
       "productId": {{ product.id | json }},
       "isQuick": false
     }{% endcapture %}
 
 
    {% if section.settings.image_options == 'static' %}
      {% assign gallery_data = 'data-static-gallery' %}
      {% assign gallery_type = 'static' %}
    {% else %}
      {% assign gallery_data = 'data-scroll-gallery' %}
      {% assign gallery_type = 'scroll' %}
    {% endif %}
 
    <div id="product-photos" class="product-photos product-{{ product.id }} {{ image_width }}"
      data-product-single-media-group data-gallery-config='{{ product_gallery_config }}'
       {{ gallery_data }} >
 
       {% if product.featured_media and gallery_type == 'static' %}
          {% include 'product-static-gallery' %}
       {% elsif product.featured_media and gallery_type == 'scroll' %}
       {% include 'product-scroll-gallery' %}
       {% else %}
         {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
         {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
       {% endif %}
     </div>
 
    <div {% if template != 'product.quick' %}id="product-content"{% endif %} class="product-right {{ descr_width }}">
      <div {% if template != 'product.quick' %}id="sticky-item"{% endif %} class="product-description {% if template != 'product.quick' %} is_sticky{% endif %}">
 
        <div class="section-title">
          <h3>
            <a href="{{ product.url }}">
              {{ product.title | escape }}
            </a>
          </h3>
        </div>
 
        {% unless product.template_suffix == 'not-for-sale' %}
        {% capture product_form_config %}
          { "money_format": {{ shop.money_format | json }},
            "enable_history": true,
            "sold_out": {{ "products.product.sold_out" | t | json }},
            "button": {{ 'products.product.add_to_cart' | t | json }},
            "unavailable": {{ 'products.product.unavailable' | t | json }},
            "quickview": {% if template == 'product.quick' %}true{% else %}false{% endif %}
          }
        {% endcapture %}
 
         <div class="product-form">
          {% include 'product-form' %}
         </div>
         {% endunless %}
 
         <div class="clear"></div>
         <div class="rte">
           {% if product.description contains '[#' %}
           {{ product.description | split: '[#' | first | truncatewords: 50 }}
           {% else %}
           {{ product.description | split: '<!-- split -->' | first | truncatewords: 50 }}
           {% endif %}
 
           <a href="{{ product.url }}">{{ 'products.product.readmore' | t }}</a>
         </div>
         <div class="clear"></div>
     </div>
    </div>
   </div>
  {% endif %}
  {%- if section.settings.show_social_share -%}
  {% include 'social' with product %}
  {%- endif -%}
</section>
 
<div class="clear"></div>
 
<style>
  section.product-page.prod-{{ section.id }} h2,
  section.product-page.prod-{{ section.id }} h2 a {
    color: {{ section.settings.heading_color }} !important;
    {% if settings.section_titles != 'text_only' %}
    border-color: {{ section.settings.heading_color }} !important;
    {% endif %}
  }
 
  section.product-page.prod-{{ section.id }} .featured-product-gallery.right {
    float: right !important;
  }
  section.product-page.prod-{{ section.id }} h3 {
    font-size: 16px;
  }
 
  {% if section.settings.product_variants == 'swatches' %}
    section.product-page.prod-{{ section.id }} .selector-wrapper {
      display: none;
    }
    section.product-page.prod-{{ section.id }} .single-option-selector {
      opacity: 0;
      display: none;
    }
  {% endif %}
 
  {% if section.settings.show_quantity_selector %}
    section.product-page.prod-{{ section.id }} .product-qty.selector-wrapper {
      display: block;
    }
  {% endif %}
  {% unless section.settings.show_sku %}
      section.product-page.prod-{{ section.id }} .variant-sku { display: none; }
  {% endunless %}
 
    section.product-page.prod-{{ section.id }} img.zoomImg { display: none !important; }
 
 
 
  {% if section.settings.image_options == 'static' %}
    {% case section.settings.thumbnail_position %}
      {% when 'below' %}
        section.product-page.prod-{{ section.id }} .product-thumbnails a.slick-prev.slick-arrow {
            position: absolute;
            left: -20px;
            top: 40%;
        }
        section.product-page.prod-{{ section.id }} .product-thumbnails a.slick-next.slick-arrow {
            top: 40%;
            position: absolute;
            right: -20px;
        }
        section.product-page.prod-{{ section.id }} .product-thumbnails {
          margin-top: 10px;
          padding: 0 30px;
        }
        section.product-page.prod-{{ section.id }} .product-thumbnail {
          padding: 10px;
        }
      {% else %}
        section.product-page.prod-{{ section.id }} .slick-vertical ul.slick-dots {
          position: initial;
        }
    {% endcase %}
  {% endif %}
  {% if section.settings.product_description_position != 'below' %}
    section.product-page.prod-{{ section.id }} .product-description form {
      border-bottom: 0;
      margin-bottom: 0;
    }
    section.product-page.prod-{{ section.id }} .add {
      margin-bottom: 8px! important;
    }
    {% endif %}
    section.product-page.prod-{{ section.id }} .product-description {
      background: {{ section.settings.description_background }};
    }
    section.product-page.prod-{{ section.id }} .product-description {
      background: {{ section.settings.description_background }};
    }
    .section.product-page.prod-{{ section.id }} .share-icons a {
      display: inline-block;
    }
</style>
{% unless product == empty %}
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}
{% schema %}
{
 "name": "Featured product",
 "class": "index-section",
 "settings": [
   {
     "type": "product",
     "id": "featured_product",
     "label": "Product"
   },
   {
     "type": "text",
     "id": "heading",
     "label": "Heading",
     "default": "Featured Product"
   },
   {
     "type": "color",
     "id": "heading_color",
     "label": "Heading color",
     "default": "#000"
   },
   {
     "type":"header",
     "content":"Media"
   },
   {
     "type": "checkbox",
     "id": "click_to_enlarge",
     "label": "Enable click to enlarge",
     "default": true
   },
   {
     "type": "select",
     "id": "image_section_size",
     "label": "Gallery size",
     "options": [
       {
         "value": "small",
         "label": "Small"
       },
       {
         "value": "medium",
         "label": "Medium"
       },
       {
         "value": "large",
         "label": "Large"
       },
       {
         "value": "ultra",
         "label": "Ultra"
       }
     ],
     "default":"medium"
   },
   {
     "type": "select",
     "id": "image_options",
     "label": "Gallery type",
     "options": [
       {
         "value": "static",
         "label": "Slideshow with thumbnails"
       },
       {
         "value": "scroll",
         "label": "Scroll gallery"
       }
     ]
   },
   {
     "type": "select",
     "id": "thumbnail_position",
     "label": "Thumbnail position when gallery w/thumbnails",
     "options": [
       {
         "value": "right",
         "label": "Right"
       },
       {
         "value": "left",
         "label": "Left"
       },
       {
         "value": "bottom",
         "label": "Bottom"
       }
     ]
   },
   {
     "type": "range",
     "id": "thumbs_to_show",
     "min": 0,
     "max": 6,
     "step": 1,
     "label": "Thumbnail images to show",
     "default": 3,
     "info":"Set to 0 to show a slideshow without thumbnails"
   },
   {
     "type": "select",
     "id": "slide_controls",
     "label": "Slider control style",
     "default": "arrows",
     "options": [
       {
         "value": "arrows",
         "label": "Arrows"
       },
       {
         "value": "dots",
         "label": "Dots"
       }
     ]
   },
   {
     "type": "checkbox",
     "id": "enable_video_looping",
     "label": "Enable video looping",
     "default": false
   },
   {
     "type": "paragraph",
     "content": "Learn more about [Media types](https:\/\/help.shopify.com/en\/manual\/products\/product-media\)"
   },
   {
     "type":"header",
     "content":"Form options"
   },
   {
   "type": "color",
   "id":"description_background",
   "label":"Form background color"
   },
   {
     "type": "checkbox",
     "id": "show_vendor",
     "label": "Show vendor"
   },
   {
     "type": "checkbox",
     "id": "show_sku",
     "label": "Show variant SKU",
     "default": true
   },
   {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": true
    },
    {
       "type": "select",
       "id": "product_variants",
       "label": "Product variant display",
       "options": [
        {
          "value": "swatches",
          "label": "Swatches"
        },
        {
          "value": "drop-downs",
          "label": "Drop-downs"
        }
       ],
       "default": "swatches"
     },
     {
       "type": "select",
       "id": "color_swatch_options",
       "label": "Color swatch style",
       "options": [
         {
           "value": "default-color",
           "label": "Default color"
         },
         {
          "value": "custom-image",
          "label": "Custom uploaded images"
         },
         {
          "value": "variant-image",
          "label": "Zoomed in variant images"
         }
       ],
       "default": "default-color",
       "info": "Learn more about [color swatch styles](https:\/\/support.weareunderground.com\/article\/259-mr-parker-theme-color-swatch-styles)"
     },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https:\/\/help.shopify.com\/manual\/using-themes\/change-the-layout\/dynamic-checkout)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_social_share",
      "label": "Show social share icons",
      "default": true
    }
   ],
   "presets": [
   {
     "name": "Featured product",
     "category": "Product"
   }
 ]
}
{% endschema %}
KetanKumar
Shopify Partner
36839 3635 11972

@oowe 

thanks for all 

if possible to sent theme zip code so i will check

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
LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @oowe ,

I checked and it is getting html error by your product description display code: https://i.imgur.com/yYfb7yr.png 
So you can remove the description or change the code as follows:

{% if product.description contains '[#' %}
{{ product.description | split: '[#' | first | truncatewords: 50 }}
{% else %}
{{ product.description | split: '<!-- split -->' | first | truncatewords: 50 }}
{% endif %}

=>

{% if product.description contains '[#' %}
{{ product.description | split: '[#' | first | strip_html | truncatewords: 50 }}
{% else %}
{{ product.description | split: '<!-- split -->' | first | strip_html | truncatewords: 50 }}
{% endif %}

It will remove the html tags and make the truncatewords function work well.
Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
oowe
Tourist
5 0 3

OMG that just solved everything, you can't even imagine I've been trying to solve for days and you did it right away. Thank you so so much! 

LitCommerce
Astronaut
2860 684 732

Hi @oowe ,

Thank you.

If you have any difficulty, you can contact me 🙂

Happy to help you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
oowe
Tourist
5 0 3

I'm facing also the mobile navigation menu problem on side.....  it won't show the menu on side on the Home Page on the mobile navigation......on desktop it works though.

oowe_0-1635325280169.png