Center Collection Description in Simple Theme

Solved
Highlighted
New Member
12 0 0

Hello, Shopify community! Can anyone tell me how to center the text description and header at the top of my collection pages? I am using the Simple theme.

0 Likes
Highlighted

Hello @Sagi403,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
12 0 0

url: https://sleegg.myshopify.com/

pass: xaokru

0 Likes
Highlighted

@Sagi403,

Your site is password protected.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
12 0 0

i updated my previous reply and add the password.

 

pass: xaokru

0 Likes

You could either use the Text Alignment in the WYSIWYG editor for the collection description within Shopify admin, screenshot attached.

Screenshot 2020-01-27 at 14.39.55.png

Or you could make a change to your CSS finding the existing rule below:

.collection-description {
margin-bottom: 15px;
}

rule and adding the following.

.collection-description {
margin-bottom: 15px;
text-align:center;
}

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
0 Likes
Highlighted
New Member
12 0 0

thank you.

Is there any way to center the header too?

0 Likes
Highlighted

That's a bit more complicated as the Header and the Sort order dropdown on the right are part of the same row. With the header taking up 1/3 the width and dropdown is 2/3 width.

Would need to know where you would want the dropdown to move to as a result?

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
0 Likes
Highlighted
New Member
12 0 0

If the dropdown could move Below the description of the collection. that would be perfect.

0 Likes
Highlighted

Success.

So to do that you need to remove the sizing classes (medium-up--one-third and medium-up--two-thirds) from the h1 element and the wrapper div of the dropdown.

Then change the order of the elements within that header, so that they are the h1, description then sorting.

These elements will most likely be contained in the collection.liquid files in the theme.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
0 Likes