Right-aligned image with lighbox

Small right aligned images use the class “right” to get them to display on the right side of the text you’ve entered.

This post shows you how to insert a small right-aligned image using the the light-box function. For other instructions, please refer to the links on the left.

To insert a small right-aligned image into a page or blog, use the “insert image” function in your toolbox, and then alter the tag so that it looks like the one in the sample code below.

All Spiffy Stores themes also have the ability to use the light-box function, so that images can be clicked on to view a larger “zoomed” image.

The image to the right has been inserting using the light-box function. When you hover over the image, you will see that your cursor becomes a hand. Click on the image, and you’ll see the light-box in action.

Read more »

Right aligned image

Small right aligned images use the class “right” to get them to display on the right side of the text you’ve entered, as demonstrated below.

This post shows you how to insert a right-aligned image normally without any lightbox functions.

To insert a small right-aligned image into a page or blog, you just need to use the “insert image” function in your toolbox.

You then use standard html code to refer to your image, ensuring that you give it a class of “right”.







HTML code for inserting the above image

<img src="/files/your-image-name.jpg"  class="right"/>

Textile code for embedding the above image

!(right)/files/your-image-name.jpg!

Left aligned image

Small left aligned images use the class “left” to get them to display on the left side of the text you’ve entered, as demonstrated below.

This post shows you how to insert a left-aligned image normally without any lightbox functions.

To insert a small left-aligned image into a page or blog, you just need to use the “insert image” function in your toolbox.

You then use standard html code to refer to your image, ensuring that you give it a class of “left”.







HTML code for inserting the above image

<img src="/files/your-image-name.jpg"  class="left"/>

Textile code for embedding the above image

!(left)/files/your-image-name.jpg!

Left-aligned image with lightbox

Small left aligned images use the class “left” to get them to display on the left side of the text you’ve entered.

This post shows you how to insert a small left-aligned image using the the light-box function. For other instructions, please refer to the links on the left.

To insert a small left-aligned image into a page or blog, use the “insert image” function in your toolbox, and then alter the tag so that it looks like the one in the sample code below.

All Spiffy Stores themes also have the ability to use the light-box function, so that images can be clicked on to view a larger “zoomed” image.

The image to the left has been inserting using the light-box function. When you hover over the image, you will see that your cursor becomes a hand. Click on the image, and you’ll see the light-box in action.

Read more »

Using the minimal theme in your store

This section contains information on how to customise the minimal theme to suit your needs. Click on a link to the left to get instructions for each type of customisation you want to do.

How to change your address details in the footer

This section of your store is now editable in the “theme editor” section of your toolbox. To edit your address in the footer, you just need to enter it in the fotter section in your theme editor.

How to change the pictures in the slideshow on the home page

To change the pictures in the slideshow on your home page, you will need to delete the current images, and then add new images your store’s theme.

Deleting the current images

To do this, go to the “Design & Assets >> Theme editor” section of your toolbox, in the “Theme Assets” section on this page, you will see the five slideshow images…

Click on each of these images, and delete them individually in the popup window that displays.


Adding your new images

Your new images should be sized at exactly 960px × 303px. You will need 5 images (unless you want to change the number of images in the slideshow which is more complex to do).

Name each of your images with the same names that the original images had…

  • slideshow_1.jpg
  • slideshow_2.jpg
  • slideshow_3.jpg
  • slideshow_4.jpg
  • slideshow_5.jpg

… and then upload your images in the “Upload a new theme asset” section of this page.

You new slideshow images should now be displaying on your home page. If they are not, hold down the SHIFT key in your keyboard and click your browser’s refresh (or reload) button to reload your computer’s cached version of the page.

How to use the “Lightbox” features to insert photos into pages & blogs

To insert a large image into a page or blog, you just need to use the “insert image” function in your toolbox. All Spiffy Stores themes however also have the ability to use the light-box function, so that images can be clicked on to view a larger “zoomed” image.

The first part of this post shows you how to insert an image using the the light-box function. The second part of this post shows you how to just insert an image normally.

Read more »

What is the best image size to use for product images?

We recommend using square images, around 600px. The reason is that when Spiffy Stores resizes an image, it maintains the aspect ratio.

For example, if you upload a product photo that is 400 × 600 (a tall rectangle), then display it using the “medium” size (as Minimal does on the home page and collection pages), then it will display as 180 × 240. Similarly, if you uploaded a 600 × 400 image it would be resized as 240 × 180. Both of these examples will display “fuzzy” in the minimal theme, as it stretches images to fit so that they are always square.

Uploading an image that is 600px square means that all of your images will appear crisp and clean. They won’t appear to be stretched on any of your pages, and they will be sharp in the lightbox (when you click on the image in the product page).

How to add the "collections" page to your store

The collections page shows a slideshow of the first 5 products in each of your collections.

To add the “Collections” page to your store, you just need to create a link to a page that has the address “/collections” to do this, follow the instructions below:

  1. Go to the “Store menus” section of your toolbox
  2. Scroll down to the menu that you want to add the link to
  3. Click the “Add Menu Item” link
  4. Enter the name of your link (e.g. Collections)
  5. Choose “Web address” next to “This item links to:”
  6. Enter “/collections” (without the quotes)
  7. Click the “Add item” button

You’re also able to edit the text that appears on this page. To do this, follow the instructions below:

  1. Go to the “Pages & blogs” section of your Toolbox, and click the “add a new page” button. Give your page a title, and add some text, then save it.
  2. Click on the edit link, and then click on the “handle” link, which is next to the “Title” field. This should then display the field for your handle.
  3. Change the handle of your page to “collections”.
    When you’ve done this, your page title and the text that you’ve entered will appear on your collections page.