What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to customise appearance of product description on product page

How to customise appearance of product description on product page

INKLY
Pathfinder
141 0 18

Hi, 

Does anyone know how I can make the product description show but not entirely and have something like See more that will open to show the full description? (See reference image) Thank you for your help ! 

 

Best regards,

Store URL: https://servicedetable.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=165532303688

INKLY_0-1727944355423.png

 

Replies 10 (10)

Meeyah424
Tourist
6 0 3

Yes I know how you can. Share me your website link to have more look on your site

INKLY
Pathfinder
141 0 18
Meeyah424
Tourist
6 0 3

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&colon;

```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

INKLY
Pathfinder
141 0 18

Hi thank you for your answer, I use a store template and can not see in the edit code section something called 'product.liquid' or something similar. Could it be one of the snippet files?

 

INKLY_0-1727945383008.png

 

Meeyah424
Tourist
6 0 3

You're welcome! If you're using a Shopify store template (often with Online Store 2.0), the structure of your theme will be different from the older `product.liquid` file. In newer themes, Shopify uses **Sections** and **Templates** to manage pages like product pages. Here's how to proceed:

### Step 1: Identify the Correct File
1. **Go to Shopify Admin > Online Store > Themes > Actions > Edit Code**.
2. Look in the **Sections** folder for a file like **`main-product.liquid`** or **`product-template.liquid`**. In **Online Store 2.0** themes, this is where the product page layout is usually defined.
3. Alternatively, check the **Templates** folder for a file named **`product.json`** or **`product.liquid`** (if it exists).

### Step 2: Modify the Product Description Section

Once you've located the correct file:

1. **Open the file** where the product description is being rendered.
- In most themes, it will be a part of the product's main section, like this:
```liquid
{{ product.description }}
```
- This is where you need to apply the collapsible effect.

2. Replace it with the collapsible "See More" functionality. You can update it like this:

```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>
```

### Step 3: Add JavaScript for Toggling

1. Add the following JavaScript to the **Assets > theme.js** or in the **product-template.liquid** file (wherever you’re editing):

```html
<script>
document.addEventListener("DOMContentLoaded", function() {
const description = document.getElementById('product-description');
const seeMoreBtn = document.getElementById('see-more-btn');

const maxHeight = 200; // Set the initial height for the collapsed state.

// 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)

1. Add this CSS to **Assets > theme.css.liquid** or **theme.scss.liquid** to style the button:

```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: Save and Test
1. **Save the changes**.
2. **Preview** your product page to check that:
- The description is initially truncated.
- Clicking "See More" expands the description, and it toggles back when "See Less" is clicked.

---

If you're still unsure where the description is in the code, or if you can't find the right file, you might want to check the documentation for your **specific theme** or reach out to the theme provider for guidance. The new Shopify Online Store 2.0 themes can have different structures, and understanding where to place custom code can vary.

INKLY
Pathfinder
141 0 18

Thank you, I was able thanks to you to find the file: 

 

Is this where I should pasted the code for the collapsible effect?

INKLY_0-1727946050622.png

 

Meeyah424
Tourist
6 0 3

I can’t see the image well. Can you copy the paste around it here ? 

INKLY
Pathfinder
141 0 18
{% if product.description != blank %}
<div class="product__description">
<span class="product__description--title">{{'product_page.page.product_description'|t}}</span>
<div>{{ product.description }}</div>
</div>
{% endif %}

DeepVyas
Shopify Partner
771 10 8

product description show but not entirely and have something like See more that will open to show the full description

 



Try this code:  <div class="page-width"> <div class="product-description"> <div class="short">{{ product.description | truncate:'205' }}...</div> <div class="long">{{ product.description }}</div> <div class="read-more-button">Read More</div> </div> </div> <script> const readMoreBtn = document.querySelector('.read-more-button'); const text = document.querySelector('.product-description'); readMoreBtn.addEventListener('click',(e)=>{ text.classList.toggle('more'); if (text.classList.contains('more')) readMoreBtn.innerHTML = 'Read Less'; else readMoreBtn.innerHTML = 'Read More'; }) </script> <style> .product-description .long { display: none; } .product-description.more .long { display: block; } .product-description.more .short{ display: none; } </style>

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com
INKLY
Pathfinder
141 0 18

Thank your for your answer, where should I paste this code?