How to add a Read More button on a product description

Highlighted
Tourist
3 0 0

Hi, 

 

I am not a  coder and have been struggling with this a lot. Found a few threads but yet to find a workable solution.

 

I have a very long product description and it makes my product page look lengthy and shabby. I wanted to show only a certain portion of the description while adding a Read More option and once clicked it expands and show the entire description. 

 

Can anyone help me with a solution? I contacted Shopify support and they said they don't do things like this. So not sure who can help.something like thissomething like this

0 Likes
Highlighted

Hi @pineappleexpres,

You'd need a custom javascript build for that, I've collected a few codepen examples below that could take you in the right direction...

https://codepen.io/royketelaar/pen/avWxve
https://codepen.io/Alexcm14/pen/waNgrg

https://codepen.io/svinkle/pen/Jmlbw


Thanks,
Brett

Was my answer helpful? Be sure to give it a "Like" and mark it as the solution - this way others can find it easily.
- Need help with a Shopify build or custom solution? Feel free to get in touch via hello@stonedigital.com.au !
- Did my reply help solve your problem? The above email is my Paypal too ʘ‿ʘ
1 Like
Highlighted
Shopify Expert
3811 557 907

Hi @pineappleexpres 

You can use given link of @StoneDigital  and add your Js code in Asset->theme.js file and css in Asset-> theme.scss file at bottom.

You have to add this button in product description or on Section->product-template.liquid file to show "Read more" on page.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
3 0 0

Hi Brett,

 

Thanks for sharing, however, i am a bit confused as to where to add these codes in the theme?

0 Likes
Highlighted
Tourist
3 0 0

Thanks Brijesh,

 

Your post did help to understand what code goes in which section, however, still not sure where to paste the respective code. For ex. if i go to theme.js then where to add the JS code? If you can tell me what element to search in the respecitve section then i can try to add it and see it works. 

0 Likes
Highlighted
Shopify Expert
3811 557 907

Hi @pineappleexpres 

You can add your Js at end of file and same for css too.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
2 0 0

hi @Jasoliya 

Thank you for explaining this. 

I followed your description above, copied the code into each file as you specified,

However, I get a Read more button, and when i click on Read more nothing happens. The text does not expand.

 

You mentioned "add button  to product description.." I am not sure how to properly insert the HTML to the product description. 

 

Below is my product-template.liquid file: 

Could you please highlight where in this section of Product desc I should add the HTML

Your response is highly appreciated as I have tried to fix this issue for weeks!

 

 

{%- if section.settings.description_below_add_to_cart -%}
<div class="ProductMeta__Description">
<div class="Rte">
{%- comment -%}
We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
{%- endcomment -%}

{{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
</div>

{%- if section.settings.show_share_buttons -%}
<div class="ProductMeta__ShareButtons hidden-pocket">
<span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

<div class="ProductMeta__ShareList Text--subdued">
<a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- render 'icon' with 'facebook' -%}</a>
<a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- render 'icon' with 'twitter' -%}</a>
<a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- render 'icon' with 'pinterest' -%}</a>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}

 

0 Likes
Highlighted
New Member
2 0 1

Hi 

I am not a coder either but this thread helped me with the same problem.

You don't have to change product-template.liquid.

If you added the CSS and JS in the correct places, you can add the html code for the button straight into you product description.

Hope this helps

 

1 Like
Highlighted
New Member
2 0 0

I worked in this tonight and I added the JS and he CSS then added the HTML in the product description. The “Read More” button appeared, but nothing happened when I clicked it. Andy ideas?

0 Likes