06 06/2007 Textile & Shopify - Entering information has never been easier.

Developed by Dean Allen, Textile is a lightweight markup language – in plain English, shorthand for XHTML. Along with many other popular CMS and blogging tools, Shopify provides Textile support for entering articles in static pages such as your ‘About Us’ page or in your blogs – i.e. ‘News’. Textile allows you to add some style to your articles without knowing any XHTML – Textile will convert your text to clean, valid code, keeping your site in order! Here’s a few examples you can use at home:

Headings

h3. – adding h#. before text will convert it to a heading with the level denoted with a number # – check which headings your developer has used for your logo (usually the H1) and / or main headings as they may have special styling applied to them which you’ll invoke by applying this level of heading.

Body Text

To have text converted to paragraphs, just type away – textile will automatically convert the text to paragraphs for you. To start a new paragraph, leave a blank line before typing your next paragraph. If you start on the next line, textile inserts a line break – not a paragraph break.

*bold* – bold

_italic_ – italic

^superscript^ – ^superscript

~subscript~ – _subscript

Bulleted List

* list item 1
* list item 2

displays

• list item 1
• list item 2

Numbered List

# list item 1
# list item 2

displays

1. list item 1
2. list item 2

Links

"linktext":http://... (http://… being the page you want to link to i.e. http://www.propellerglobal.com – remember to always include the http:// bit or it wont work!)

Images

!(left)http://image-address(alternative description)! – add an image to your article. Broken down as follows;

! (alignment class) image url (alt text) !

Step by step

1. Upload the image to your Shopify library by clicking the ‘look & feel’ tab in the admin panel, scroll to the bottom and click on ‘Upload a new asset’ then Choose file, find the image on your computer (Shopify will not resize this image so make sure you have it already sized as you would like it displayed) then click Upload.
2. Once uploaded, Shopify will display the image – right click (windows) or ctrl click (mac) on the image and select copy image address (mac).
3. Open the page or blog where you want the image and before the text you wish to align the image to one side of, enter the following code:
   !(left)http://image-address(alternative description)!
4. Select the url part – http://image-address – delete and paste the image location you copied in step 2.
5. Change the first part (left) to reflect the side you want the image aligned to – NB This assumes that your developer has used this class description and is by no means standard across the board.
6. Replace the text – (alternative description) – with an appropriate (short) description for the image. This is for screen-readers and will display if for some reason your image is unavailable.

There’s plenty more you can do with textile but this covers most of what you’ll need. Further information on textile can be found at Threshold State