How to Add a Read More Button in the Shopify Debut Theme

Long product descriptions are useful for shoppers who want details, but they can push important elements like the price, variants and add-to-cart button far down the page, especially on phones. A "read more" button solves this by showing a short preview of the description and letting shoppers expand it if they want more. Shopify's Debut theme, one of the most widely used free themes for years, does not include this feature by default, so store owners often ask how to add it.

This guide, updated from our original article, explains how to add a read more button to product descriptions in the Debut theme, along with notes for newer Shopify themes.

Before you start: back up your theme

Editing theme code always carries some risk. Before making changes, duplicate your theme from the Shopify admin: go to Online Store, then Themes, open the Actions menu and choose Duplicate. Make changes on the duplicate, test them, and publish only when everything works. This way, a mistake never affects your live store.

Option one: a simple CSS and JavaScript approach

The most common method wraps the product description in a container with a limited height, hides the overflow and adds a button that expands it. In outline, the steps are:

1. Open the duplicated theme's code editor.
2. Find the product template section, usually named something like product-template.liquid in Debut.
3. Locate where the product description is output, typically {{ product.description }}.
4. Wrap it in a container element with a class such as description-wrapper.
5. Add a button element below it labelled "Read more".
6. In the theme stylesheet, give the wrapper a maximum height and hidden overflow, with a soft fade at the bottom.
7. Add a small script that toggles a class on the wrapper when the button is clicked, removing the height limit and changing the label to "Read less".

This approach is lightweight and works on most devices. Test it on several products with short and long descriptions, since products with very short descriptions should not show the button at all. A small check in the script can hide the button if the content is shorter than the limit.

Option two: using the details element

A simpler, more accessible approach uses the native HTML details and summary elements. The summary acts as a clickable heading, and the content inside expands when clicked. This requires no JavaScript and works with keyboards and screen readers by default. It is especially useful for splitting long descriptions into sections like "Materials", "Sizing" and "Care".

Option three: apps

The Shopify App Store includes apps that add collapsible descriptions or tabs. They avoid code editing but add another app to manage, sometimes with monthly fees and extra scripts that can slow your store. For a simple read more button, code is usually lighter. For complex tabbed layouts across many products, an app may save time.

Newer Shopify themes

Debut has been retired as a default theme, and newer Online Store 2.0 themes like Dawn include collapsible content blocks that can be added through the theme editor without code. If you are still on Debut, consider whether upgrading to a modern theme would give you this and other features out of the box, along with better performance.

Accessibility considerations

A read more button must be usable by everyone. Use a real button element rather than a link or div, so keyboard users can activate it. Update an aria-expanded attribute when the content opens or closes, so screen readers announce the state. Make sure focus is not lost when the content expands. Hidden content should still be readable by search engines, which is generally true when it is simply visually collapsed.

Does hiding description text hurt SEO?

Some store owners worry that collapsing text behind a read more button harms search rankings. Older advice suggested that hidden content was ignored. I think that concern is largely outdated.

Search engines now index mobile versions of pages and generally treat content hidden for user experience reasons, such as expandable sections, as part of the page. What matters more is that the description is genuinely useful and unique. Collapsing long text to improve the shopping experience is unlikely to hurt, and better usability can improve how visitors engage with your store. Structured data for products can also help search engines understand your pages, a topic related to structured data tools for local businesses.

Testing checklist

• Test on phones, tablets and desktops.
• Check products with short, medium and long descriptions.
• Confirm keyboard and screen reader access.
• Verify the add-to-cart button is visible without scrolling on mobile.
• Check page speed before and after the change.

Choosing the preview length

How much of the description should show before the button? Too little, and shoppers click to expand on every product, which defeats the purpose. Too much, and the add-to-cart button still sits far down the page. A good starting point is three to five lines on mobile, enough to show the opening sentence and a key benefit. Put the most persuasive information at the start of each description, since many shoppers will never expand it. Review your descriptions with this in mind: the first lines should answer what the product is and why someone would want it.

Handling descriptions with images and tables

Some product descriptions include images, size tables or embedded videos. A height-limited container can cut these off awkwardly, leaving half an image visible above the fade. Test products with rich content carefully. Options include placing tables and images after the collapsible text, putting size charts in a separate details section, or allowing a slightly taller preview for products with media. The goal is that the collapsed state always looks intentional rather than broken. After making changes, ask a friend to try buying something on their phone and watch where they hesitate.

Small changes, better shopping

A read more button is a small change that can make product pages cleaner and easier to use, especially on mobile. Whether you use code, native details elements or an app, test carefully and keep accessibility in mind. More practical tips are in our Web Tips section.