How can I effectively format rich text for mobile viewing?

Store Design
1

I am using the rich text editor to add details of my collections and I mix pictures and text.
With extreme difficulty and lots of time I am able to format all the content nicely but only for desktop
In the mobile version the result is ugly.

Am I missing something?
Do you have any suggestion how to format text and picture together using reach text editor?

2

Can you share a url of a collection where you are adding rich text?

3

Sure,
for example this page:

https://guidiwines.com/collections/cantine-aldegheri

It’s perfect if I look with my iPad horizontally, but if I look at it on my phone vertically it’s a mess.

4

https://guidiwines.myshopify.com/admin/collections/262148948165

5

It is possible to do what you are trying to accomplish via the rich editor but as you are already finding out, it is really difficult. Then you have the problem of controlling the styling in other screen sizes (mobile, tablet, desktop).

For this to look professional I would go another route:

  • I would add extra fields to collections using this free app https://apps.shopify.com/advanced-custom-field
  • Then I would add the necessary liquid code to your theme to output the data of those fields in your collection
  • Last, you would have to use css to style the data. Here you can adjust the styling for mobile and desktop independently

I could implement this for you of you think this is too technical for you

6

Thanks for your help

I took a look at the app you suggested but it’s too complicated for my skills

and I cannot afford to have someone to do the job for me every time I need to input new data in my collections.

I have to find an easier solution

7

Hi, initial work would need technical skills but I am offering to help you with that for free.
After that, editing collection fields with the app is very very easy and no special skills are required

Let me know if you want me to implement this for you

8

Thanks for your kind reply.

I think I didn’t understand your suggestion then

My concern is that I don’t want to deal with liquid and css everytime I need to add something to my collections

I was reading the instruction of that app and they were talking about coding etc

If its only a first time implementation that you cand do for me and then I can work in the “customize” or “collection/product” sections only, we can try.

Thanks

9

Ok, then. We can do as follows:

  • Please install the app https://apps.shopify.com/advanced-custom-field. It is free and will not modify your theme nor anything that can break something in your site. It is totally safe
  • I will request collaborator access to the following in your store: Themes, Collections, Apps and settings. Please accept the request.
  • I will not edit your live theme. I will make a copy of you live theme and make the changes there. Once this are finished and you are ok with them, you can publish my version of the theme yourself.

Btw, if you could provide a design, even if it is a hand sketch, of how you want the collection to look it will be great.

10

Thanks again for your extremely carefulle help but I think I found an easier solution.

Since the text and the descriptions of my collections can be different in size and shape from time to time it would be a limitation to have a preinstalled format

I discovered that I get a decent result inserting the content of my collection as an image.

So i prepare everything in world, then i convert it to image and insert it.

I get a prefect result with both ipad and mobile format

Only issue is the quality of the picture on big screen

I will work to find a solution to get an higher quality picture

Thanks

11

hi, nice that you found a solution that worked for you. About your described solution, take into account the following:

  • All the text you add in an image will not be read by search engines, therefore will not help Search Engine Optimization (SEO)
  • It is not accesible. For example a blind person which uses an screen reader to navigate your store will not be able to read that text (as it is not really text)
  • To make text sharp (not blurry) in an image in high resolution displays you would need to make the image at 2 times the width of the screen. In a screen 1400px width you would need your image to be 2800px width. This is a very large image which will be very heavy, slowing your page load and therefore resulting in a bad user experience.
12

Damn, you are absolutely right.

To many downside effects with my solution

Lets see if I’m able to use your solution.

I will try to use the same format for all collection

Please see the attached picture

COLLECTION FORM.png
COLLECTION FORM.png2249×3152 108 KB

13

Can I keep adding products and collection to my shop while you are working?

Would they be reflected on your modified copy of my theme ?

14

Hello there,

I did download the app and gave you access.

I posted here an example of what I need.

please let me know your next moves because I need to know if I can keep adding products to my shop or if I have to hold for now

thsnks

15

Hi @Andrea66 sorry for the late response. I was really busy the past 2 days.

You can continue working with your store as normal.

I was going to work in your solution today but it seems that you have removed my access

16

Sorry but I couldn’t wait because I’m late on my schedule

I used another solution formatting my contents with html

thanks anyway