Move my Collection description below my products

Technical Q&A
1

Hi I am using the venture theme. I want my collection descriptions to appear below the actual products. right now my long collection description is above the products and i don’t like it. here is my code. can someone be so generous as to tell me how to fix it in the liquid? Thank you soooooo much… https//:www.chickychickyblingbling.com

Show More

{% paginate collection.products by 20 %}

{% for product in collection.products %}

{% include ‘product-card’, product: product %}

{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.

The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if shop.products_count == 0 %}

{% assign collection_index = 1 %}
{% for i in (1..10) %}
{% case i %}
{% when 7 %}
{% assign collection_index = 1 %}
{% when 8 %}
{% assign collection_index = 2 %}
{% when 9 %}
{% assign collection_index = 3 %}
{% when 10 %}
{% assign collection_index = 4 %}
{% endcase %}

{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ ‘product-’ | append: current | placeholder_svg_tag: ‘placeholder-svg’ }}

{{ ‘homepage.onboarding.product_title’ | t }}

$19.99

{% assign view_string_length = ‘products.product.view’ | t | size %}
{{ ‘products.product.view’ | t }}

{% assign collection_index = collection_index | plus: 1 %}
{% endfor %}

{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}

{{ ‘collections.general.no_matches’ | t }}

{% endif %}
{% endfor %}

{% if paginate.pages > 1 %}

{{ paginate | default_pagination | replace: ‘« Previous’, ‘←’ | replace: ‘Next »’, ‘→’ }}

{% endif %}

{% endpaginate %}

2

@Chickybling ,

On home are you explaining ?

then add this

a.featured-card.featured-card--contain {
    display: flex;
    flex-direction: column-reverse;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

3

Hi @Chickybling ,

I checked and did you change it?

Screenshot.png
Screenshot.png1906×499 145 KB

Now it is showing full, if you want it to be inside the content and display better, you can change the following code:


	{% if collection.description != blank %}
	

	{{ collection.description }}
	

	{% endif %}

Hope it helps!

4

I ha changed it. Then didn’t like how it looked and am starting over. I will try to figure out how to change it again and then implement your advice to re-center the text and photos

5

Hi @Chickybling ,

So did you solve it? Do you need any other help?

6

Hi

I tried to follow the instruction above and it broke my website and every thing looks out of place. I removed the code and then it save to undo the changes but it did not help. Any ideas?

last few lines of my code are

.order-discount-wrapper {
@include media-query($small) {
display: flex;
justify-content: space-between;
width: 100%;
}
}

.order-discount-cart-wrapper {
display: flex;
justify-content: center;
margin: $gutter-site 0 5px 0;

@include media-query($medium-up) {
justify-content: flex-end;
}
}

.product-recommendations {
background-color: $color_body;
margin-bottom: $gutter-site * -2;
padding: ($gutter-site * 4) 0;

@include media-query($medium-up) {
margin-bottom: $gutter-site * -4;
}

thanks