How could I made an image and type the text like this in point form? Seems like I couldn’t separate the text to multiple lines like this picture in my theme setting.
Can anyone help me with this? Thanks.
Topic summary
A user seeks help formatting product page content with bullet points and images, similar to a reference screenshot they provided.
Initial Solution:
- Another user suggests using HTML list markup (
<ul>,<li>tags) in the theme’s rich text editor or product description area - For dynamic content across multiple products, they recommend creating custom metafields with multi-line text or HTML schema
Refinements & Customizations:
- The user successfully implements basic bullet lists but wants to remove the default bullet point dots
- Solution provided: Add CSS with
list-style: noneto hide bullets - User then adds SVG icons but needs them larger
- CSS adjustment provided: Set SVG width and height to
2remfor proper sizing
Outcome:
- Issue resolved successfully with working bullet-free lists and properly sized SVG icons
- The helper provided code snippets for HTML markup, CSS styling, and SVG asset integration throughout the thread
Hello @Vizono ,
- LIST-1
- LIST-1
- LIST-1
- LIST-1
1 Like
Thanks for the answer, but where should I put this code in? I want to make a new section on the product page that shows the image and text like the picture above.
1 Like
If this is description part you can add description, If not you can create new schema for multi line text area or html then you can add there,
If you want to show all product just create schema you want to dynamic this so you can create metafields for product.
1 Like
Is there any code you can help me with this to create six bullet points? Which means six separate lines. Thanks a lot.
Drop here your website link.
1 Like
Hi,
You can add list style on you editor,
- List item 1
- List item 2
- List item 3
- List item 4
1 Like
Where should I put this code in? Thanks.
Rich text area,
1 Like
It works! Thank a lot.
One more question, how can I not display the bullet point dots?
Hello Dear,
You can upload file assets folder and add link, Or if you have SVG that’s good for loading time.
{{ 'IMAGE_NAME+FROMAT', asset_url }}
1 Like
Thanks a lot!!
Sorry I’m confused again. If I want to disable the bullet point dots and post a SVG, which part of the code should I delete or change? Thanks.
You not delete the code just add this css
ul.list-icon{
list-style: none;
margin: 0;
padding: 0;
}
List style none means list styling hide.
1 Like
I made this and insert the svg code. But how can I make the svg icon bigger (As big as the text almost)
Thanks for answering so many questions Bro. Muchly Appreciated.
You can add this css
ul.list-icon li span svg {
width: 2rem;
height: 2rem;
}
1 Like
It works well. Really Thanks a lot for your help bro 