To add a "See More" functionality (often referred to as a collapsible description) on a product page in Shopify, you'll need to customize your theme’s product description code. Shopify doesn’t offer this functionality natively, so you'll need to manually add it by editing the theme's files. Here’s how you can do it:
### Step 1: Backup Your Theme
Before making any changes, it's always a good idea to duplicate your theme. This ensures you can revert to the original if something goes wrong.
1. Go to **Online Store > Themes**.
2. Find your active theme and click **Actions > Duplicate**.
### Step 2: Edit the Product Template
You’ll be modifying the product template to add a collapsible section for the product description.
1. Go to **Online Store > Themes**.
2. Find your active theme, and click **Actions > Edit Code**.
3. In the **Templates** folder, look for the file named **product.liquid** (or similar, such as `product-template.liquid` if you’re using a different naming convention).
4. Open this file and locate the code that outputs the product description. It may look something like this:
```liquid
{{ product.description }}
```
### Step 3: Add the Collapsible HTML and JavaScript
You’ll need to add some HTML and JavaScript to make the description collapsible.
1. **Add the HTML structure** around the description code:
```liquid
<div class="product-description-container">
<div class="product-description" id="product-description">
{{ product.description | escape }}
</div>
<button id="see-more-btn" class="see-more-btn">See More</button>
</div>
```
2. **Add the JavaScript** to control the collapsing and expanding:
Inside the same file or in the theme’s **assets** folder (in a new file or an existing JavaScript file), you can add the following Javascript:
```html
<script>
document.addEventListener("DOMContentLoaded", function() {
const description = document.getElementById('product-description');
const seeMoreBtn = document.getElementById('see-more-btn');
const maxHeight = 200; // Adjust this value based on how much description you want visible initially.
// Initially truncate the description
if (description.scrollHeight > maxHeight) {
description.style.maxHeight = maxHeight + 'px';
description.style.overflow = 'hidden';
seeMoreBtn.style.display = 'inline-block'; // Show the "See More" button
}
// Toggle description visibility when the button is clicked
seeMoreBtn.addEventListener('click', function() {
if (description.style.maxHeight === maxHeight + 'px') {
description.style.maxHeight = 'none';
seeMoreBtn.textContent = 'See Less';
} else {
description.style.maxHeight = maxHeight + 'px';
seeMoreBtn.textContent = 'See More';
}
});
});
</script>
```
### Step 4: Style the Button (Optional)
To style the "See More" button, you can add some CSS in your theme’s **assets** > **theme.scss.liquid** (or any other CSS file):
```css
.product-description-container {
position: relative;
max-width: 100%;
}
#see-more-btn {
display: none;
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
#see-more-btn:hover {
background-color: #0056b3;
}
.product-description {
transition: max-height 0.3s ease;
}
```
### Step 5: Test the Changes
Once you've made these changes, preview your product page and ensure that:
- The description is truncated initially (if it's long).
- The "See More" button works to expand and collapse the description.
- The button text changes between "See More" and "See Less."
### Step 6: Save and Publish
After testing everything, save the changes and publish the updated theme.
---
This method adds a "See More" button that dynamically shows or hides parts of the product description. If you'd like more advanced styling or functionality
