Seller Info & Store Description

The Store Description area is where you can customise the look of your store page, with photos, links and whatever content you like.  The Seller Info area is shown in product pages.  Both of these are set in your store settings area.  It is advised to do this on the “backend” editor as you have more options to customise the look.  Note also that the order of the sections is different between the “backend” and “frontend” screens, so make sure you are working on the correct section!

This page also explains how you can use the “shortcodes” to make interesting layout changes to your store sections – which can also be used in product listings as well.


Shop Description

This is the section shown at the top of your store page – above your products.   Usually where you introduce your store and give any information customers will need to know.  You can link to your fb page and other stores (such as etsy) if you like.  You can add photos as well.

When adding links to your facebook page or other stores, please make sure that the links are set to “open in a new window” – so that customers remain on the Cloth Pad Shop site and do not leave to go to the linked site.

.To give you greater flexibility in how this looks, (and because the way it displayed by default didn’t look great), we have disabled the default banner/logo display that was in a “branding” tab in your settings page.  (Which has now been removed and is why the help guide video mentions there is no point uploading them there).

To add your store banner/logo, you will need to use the “backend” view of your Store Settings – as the “frontend” area does not have the ability to upload photos.  Then just click the “add media” button to upload it, and insert it into the page.  (The video help guide shows how to do this).  We do have a maximum image size of 300kbs.

You can drag the image to the size you like after it has been uploaded.

You can just upload the banner and be done with it.  But to give your store a better look, you can also add some creative flair – so make your shop unique and spice things up a bit with the shortcodes to make your page a bit more fancy..


“Column” shortcode to put Banner on the left (or right)

Using “column” shortcode to put a banner on one side of your text.  This is a good option if your banner is square.  Looks way better (IMHO) than your banner just sitting above your text, and makes your store page shorter (people see your products quicker!).  If your logo has a transparent background then the page background will show through and make the image look even more fancy!  Do this by putting your banner image into the first column and the text into the second column.  If you have a lot of text, put some below to  make the columns even (tip – you can drag the image to change the size, so that it fits the paragraphs of your text)

Code:   (Download code here)

If you want 2 columns, use the code “twocol”, if you want 3, use “threecol” and so on.

The code is a little confusing but basically each of the columns (except the last one) starts with “twocol_one” and ends with “/twocol_one”  (even if it is the second, third or forth column, they are always called “one”)  – unless it’s three columns, in which case it would be “threecol_one”  etc.  Then the last column must have “_last” after it.

Here is a colourcoded example that shows the code and the content to make it clearer

Here’s an example to show you how it’s done (click to enlarge)


“tab” shortcode to put your logo/banner above or within a tab.  

This option works best if you have a long banner that wouldn’t fit into a column.  The “tab” shortcode allows you to display extra content in the tabs.  Each tab acts like a little page, allowing you to put several pages worth of content in a small space.  Useful for putting in your care instructions, more details on the fabrics you use, FAQs and other things you want customers to be able to have, but don’t want it cluttering up your listings or your shop page.  The nice thing with the tabs is that if you keep the first tab with only a couple of lines of text, the page looks nice and neat and won’t be too far to scroll down to your products – but you can make the other tab pages longer so that you can fit more information into them.  

I’d suggest if your banner has a transparent background it might look nicer above the tabs.  If it has a white background it might look nicer inside the tabs.

To do the tab shortcodes, you need to copy the tab shortcode (Find that here on the Shortcode page).

Watch a video of how to do the tab layout shortcode

Here’s another example.  You can type in everything you see here, and the highlighted parts (where it says “store information content goes here” etc) –  Those parts can be changed to say whatever you want it to say, that is the content of the tab.   You can also change the writing inside “the quotation marks” which are the tab titles.

Example:

On the page, that code becomes this:

Store information content goes here.
Postage & Policies content goes here.
Care Information content goes here.

Another example of how it looks in your editing screen

You can add as many tabs as you like, just be aware that on a mobile the width of the screen will be narrower so the tabs will display on several lines if you have lots of them.


Using a “tab” shortcode with a “column” shortcode

Now we’re getting serious 😀  You can combine the use of a column shortcode for your banner image with the “tab” shortcodes to make your information sections.  Like this:

Note that while you can do columns above a tab section, you can’t put columns inside a tab section.


Using “Info Box” shortcode for a special information announcement

If you look at the image below you can see there is a grey box with a blue square – that is an “info” box and you can use one to inform customers about something special like free shipping, that you will only ship within Australia or something. 

To do this, you need to type in the “shortcodes” option for the box.  In this case I used an “info” Box so it has the little blue info icon

You can choose which type of box you want and type in the code for that type.  The stuff I have in pink, you can instead use whatever wording you want in that part.  But the black writing needs to be exactly as shown.

“Type” defines the colour and icon of the box.

“Style” defines if it has “rounded” ends or not

“Border” defines if there is a full border or just top/bottom

Box if you don’t define any style or type
Rounded box with full border
“Info” box (rounded)
Tick box
Download (rounded, full border)
“Alert” box (full border)
“Note” box
If you want to get super creative you can even put your own little flag icon inside the box!  You need to use the link code to the icon you want (for example a small flag image) to show in the box.  To give a little space between the flag icon and your message, you might want to put a few extra spaces in (I used 4 here) before your message.  Like this:

    Ships to Australia Only!

Here’s some tiny flags you could use.      (Right click and copy the url for the image, then paste that in as the icon url)

To make a box that tells people to download your care instructions, with a link you could do this:

Just highlight the writing you want to link, then click the link icon on the top of the editor

Click on the cog icon for “link options”

Then paste or type in the url for where you want people to go,  tick the “open in new window” option then click the button to make your link.

 

 


“sticky” shortcode

You could use the “Sticky note” shortcode to put your description onto a cute  post-it-note!  This is a great option if you’re closing your store for a break.

To do this you’ll have to put the code in yourself, as it’s not in the shortcode menu, but it is very simple.

You can’t use columns or tabs or anything fancy into this stickynote.  But you can add images.

Hello, I’m a sticky note!

Example link to facebook


Seller Info

This is an area that is shown on a tab in the products – It’s like a mini version of your store description.  You may want to make that fairly brief so that it doesn’t make the page too long. Make sure you look to see what it looks like when customers look at your products.

Some things you could use this area for:

  • Fabric composition information
  • More information on the construction or policies of your store
  • Brief information about your store
  • Custom order turnaround time
  • Care information (or a link to download them)
  • (Anything you like)

When adding links to your facebook page or other stores, please make sure that the links are set to “open in a new window” – so that customers remain on the Cloth Pad Shop site and do not leave to go to the linked site.

You can use the “tab layout” shortcode to put your policies, care instructions, fabric compositions and other info into compact tabbed boxes so that you can put all your info in there, without making the page enormously long 🙂  See an example in one of my listings.


(example of seller info made with the “tab layout” shortcode and one without)

Each tab acts like a little page, allowing you to put several pages worth of content in a small space.  Useful for putting in your care instructions, more details on the fabrics you use, FAQs and other things you want customers to be able to have, but don’t want it cluttering up your listings.  The nice thing with the tabs is that if you keep the first tab with only a couple of lines of text, the page looks nice and neat and won’t be too far to scroll down – but you can make the other tab pages longer so that you can fit more information into them.  

After you have added your content, then look at the page to check it works as you want it to.