How can I add a 'read more' button on my product page?

[windef]

Hello!

So once again i can’t find the answer and would love to recieve help from the more experienced e-commerce expers or web designers, i can’t figure out how i can add “read more” & “read less” button on product page if the description is too long and theyre not interested in reading it.

Could anyone please assist me on this issue.

www.sheyet.com

[nexuscommerce]

To add a “read more” link to a Shopify product description, you will need to do the following:

1. Go to your Shopify store’s admin panel and navigate to the product page for the product you want to edit.

2. Scroll down to the “Description” field and click on the “HTML” button to switch to the HTML editor.

3. Find the point in the description where you want the “read more” link to appear. You can use the “Preview” button to see how the description looks on the front end of your store.

4. Insert the following code at the point where you want the “read more” link to appear:

Read more

5. Add a “Read less” link below the content you want to show when the “Read more” link is clicked. You can do this by adding the following code:

Read less

6. Wrap the content you want to hide with the “read-more-content” class. You can do this by adding the following code:

7. Add the following CSS to your theme’s stylesheet to style the “Read more” and “Read less” links and to hide the content by default:

.read-more-content {
  display: none;
}

.read-more {
  cursor: pointer;
}

.read-less {
  display: none;
  cursor: pointer;
}

8. Add the following JavaScript to your theme’s JavaScript file to toggle the “Read more” and “Read less” links and to show/hide the content when they are clicked:

$(document).ready(function() {
  $('.read-more').click(function() {
    $(this).next('.read-more-content').slideToggle();
    $(this).hide();
    $(this).next().next('.read-less').show();
  });

  $('.read-less').click(function() {
    $(this).prev('.read-more-content').slideToggle();
    $(this).hide();
    $(this).prev('.read-more').show();
  });
});​

9. Save your changes and test the “Read more” and “Read less” links on the front end of your store to make sure they are working as expected.

I hope this helps! Let me know if you have any questions.

[Ujjaval]

@windef
You can take reference from below link :
http://jsfiddle.net/x6w37dqf/1/

[Litos]

Hi @windef ,

Please follow the instructions below, it will work fine, refer link

Hope it helps!

[SocialAutoPost]

Hello @windef ,

To add a “read more” and “read less” button to a product page in Shopify, you will need to modify the product template in your Shopify theme. To do this, you will need to have some familiarity with HTML, CSS, and Liquid, the template language used by Shopify.

Here’s an example of how you could add a “read more” and “read less” button to a product page:

1. First, you will need to add the following HTML to your product template, replacing {{ product.description }} with the Liquid tag that outputs the product description:

  {{ product.description }}
  

​

This will create a container for the product description and a button that says “Read more”.

2. Next, you will need to add some CSS to your theme to hide the part of the description that you want to toggle. You can do this by adding the following CSS to your theme’s stylesheet:

.description {
  max-height: 200px;
  overflow: hidden;
}
​

3. Finally, you will need to add some JavaScript to your theme to toggle the visibility of the hidden content when the “Read more” button is clicked. You can do this by adding the following JavaScript to your theme’s JavaScript file:

document.addEventListener('DOMContentLoaded', () => {
  const readMoreButton = document.querySelector('.read-more-button');
  const description = document.querySelector('.description');

  readMoreButton.addEventListener('click', () => {
    if (description.classList.contains('expanded')) {
      description.classList.remove('expanded');
      readMoreButton.textContent = 'Read more';
    } else {
      description.classList.add('expanded');
      readMoreButton.textContent = 'Read less';
    }
  });
});
​

This code will listen for a click event on the “Read more” button, and toggle the expanded class on the description container. The expanded class should have a style that sets the max-height of the container to none, so that the entire description is visible.

If you need any help with above please DM me I will be more than happy to help

[Cedcommerce]

Hello @windef ,

It seems you are using Vitals app for displaying descriptions in tabs.

You need to check whether you can customize the code with the app. If not, you need to add the custom code for the tabs.

We suggest you hire a Shopify expert who will help you to add this functionality.

Let us know if you need any further help.

Regards,

CedCommerce

[windef]

Does not work.

[windef]

[Litos]

Hi @windef ,

It will include extra JS snippet, did you add it? Refer link

Hope it is clear to you.

[windef]

I have done it step by step and it still does not work i,m not sure why i preview it and it works first 2 seconds,

it shows the Read More button but the button does not function as it should

[windef]

Does not work either

[Litos]

Hi @windef ,

Please send me the product link you added the code, I will check it in detail