How to customise appearance of product description on product page

[INKLY]

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

[Meeyah424]

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

[INKLY]

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

[Meeyah424]

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:

{{ 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:

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

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

.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

[DeepVyas]

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

Try this code:

{{ product.description | truncate:‘205’ }}…

{{ product.description }}

Read More

.product-description .long { display: none; } .product-description.more .long { display: block; } .product-description.more .short{ display: none; }

[INKLY]

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?

[Meeyah424]

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:

{{ 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:

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

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

.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]

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

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

[Meeyah424]

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

[INKLY]

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

[INKLY]

{% if product.description != blank %}

{{'product_page.page.product_description'|t}}

{{ product.description }}

{% endif %}