I want to add scrollable content on my product pages?

Store Design
1

Hello Community, There are almost 1000 to 1200 words of content in my product page, that why I want to add scrollable bar on my product page like above one.

Screenshot_1.png
Screenshot_1.png1414×820 241 KB

Screenshot_2.png
Screenshot_2.png1181×675 107 KB

Here is the example of site

cigmavape.com

2

Hello @eddiebroke

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hey @eddiebroke ,

To add a scrollable area to your product page, similar to the examples shown in the images, you can wrap the long content in a container with a fixed height and enable scrolling with CSS. Here’s a basic example of how to achieve that:

  1. HTML Structure: Wrap your product description content in a container:

    
    ## Product Description
    

... (long description text) ...
  1. CSS Styling: Set a fixed height and make the content scrollable within this container.
.scrollable-description {
    max-height: 300px; /* Adjust height as needed */
    overflow-y: auto;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Optional: Add styling to the scrollbar */
.scrollable-description::-webkit-scrollbar {
    width: 8px;
}

.scrollable-description::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.scrollable-description::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

This approach will ensure that long content fits neatly into a defined area with scrolling, improving readability and maintaining a clean layout on your product page

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma