Atelier theme - read more toggle collection banner

Shopify Discussion
1

Hi everyone,

I’m using the Atelier theme and I added a “Read More” collapse button on the collection page.
The fade gradient works on the collection description, but it also affects homepage and footer titles because my CSS includes .rte, which is global.

Here is my CSS:

/* BUTTON CENTER */
.read-more-btn {
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
background: transparent;
display: block;
margin: -20px auto 20px auto;
color: #000;
border: none;
text-transform: uppercase;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s;
text-decoration: underline;
text-underline-offset: 4px;
text-align: center;
width: fit-content;
z-index: 10;
position: relative;
}

/* APPLY BLUR EFFECT ON EXISTING DESCRIPTION */
.collection-hero__description,
.collection__description,
.collection-meta__description,
.rte {
position: relative;
overflow: hidden;
max-height: 4.2em;
line-height: 1.4em;
transition: max-height 0.5s ease-in-out;
}

.collection-hero__description::after,
.collection__description::after,
.collection-meta__description::after,
.rte::after {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3.2em;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.3) 35%,
rgba(255,255,255,0.7) 65%,
rgba(255,255,255,1) 100%
);
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}

/* REMOVE FADE WHEN EXPANDED */
.collection-hero__description.full::after,
.collection__description.full::after,
.collection-meta__description.full::after,
.rte.full::after {
opacity: 0;
}

.collection-description-wrapper,
.collection-description {
position: relative;
z-index: 1;
}

/* Push product grid down */
.collection-wrapper {
margin-top: 40px;
}

My JS (main-collection.liquid)

The button in main-collection.liquid line 24:

{% if collection.description != blank %}
Read More
{% endif %}

The issue:

Because my JS uses .rte as a fallback selector, the fade CSS also applies to all .rte elements sitewide, including homepage and footer titles.
If I remove .rte from the CSS, the fade gradient disappears from the collection banner description.

What I need:

A way to scope the fade effect only to collection page descriptions, without affecting homepage/footer.
Is there a correct selector or method in Atelier theme to target the collection description container only?

URL: run-official

Thanks in advance for your help!

2

Hi @runwayfashion

You need to add a dynamic class inside the rte-formatter for each page, and then use that dynamic class in your CSS.

Best regards,
Devcoder :laptop:

3

You can try to add your JS into this code and check again

{%- if template.name contains 'collection' -%}
  
{%- endif -%}

Best regards,
Dan from Ryviu: Product Reviews App

4

You may try using “Custom CSS” setting of this section.
This is automatically scoped to apply to this particular section only.

5

Hi @runwayfashion ,

Wrap CSS with Liquid condition

Add this in your theme CSS file (or inside <style> where you added the code):

{% if template contains 'collection' %}
////Your code
{% endif %}
6

Hi, im not quite sure. Can you provide me the full code

7

Hi, this didn’t work?

8

Hi, this didn’t work

9

Hi @runwayfashion

Can you give me collaborator access? I can fix this issue in your theme.

Best regards,
Devcoder :laptop:

10

Hi @runwayfashion ,

To limit your CSS to collection pages, add the prefix .collection-template to your selectors. Only .target .collection-hero__description, .collection__description and .collection-meta__description within that container. Remove the .rte global rules. This lets you keep the collection description fade effect intact without breaking text on the homepage or footer, and without breaking any sitewide styling.

11

For some collections, the description is 1–2 lines. In these cases, the Read More button still appears, and the gradient overlay covers part of the text.

Ideally, for short descriptions (1 or 2 lines), the full text should show 100%, and the Read More button should not appear. For longer descriptions, the Read More button works as expected, and the gradient overlay is fine.

I think the issue is related to line height and max-height in CSS, but I want a simple way to hide the button for short descriptions while keeping everything else working for longer text.

Main-collection.liquid - JS:

15

Whenever you need to customize an element, it’s best to create a separate class for it. This keeps your code clean, makes future updates easier, and helps avoid conflicts with the original theme.