Want to create an html block with text and image on category pages

Hi,

I am looking to write some content as text in every category page for SEO, so if you check here :
https://www.sunnshinehk.com/product-category/lock-body-cylinder/

please check the screenshot attached.
I want this section on the top and then the sidebar and products on thsi page should be displayed below.

Right now this section is coming in-line with the sidebar and then the products are displaying below. Rater when a visitor visits any category page, I want them to first have one or two small images on the left and a short description on the right about the specific product category, then they can scroll down for the products.

This text will also help me for SEO. Let me know how to do it. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but this is how it works by default. If we try using Custom CSS then it will affect the layout.

If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS. And see if this works for you otherwise it requires Customizations.

.term-description, .page-description {
    margin-left: -320px;
}

.sidebar-container {
    margin-top: 35%;
}

Best Regards

I added the code you sent me on this page :
https://www.sunnshinehk.com/product-category/lock-body-cylinder/

however I dont want this section on the shop page, but the sidebar has gone down on the shop page, can you let m eknow how to do it back-up?
https://www.sunnshinehk.com/shop/

Also the product pages like this:
https://www.sunnshinehk.com/product/40×85-wholesale-price-lock-body-cylinder/

The sidebar needs to come up, is it possible ?

Hello,

This works globally for all the shop pages that’s why it is affecting the shop page as well. Please replace the previous CSS with the following then check back and see if this works for you otherwise it requires Customizations.

.tax-product_cat .sidebar-container {
    margin-top: 20%;
}

.tax-product_cat .term-description, .page-description {
    margin-left: -365px;
}

Best Regards.

Its okay, i think i managed to do it, I just removed the sidebar code and kept description code as :
.term-description, .page-description {

margin-left: -10px;
}

So the sidebar is back to its position on product pages, category pages and shop page :
https://www.sunnshinehk.com/shop/
https://www.sunnshinehk.com/product-category/lock-body-cylinder/
https://www.sunnshinehk.com/product/280ml-transparent-silicone-sealant/

i just have to add the description in all the category pages as a html block.

my only concern was I will not be able to show the number of products display on the shop page.

Hello,

We are glad that you managed to find the solution for yourself.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts