Ecommerce format like a Pro

Hi 2Shapes Community!

Xavier from the 2Shapes Team here.

Today I bring a guide to format your text in 2Shapes Ecommerce.

2Shapes uses Markdown, an amazing way to give flavour very easily, no coding experience required.

Here you will find how to make your text bold, italics, strike-through, images, and even links to other websites or apps, all compatible with your 2Shapes Ecommerce.


Index

  1. Titles
  2. Emphasis
  3. Lists
  4. Links
  5. Images
  6. Tables
  7. Quotations
  8. Horizontal line
  9. Emojis
  10. YouTube videos

1. Titles:

To format text like a title, you will need to add # as many times per level, for example: # H1 is awesome would you like this:

H1 is awesome!

Here you have all the title formats:

# H1
## H2
### H3
#### H4
##### H5
###### H6

2. Emphasis

This groups Italics, Bold, Italic Bold, and Strikethrough, here is what you need to type:

For Italics

You have to wrap your words in asterisks like:
*This text will be in Italics*This text will be in Italics

For Bold

Wrap your words with two asterisks:
**This text will be Bold**This text will be Bold

For Italic Bold

Type two asterisks and an underscore like this:
**_This text will be Italics and Bold_**This text will be Italics and Bold

For Strikethrough

Wrap your text in two tildes:
~~This text will be Strikethrough~~This text will be Strikethrough


3. Lists

You can have your lists organized with numbers, or with bullet points:

For Numbered lists

Type the number of the list followed by a dot and a space after the text you want to list, if you want to list more things inside a step, just type three spaces between the sublisted items:

1. This will be the first item on my list
2. This is going to be listed as the second
···1. The second item will have another list inside
···2. And this will be the second and last sublist inside step 2
3. And this one is the third

  1. This will be the first item on my list
  2. This is going to be listed as the second
    1. The second item will have another list inside
    2. And this will be the second and last sublist inside step 2
  3. And this one is the third

For Bullet point lists

Type either asterisk, minus, or plus before the text you want to order, and if you want to list more things inside a step, just type three spaces between the sublisted items:

* This is an item on the list
···* Items can have sublists under them
···* Items can have sublists under them

- Items can also be listed typing minus
···- Items can have sublists under them
···- Items can have sublists under them

+ And also with the plus symbol
···+ Items can have sublists under them
···+ Items can have sublists under them

  • This is an item on the list
    • Items can have sublists under them
    • Items can have sublists under them
  • Items can also be listed by typing minus
    • Items can have sublists under them
    • Items can have sublists under them
  • And also with the plus symbol
    • Items can have sublists under them
    • Items can have sublists under them

4. Links

To make your text link to a website, wrap your text with brackets, and type the website address with parenthesis, like this:

[Here goes the text you want to link](And here goes the website address)

For example, you could link this text and it will send you to the 2Shapes website.


5. Images

To enter images inside a text block, just type ![alt text], followed by the website address of your image and then a description wrapped in quotation marks, all inside a parenthesis.

Note that the description you enter will only be visible if the user hovers the mouse on the image.

![alt text](upload://epH46tlrY6zT9a52wow7FcXCN6p.jpeg "These are the views we have from our offices" )


6. Tables

To make a table, separate words in columns using the | symbol, and indicate where headers finish by typing three minus symbols.

Also, you can control the alignment of the column by adding a : symbol on the left, right, or both sides of the three minus symbols that separate headers from the other rows.

Here you have an example:

Column 1 | Column 2 | Column 3 | Column 4
:--- | :---: | ---: | :---:
These | rows | aren't | headers
and |look | amazing | too

Left Column Centered Column Right Column Centered Column
These rows aren’t headers
and look amazing too

7. Quotations

If you want to format your text as if referencing someone said, or cite a previously mentioned text, enter the >symbol before your text:

> Through my experience and the continuous industry assessment, I identified the areas where we could impact jewelry business performance.

-Rafael del Molino, 2Shapes CEO

Through my experience and the continuous industry assessment, I identified the areas where we could impact jewelry business performance.
-Rafael del Molino, 2Shapes CEO


8. Horizontal line

You can draw a horizontal line that will split your content like you’ve been seeing on this post to separate the different format features.

To draw these lines, either type three minus symbols, asterisks, or underscores:

---
***
___






9. Emojis

To add an emoji to your text block, just type the emoji name between : symbols.
You can find all the emojis you can use, and their name in this guide: https://gist.github.com/rxaviers/7360908

For example:

I :heart: 2Shapes → I :heart: 2Shapes


10. YouTube videos

If you want to add a YouTube video inside a text block follow these steps:

  1. Find your video on YouTube, and click on the Share button:

  2. Next, select Embed:

  3. Finally, copy the code and paste it on your text block:

It should look like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/z_h8UlW4PRQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Once you save your changes, it will show the selected video:

2 Likes

That’s amazing!!! No limits!! :slight_smile:

Rafael del Molino

1 Like