Moving text in the collection page below the products

Store Design
,
1

Hi there!

I am the owner of the page www.popandpal.dk, and I have som issues with the following;

On the collection sites, say for example these, https://www.popandpal.dk/collections/traelegetoj and https://www.popandpal.dk/collections/borneplakater

The text overlays my pictures. Also its kinda difficult to reach 600 words, as they take up alot of space on both a smartphone and on a webbrowser.

I want to move my text down below my products, so that it looks more readable.

Is there someone who could explain how to do it, like I was a 1.grader, as my IT-skills arent that great

with kind regards

Eren

2

Hello @erencicek

@media screen and (min-width: 641px){
.ImageHero__Block--large {
    max-width: 100%;
    margin-left: 5rem;
    margin-right: 5rem;
}
.ImageHero__Block--large {
    max-width: 100%;
    margin-left: 2rem;
    margin-right: 2rem;
}

Do you want like like this:

2023-04-06_15-22.jpg
2023-04-06_15-22.jpg1897×842 161 KB

3

Hi!

Thank you SO VERY much for your time and kindness!

That is exactly what I want!! I just dont understand how I do, and what to do with that code :confused: Where do I copy it into and then what do I do?

Is that applicable on all my collections, if I want separate texts on each collection site?

With kind regards

Eren

4

The text could also be at the top, below the H1 text; Its just that when I write more than 200 words it overlaps with the picture, so maybe it would better SEO-wise to do it below the products

with kind regards

5

Hello @erencicek

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets-theme.css>Add this code at the bottom.

@media screen and (min-width: 641px){
.ImageHero__Block--large {
    max-width: 100% !important;
    margin-left: 5rem !important;
    margin-right: 5rem !important;;
}
}
.ImageHero__Block--large {
    max-width: 100% !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}
1 Like
6

Hi!

Thank you once again for your time! Please do forgive me for my ignorance.

I copied the code and pasted it into the assets and themes at the bottom. Nothing has really changed, when I try reach the result you showed

Maybe I am doing something wrong

Best regards

7

Hello @erencicek

I am unable to see that section, your text overlay section is not showing.

8

@erencicek you need to make changes in html structure by adding that text section underneath the product section :

Ujjaval_0-1680777527439.png
Ujjaval_0-1680777527439.png431×612 60.5 KB

9

So the text is gone, because it was on all collection pages.
I have 7 collection categories, and I want each collection to have an unique text on the bottom. When I placed a text box, the same was at all the pages.

I am sorry for the inconvenience, but I really dont know how to approach this

With kind regards

10

@erencicek you can create meta-field for the collection custom code from settings->custom data->meta field ->collection
and called it into your collection page and add the custom code for the desire collection custom text .

11

Thank you! So when I enter the meta field and collections, should I then copy the code in there? Like if you were to breake it down and explain it as I was an incompetent idiot, how would you describe it :grinning_face_with_smiling_eyes:

I was succesful in making a meta data field, but from there nothing happened, as I added a text.

With kind regards