Blog formatting on the back end

New Member
4 0 0

HI everyone,

 

I am using Debut them and my blog back end need more feature buttons. It is driving me crazy to try to post a blog which looks nice and neat. I have to add manual code to add a space between image and text, if I touch something on the top of the text everything shifts, I really need a nice easy way to post, back button, space, tab, similar to a Word document type, I really need the text stay in line with all text if  I put next to an image (usually is starts going under the image if this is longer and next shorter stays next to image. Such a mess!! 

 

See how little button options I have below, this even look ok but I struggled 1.5 hours and gave up.

blog back end.png

 

Ideally, I would prefer coding instead of a monthly app, please. Any suggestion on how to solve it?

I would do look into a free trial for an app in the worst case.

 

thank you so much

Szilvia

0 Likes
Highlighted
Shopify Staff
Shopify Staff
81 8 15

Hey, @Szilvia!

 

My name is Lilith, I'm on the Social Care team at Shopify.

 

Thank you for bringing up the challenges that you're having with the Rich Text Editor for blogs. I'd like to help you out to make sure you can get the results you want in your blog post formatting.

 

I've put together some ideal solutions that range from code to apps. I realize you might want to stick to code, but I'd also like to make sure you have as many solid solutions at your disposal in case you'd like to try any out.

 

When editing blog posts on the admin through the Rich Text Editor you'll notice that what you see in the box isn't always what you'll end up seeing exactly on the live theme/site. The reason is that each theme will have hardcoded CSS features that will dictate what to override and how to format.

 

That said the first solution that I've thought of for you is to create some alterations in your Debut theme CSS (style sheets).

 

Altering Theme Code for Blog Templates

 

This will be the more complex solution of the ones I'm listing in this reply. However, this is the most effective solution if you're comfortable with HTML, CSS, and Liquid.

 

In order to make some changes I'd recommend checking out one of our Shopify Partner blog posts here:

 

 

This post was made this year and has the most up to date methods to create your own blog template to alter in your Theme Editor and in your admin.

 

Based on how you do with that, you can also opt to hire the help of our Partners in the Experts Marketplace. Our partners are extremely well versed in the platform and the coding languages to create a custom solution for you.

 

Working with the Rich Text Editor and HTML Properties

 

With the screenshot, you posted there isn't any padding between the content and the edge of the image. If you're more comfortable using some code to help alter this you can increase the padding of the image. What this will do is to create some space between the text and the image.

 

The code that you'll want to include in your image element is the padding and float properties. I've got a short step tutorial here for you from W3 Schools.

 

Additionally, here is a much simpler tutorial as well from the Canvas Community

 

Make sure that you switch your Rich Text Editor to HTML by clicking on this button here:

 

 

alt

 

 

For an idea of what the code might look like for your image before and after once you format it, here is an example from the Canvas tutorial above.

From this:


alt

 

 

To this:

 


alt

 

 

Working with the Rich Text Editor and HTML Converter

 

The next easiest solution is to type up your content and format it the way you want it to look in a converter.

 

You can use this Word to HTML converter to write up your content and convert it to HTML. Then, you can copy and paste the HTML code into the HTML side of the Rich Text Editor:

 

 

alt

 

 

I've used this method when I'm in a rush and need to get a post up right away or if I am not able to spend the time coding things myself.

 

Apps For Blog Formatting

 

I know you weren't asking for apps. However, I thought I'd add one of my favorite ones here just in case you opt to go this route in the future.

 

 

This app is specially made by our Shopify Partner to make it easier and quicker for merchants to format and create their own style of blogs.

 

Additional Help and Tips

 

I'd also recommend checking out our post on 4 essential blog post templates. This is a great post to help give you some ideas on some styling that might work specifically for your niche.

 

Each customer audience will have a unique set of likes and appeals to certain styles of blogging. This might be a great way to give your blog posts a new fresh look and style.

 

External resources on editing blogs:

 

These here might a good place to check in on some other ideas for blog styling.

 

 

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes