Add a “Read More” toggle to Shopify’s Product Details

wp_admin·January 19, 2023·0 comments

Add a “Read More” toggle to Shopify’s Product Details

Shopify is a powerful e-commerce platform that allows you to create a professional online store easily. However, one of its limitations is the way product descriptions are displayed on product pages. By default, the entire product description is shown, which can lead to long pages that are difficult to navigate. In this post, we’ll show you how to add a “Read More” toggle to your Shopify product pages, allowing you to keep your product descriptions concise and easy to read.

Step 1: Locate the “product-content.liquid” snippet file

The first step is to locate the “product-content.liquid” snippet file, which is responsible for displaying the product description on your product pages. To find it, log in to your Shopify admin, go to “Themes,” and then click on the “Edit HTML/CSS” button. Under the “Snippets” folder, you’ll find the “product-content.liquid” file.

Step 2: Add the “Read More” toggle HTML

Once you’ve located the “product-content.liquid” file, you’ll need to add the HTML for the “Read More” toggle. We recommend adding it within the existing parent element.

<div class="product-details">
<span class="moreless-button" href="#">Read more</span>

Step 2: Add the “Read More” toggle HTML

Once you’ve located the “product-content.liquid” file, you’ll need to add the HTML for the “Read More” toggle. We recommend adding it within the existing parent element.

<div class="product-details">
<span class="moreless-button" href="#">Read more</span>

Step 3: Add the CSS

To style the “Read More” toggle, you’ll need to add some CSS. We recommend adding it to your theme’s “styles.css” file. You can use the following code:

.moretext {
  display: none;
}
<span class="moreless-button" href="#">Read more</span>

Step 4: Add the jQuery

The final step in this journey is to add the jQuery code which will toggle the “Read More” link. Use the following code:

// this adds the class "moretext" to each of the P elements, except for the first 4 so that there is always some preview text displayed
$(".product-details p:nth-child(n+5)").filter(function(){
    return $(this).text().length > 0;
}).addClass("moretext");


$('.moreless-button').click(function() {
  $('.moretext').slideToggle();
  if ($('.moreless-button').text() == "Read more") {
    $(this).text("Read less")
  } else {
    $(this).text("Read more")
  }
});

In Shopify, you can add custom jQuery code to your theme’s JavaScript file. You can add the code to a script tag within the theme.liquid file or within a separate JavaScript file that is called in the theme.liquid file.

You should wrap the code in a self-executing anonymous function to ensure that it does not interfere with any other scripts on the page. This is already done in the above first function!

That’s it! With these simple steps, you’ve just created a “Read More” toggle for your Shopify product pages. This will help to keep your product descriptions shorter, concise and easier to read, improving the overall user experience on your site.

wp_admin

Related posts