Show a 'Read more' link for tab content

Unsupported customization

This guide provides you with a starting point for the app customization.

Our help team can not make the customization for you, nor can they fix, change, or undo it.

If you're not comfortable proceeding, or if you'd like to adjust or enhance the customization, consider hiring a Shopify Expert to help you out, or request help from other Shopify Community members within the Shopify Design discussion board.

To show a 'Read more' link for tab content:

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
From the dropdown menu, select a product template (for example, Products > Default product).
From the sidebar, click the App embeds icon .
Select the Tabs Studio app embed.
View the settings for the app embed by clicking the expand icon next to the app embed name.

In the Custom JavaScript area, enter this JavaScript code:

// Add 'Read more' links to tab content
(function() {
  var expandLinkText = 'Read more';
  var collapseLinkText = 'Read less';
  var minContentHeight = 300;
  var dataAttribute = 'data-is-expanded';
  
  // Create link
  function createLink(c) {
    var contentStyle = window.getComputedStyle(c);
    var link = document.createElement('a');
    link.setAttribute('href', '#');
    link.textContent = expandLinkText;
    link.style.display = 'block';
    link.style.paddingTop = contentStyle.getPropertyValue('padding-bottom');
    link.style.paddingRight = contentStyle.getPropertyValue('padding-right');
    link.style.paddingBottom = contentStyle.getPropertyValue('padding-bottom');
    link.style.paddingLeft = contentStyle.getPropertyValue('padding-left');
    link.addEventListener('click', function(e) {
      e.preventDefault();
      toggleContent(c);
    });
    return link;
  }
  
  // Hide content
  function hideContent(c) {
    c.removeAttribute(dataAttribute);
    c.style.height = minContentHeight + 'px';
    c.style.overflowY = 'hidden';
    c.readMoreLink.textContent = expandLinkText;
    c.readMoreLink.style.paddingTop = window.getComputedStyle(c).getPropertyValue('padding-bottom');
  }
  
  // Show content
  function showContent(c) {
    c.setAttribute(dataAttribute, '');
    c.style.height = 'auto';
    c.style.overflowY = 'visible';
    c.readMoreLink.textContent = collapseLinkText;
    c.readMoreLink.style.paddingTop = 0;
  }
  
  // Toggle content
  function toggleContent(c) {
    c.hasAttribute(dataAttribute) ? hideContent(c) : showContent(c);
  }
  
  // Init
  document.addEventListener("stationTabsInstanceReady", function(e) {
    e.detail.tabs.forEach(function(tab) {
      var content = tab.tabpanel.querySelector(".station-tabs-tabcontent");
      if (!content) { return; }
      if (content.offsetHeight < minContentHeight) { return; }
      var link = createLink(content)
      tab.tabpanel.appendChild(link);
      content.readMoreLink = link;
      hideContent(content);
    });
  });
})();

Click Save.