Broadcast Theme - Remove Read on product descriptions

Daniel_Ward_CC
Shopify Partner
28 0 13

Hey! 

Can anyone help me remove the need to click "read more" to reveal the full product description on product pages?

For example here: https://slowageing.co.uk/collections/slow-ageing-essentials-face/products/essential-facial-essence?v...

The full description is hidden until you click "READ MORE" I would like the full description to load straight away.  

 

Screenshot 2021-09-22 at 15.41.31.png

Replies 8 (8)

dmwwebartisan
Shopify Partner
12282 2546 3694

@Daniel_Ward_CC 

Please try this css class 

.accordion-content__actions, .tab-content__actions {
    display: none !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Daniel_Ward_CC
Shopify Partner
28 0 13

Amazing! that was super fast thank you! 

Daniel_Ward_CC
Shopify Partner
28 0 13

@dmwwebartisan Do you know if its possible to make the reviews accordion to display as open as default too? - same product page

dmwwebartisan
Shopify Partner
12282 2546 3694

@Daniel_Ward_CC 

Please try this css class 

#shopify-section-template--15093764718775__reviews .accordion__body {
    display: block !important;
    padding-bottom: 1rem;
    overflow: hidden;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Daniel_Ward_CC
Shopify Partner
28 0 13

Thank you!!!!!! 

Dan

Daniel_Ward_CC
Shopify Partner
28 0 13

Hi @dmwwebartisan unfortunately I just realised this is hiding the "read more" text, but it is still not showing the full description.

In the example below, you can see the sentence has been cut short. 

With the code:

Screenshot 2021-09-27 at 15.05.03.png 

Without it after clicking "Read More":

Screenshot 2021-09-27 at 15.08.06.png

dmwwebartisan
Shopify Partner
12282 2546 3694

@Daniel_Ward_CC 

Please provide complete code of sections/product-templete.liquid file.

So I can cross check.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Daniel_Ward_CC
Shopify Partner
28 0 13

Sorry, I missed this message @dmwwebartisan, Section + Snippets code below:
I have removed the solution you suggested from our store for the moment.

<!-- /sections/product.liquid -->

<div id="template-product" data-section-id="{{ section.id }}" data-section-type="product" data-product-handle="{{ product.handle }}" data-enable-history-state="true" data-sticky-enabled="{{ section.settings.product_sticky_enable }}" data-tall-layout="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}" data-reviews="{{ settings.enable_product_reviews }}" data-cart-bar="{{ section.settings.show_cart_bar }}" data-cart-bar-position="{{ section.settings.cart_bar_position }}">
  {%- include 'product' -%}
</div>



{%- if section.settings.show_cart_bar -%}
  {%- include 'cart-bar' -%}
{%- endif -%}

{%- if section.settings.show_recently_viewed -%}
  {%- include 'products-recently-viewed' -%}
{%- endif -%}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_layout",
        "label": "Image display",
        "default": "stacked",
        "options": [
          { "value": "thumbnails", "label": "Thumbnails" },
          { "value": "stacked", "label": "Stacked" }
        ]
      },
      {
        "type": "checkbox",
        "id": "product_sticky_enable",
        "label": "Enable sticky description",
        "info": "Works best with shorter descriptions.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_breadcrumbs",
        "label": "Show breadcrumbs",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show smart checkout button",
        "info": "Customers will see their preferred accelerated checkout method.",
        "default": true
      },
      {
        "type": "header",
        "content": "Cart bar"
      },
      {
        "type": "checkbox",
        "id": "show_cart_bar",
        "label": "Show Cart bar",
        "default": true,
        "info": "Visible on larger than 1280px screens only"
      },
      {
        "type": "select",
        "id": "cart_bar_position",
        "label": "Position",
        "default": "bottom",
        "options": [
          { "value": "top", "label": "Top" },
          { "value": "bottom", "label": "Bottom" }
        ]
      },
      {
        "type": "header",
        "content": "Product info tabs"
      },
      {
        "type": "checkbox",
        "id": "tabs_enable",
        "label": "Enable tabs",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "tab_description",
        "name": "Description H6",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](https://help.invisiblethemes.com/article/11-tabs)."
          }
        ]
      },
      {
        "type": "tab_richtext",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Text tab",
            "info": "Example: Warranty policy"
          },
          {
            "type": "richtext",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          }
        ]
      },
      {
        "type": "tab_html",
        "name": "HTML",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "HTML tab",
            "info": "Example: Sizing video"
          },
          {
            "type": "html",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
          }
        ]
      },
      {
        "type": "tab_page",
        "name": "Page",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Page tab",
            "info": "Example: Size chart"
          },
          {
            "type": "page",
            "id": "raw_content",
            "label": "Tab content"
          }
        ]
      },
	  {
		"type": "product_logos",
		"name": "Product Logos",
		"settings": [
			{
                "type": "product",
                "id": "product",
                "label": "Product"
            },
			{
                "type": "header",
                "content": "Select Logos"
            },
			{
                "type": "checkbox",
                "id": "you_magazine",
                "label": "You Magazine"
            },
			{
                "type": "checkbox",
                "id": "independent",
                "label": "Independent"
            },
			{
                "type": "checkbox",
                "id": "gq",
                "label": "GQ"
            },
			{
                "type": "checkbox",
                "id": "mail_online",
                "label": "Mail Online"
            },
			{
                "type": "checkbox",
                "id": "top_sante",
                "label": "Top Sante"
            },
			{
                "type": "checkbox",
                "id": "bbbronze_awards",
                "label": "BBBronze Awards"
            }
		]
	  }	
    ]
  }


  {% endschema %}

 

<!-- /snippets/product.liquid -->


<div class="product__wrapper">

  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

  {%- if section.settings.show_breadcrumbs -%}
    <nav class="breadcrumbs">
      <small>
        <a href="{{ shop.url }}">{{ 'general.breadcrumbs.home' | t }}</a><span class="breadcrumbs__arrow">{% include 'icon-arrow-right' %}</span>

        {% if template contains 'product' %}
          {% assign first_collection = product.collections[0] %}
          {% if first_collection.handle != blank %}
            {{ first_collection.title | link_to: first_collection.url }}
            <span class="breadcrumbs__arrow">{% include 'icon-arrow-right' %}</span>
          {% endif %}

          <a href="{{ shop.url }}">{{ product.title }}</a>
        {% endif %}

        {% if template contains 'collection' %}
          {% if collection %}<a href="{{ collection.url }}">{{ collection.title }}</a><span class="breadcrumbs__arrow">{% include 'icon-arrow-right' %}</span>{% endif %}
        {% endif %}
      </small>
    </nav>
  {%- endif -%}

  <div class="grid product__page">
    <div class="grid__item medium-up--one-half">
      <div class="product__slides product-single__photos" data-product-slideshow>
        {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
        {%- assign img_api = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        <div class="lazy-image product__photo" data-thumb="{{ featured_image.src | img_url: '190x190', crop: 'center' }}" data-product-photo-wrapper>
          <div data-zoom-wrapper class="lazy-image" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%; background-image:  url('{{ featured_image.src | img_url: '1x1' }}');">
            <img data-zoom data-src="{{  featured_image.src | img_url: '3000x' }}" style="display: none;" alt="{{ 'products.product.zoom' | t }}">
            <img data-product-featured-image data-product-image class="fade-in lazyload"
              data-image-id="{{ featured_image.id }}"
              alt="{{ featured_image.alt | escape }}"
              data-src="{{ img_api }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{featured_image.aspect_ratio }}"
              data-sizes="auto"/>
          </div>
          {% if featured_image.alt contains 'youtube.com' or featured_image.alt contains 'vimeo.com' %}
            <a href="{{ featured_image.alt }}" class="productVideo product__play">
              <span class="icon icon-play">{% include 'icon-play' %}</span>
              <span class="visually-hidden">&#9658;</span>
            </a>
          {% endif %}
        </div>

        {% for image in product.images %}
          {% unless image contains featured_image %}
            {%- assign img_api = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div class="product__photo{% unless forloop.first == true %} product__photo--additional{% endunless %}"  data-thumb="{{ image.src | img_url: '190x190', crop: 'center' }}">
              <div data-zoom-wrapper class="lazy-image" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%; background-image:  url('{{ image.src | img_url: '1x1' }}');">
                <img data-zoom data-src="{{  image.src | img_url: '3000x' }}" style="display: none;" alt="{{ 'products.product.zoom' | t }}">
                <img data-product-image class="fade-in lazyload"
                  data-image-id="{{ image.id }}"
                  alt="{{ image.alt | escape }}"
                  data-src="{{ img_api }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"/>
              </div>
              {% if image.alt contains 'youtube.com' or image.alt contains 'vimeo.com' %}
                <a href="{{ image.alt }}" class="productVideo product__play">
                  <span class="icon icon-play">{% include 'icon-play' %}</span>
                  <span class="visually-hidden">&#9658;</span>
                </a>
              {% endif %}
            </div>
          {% endunless %}
        {% endfor %}
      </div>
      <noscript>
        {% for image in product.images %}
          <img src="{{ image | img_url: '900x' }}" alt="{{ image.alt | default: product.title  }}">
        {% endfor %}
      </noscript>
      <div data-product-thumbs class="product__thumbs--square"></div>
    </div>

    <div class="grid__item medium-up--one-half">
      <div class="form__wrapper{% unless current_variant.available %} variant--soldout{% endunless %}" data-form-wrapper>
        <div class="form__inner__wrapper">
          <div class="form__width">
            <div class="product__title__wrapper">
              <h1 class="product__title">{{ product.title }}</h1>
              <div class="h5--body product__price" data-price-wrapper>
                <span data-product-price {% if current_variant.compare_at_price > current_variant.price %} class="product__price--sale"{% endif %}>
                  {{ current_variant.price | money }}
                </span>

                {% if product.compare_at_price_max > product.price %}
                  <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
                  <s class="product__price--strike" data-compare-price>
                    {% if current_variant.compare_at_price > current_variant.price %}
                      {{ current_variant.compare_at_price | money }}
                    {% endif %}
                  </s>
                {% endif %}
                

                
              </div>
            </div>

            {%- if settings.enable_product_reviews -%}
              <div class="product__badge">
                {%- if settings.enable_yotpo and settings.yotpo_ID != '' -%}
                  <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div>
                {%- else -%}
                  <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
                <a href="#reviews-scroll">{{ 'products.product.reviews_link' | t }}</a>
                {%- endif -%}
              </div>
            {%- endif -%}

            <div class="product__form">
              {% include 'product-form', buybutton_setting: section.settings.show_payment_button %}
            </div>

            {%- assign description_position = '' -%}
            {%- assign product_description_content = product.description -%}
            {%- assign has_tabs = false -%}
            {%- for block in section.blocks -%}
              {%- if block.type == "tab_description" -%}
                {%- assign has_tabs = true -%}
              {%- endif -%}
            {%- endfor -%}
            {%-if has_tabs -%}
              {%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
            {%- endif -%}

            <div class="product-description rte">
              {{ product_description_content }}
            </div>
<div class="saso-bundle"></div>
            {%- if section.blocks.size > 0 and section.settings.tabs_enable -%}
              <div class="tabs-wrapper productTabsWrapper">
                {% include 'product-tabs' %}
              </div>
            {%- endif -%}

            {% if section.settings.product_show_vendor and product.vendor %}
              <p class="product__vendor caps">{{ 'products.product.vendor' | t }}: <a href="{{ product.vendor | url_for_vendor }}" class="text-link">{{ product.vendor }}</a></p>
            {%- endif -%}
            

            
            {% assign productFound = false %}
            {%- if section.blocks.size > 0 -%}
            {%- for block in section.blocks -%}
                	{%- if block.type == "product_logos" -%}
                		{% if product.handle == block.settings.product %}
            			{% assign productFound = true %}
            			{% endif %}
            		{% endif %}
            {% endfor %}
            {% if productFound %}
            <div class="press-logo">
              <h2>As Featured In:</h2>
              <ul>
                {%- for block in section.blocks -%}
                	{%- if block.type == "product_logos" -%}
                		{% if product.handle == block.settings.product %}
                			{% if block.settings.you_magazine %}
                				<li><img src="{{ settings.you_magazine | img_url:'master' }}"></li>
                			{% endif %}
                			{% if block.settings.independent %}
                				<li><img src="{{ settings.independent | img_url:'master' }}"></li>
                			{% endif %}
                			{% if block.settings.gq %}
                				<li><img src="{{ settings.gq | img_url:'master' }}"></li>
                			{% endif %}
                			{% if block.settings.mail_online %}
                				<li><img src="{{ settings.mail_online | img_url:'master' }}"></li>
                			{% endif %}
                			{% if block.settings.top_sante %}
                				<li><img src="{{ settings.top_sante | img_url:'master' }}"></li>
                			{% endif %}
                			{% if block.settings.bbbronze_awards %}
                				<li><img src="{{ settings.bbbronze_awards | img_url:'master' }}"></li>
                			{% endif %}
                {% break %}
                		{% endif %}
                		
                	{% endif %}
                {% endfor %}
                {% comment %}
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/YOUmag-logo-black.png?v=1595418106"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/kisspng-gq-australia-men-s-magazine-taobao-promotional-copy-5b40c44b7f5623.9113681115309712115216.jpg?v=1595418106"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/logo-top-sante-300x200-300x200.png?v=1595418105"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/Independent-logo.png?v=1595418164"></li>
                {% endcomment %}
              </ul>
            </div>
            {% endif %}
            {% endif %}
            
            <div class="product-newicon">
              <ul>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/1.png?v=1585375127"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/2.png?v=1585375127"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/3.png?v=1585375127"></li>
                <li><img src="https://cdn.shopify.com/s/files/1/0013/1566/8028/files/4.png?v=1585375127"></li>
              </ul>
            </div>

            {% if section.settings.show_share_buttons %}
              <div class="product__sharing">
                {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: featured_image %}
              </div>
            {% endif %}
            
   
            {%- if settings.enable_product_reviews -%}
 
                <div class="product__reviews" id="reviews-scroll">
                  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

                </div>
           
            {%- endif -%}

          </div>
        </div>
      </div>
    </div>
  </div>


</div>
{% unless product == empty %}
  <script type="application/json" data-product-json>
    {{ product | json }}
  </script>
{% endunless %}