The Showtime theme guide

From Spiffy Stores Knowledge Base

If you can't see the video above, you can also view it on Youtube

To preview the Showtime theme, go to http://showtime.spiffystores.com

The Showtime ecommerce theme can be edited in the "Theme Editor" Section of your Store Toolbox. The video above shows what each of the sections in your theme editor does. For instructions on further customizing the Showtime theme to make changes that aren't in the theme editor, scroll to the bottom of this article.

The following customizations are available in the Showtime theme;

Header;

  • Upload your logo and it’s re-sized automatically
  • Choose the menu that you want to display

Slideshows;

  • On the home page slideshow, you can choose which products you want to display in your collection, by creating a custom collection. You can also choose whether to to display your Home Page text, or the text from each product that's in your slideshow
  • On the collection slideshows, you can choose whether to to display your Collection Page text, or the text from each product that's in your slideshow

Social media;

  • Display social media links on product pages
  • Display social media links on blog articles

Site footer;

  • Choose which menus you would like to display
  • Enter custom text for the title of each menu
  • Choose which payment methods you want to display to your customers.

Backgrounds;

  • A choice of 32 built-in backgrounds
  • Upload your own background image
  • Choose the repeat/tiling method for your background image


Showtime theme frequently asked questions

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

The Showtime theme works best with landscape images. The size of photos that digital cameras take can vary widely. A six megapixel camera will generally take photos that are 2816px wide x 2112px high, whilst a 2 megapixel camera will generally take photos that are 1600px wide x 1200px high.

The higher the resolution, the larger the file size, so if you have a 2 megapixel camera, the photos that you would upload straight from the camera are an ideal size. They are uploaded quickly and easily, and they are re-sized by the Spiffy Stores software.

Photos from a 6 megapixel (or higher) camera however are quite large, and can take a long time to upload. For optimum results, these images should be resized to 1600px wide before you upload them.

It's always better to take higher resolution photos, and then re-size them down before you upload. Higher resolution cameras will generally give better results, so an image captured at 8 megapixels, and then down-sized will generally look much better than a photo that was taken at a lower resolution.

Up-sizing images to make them larger will only make them look awful. You should avoid this at all cost.

One final note.... all of your product images that you upload should be exactly the same size. Uploading different sized images will make your store look inconsistent and messy. Uploading different size images for a single product will make the product zoom feature jump around the page, which is quite messy! This is why we recommend uploading images that conform to the specifications above.

You can also make this a lot easier for yourself if you change your store's built-in product image sizes. To do this, follow the instructions below;

Changing your stores’ product image sizes

To change the default image sizes that your Spiffy Store uses, you will need to do a couple of things… turn on advanced configuration options in your preferences, and then edit the product image sizes in your theme editor. Instructions on each step are below.

Step 1. Turn on advanced configuration options

  • Log in to your store, and go to the “Your Settings” page in the top right menu
  • Scroll down to the “Advanced Configuration” section, and tick the box that says “Enable advanced theme options.”
  • Click the “Save changes” button.

Step 2. Change your default image sizes

  • Go to the “Design & assets >> Theme editor” section of your toolbox in the top right menu
  • Scroll down to the “Custom Product Image Sizes” section.
  • Change the “Compact Image” dimensions to 100 wide and 66 high, and tick only the box for “cropped”.
  • Change the “Medium Image” dimensions to 240 wide and 158 high, and tick only the box for “cropped”.
  • Change the “Large Image” dimensions to 480 wide and 316 high, and tick only the box for “cropped”.
  • Click the “Save” button.


How do I add comments to my blog articles?

Instructions on how to add comments to your blog articles are located in a tutorial here.

How do I create drop-down menus in theheader"

The Showtime theme supports up to 4 levels of drop-down menus.

There's no mucking about with code to get your drop-down menus working. You can create them simply by following the simple steps below. One important note though... you can't create links to nothing! If you haven't created the page or collection you want to link to, you need to create them first.

First item

  1. Log in to your store's Toolbox and go to the "Store menus" tab
  2. Scroll down to the "Top Menu" section, and click "Add new Menu Item"
  3. Type in the name of your menu item
  4. Select whether you want your menu item to link to a page, product, or collection
  5. A new list of options will appear. Select the name of your page that you want to link to.
  6. Click the "Add menu item" button to save.


Sub item

  1. Create another menu item the same way you created one above
  2. Click the "Reorder" link
  3. Click and drag the item you want to drop down to the right (so it sits directly underneath and to the right of the one above - see example)
  4. Click "Done reordering"

Previewing your store should show your second item as a drop-down. You can do this with multiple levels, and re-arrange your menus by dragging items up, down, left, or right whilst you're in "re-order" mode.