Advantage Web Stores have significant advantages over our legacy stores, including improved ability to customize your own site beyond just editing template areas. Not only can you design your own Theme, you can upload your logo and other files and images directly from the store and add that content to various areas. While you can upload extra images directly to the site, all your product images are configured within the local software. The below instructions indicate whether you complete the steps in the web browser or in the software.

Upload Extra Files and Images (Web Browser)

The Assets uploader lets you store files and images you can use to customize your site later.

1. When logged in as an administrator, click the small gear icon.
   
   
2. Click System Settings.
3. Click Theming.
   
   
4. Click Asset Management.
   • By default, the site stores your uploads in a folder on your site called Assets, but you can sub-divide this folder into other folders to better organize your files.
5. To add a new folder, click New Folder.
   
   
6. Enter a name for the folder.
7. Click Create Folder.
   • When your folder is created, you have to navigate into it by clicking it to add files to it. Otherwise, you will be uploading files directly to the Assets folder.
     
     
   • You can check which folder you will be uploading to by looking above the New Folder and Upload buttons.
     
     

8. Create as many folders as necessary.

   You can nest folders within each other by navigating to the folder you want to add to and clicking New Folder again.

9. Navigate to the folder into which you want to upload your file.
10. Click Upload.
    
    
11. Drag and drop a file into the window or click to select a file from your computer.
    
    
12. When you have added the files you need, click Upload.
    
    

Using Assets and Adding Images to Template Areas (Web Browser)

Template areas are portions of your web store you can customize with text, images, or HTML content. By default, they appear as boxes with an inner shadow and those boxes have pencil icons when you are logged in as an administrator. You click these pencil icons to edit the template areas. Different ones will display on different pages depending on which you use. You can see the name of a template area, which indicates on which pages this content will display, when you are logged in as an administrator by hovering over the pencil icon. The below image points out the WaiversHomeTop template area.

This template area will only display on the top of this page, the first page in the waiver signing process, whereas the template area above it, ContentTop, will display at the top of every page.

Get the File Location

In order to use any files you upload to Advantage Web you have to copy the URL where that file is stored online.

1. From the same Asset Management screen described above, locate the file you want to use by clicking into any containing folders.
   
   
2. Click the file you want to use.
   • A screen with a larger thumbnail of the file will load. From this screen, you can also Rename or Delete the file.
3. If this file is an image, right click it.
4. Click Copy Image Link or something similar, depending on which browser you are using.
   

   • This copies the file URL to your clipboard.

     If you need to get the location of any other file type, you can try clicking the paper icon.  If this partial, local URL doesn't work, contact Support and you can get the full URL for the file, which will work.

     
     
     
     

Once you have completed these steps, you will navigate to the template area you want to add the file to, making sure you have not copied anything else to your clipboard in the meantime.

Edit Template Areas

1. Log in to Advantage Web as an administrator.

2. Navigate to the page you want to add content to.

   Some template areas are visible on all or multiple pages, so be sure to check the name of the template area you are editing.

3. Click the pencil icon next to the template area you want to change.
   
   
4. If you have multiple languages, select the language you want to edit.
   • Each language has template areas that are configured separately from each other.
     
     
5. Click the pencil icon.

   • This opens a window with a standard word processing toolbar from which you can add text, images, links, tables, etc. For more customization opportunities, click Source and enter HTML directly.

     Not all HTML is fully supported.� We recommend you save a copy of any HTML you enter in a template area because some of the code might be removed if you return to edit it.� Keeping a copy lets you paste your original content back and edit it from there.

6. If the file is an image, click the image icon.

   
   

   

   If your file is not an image and you want to link to it directly, click the link icon and paste the URL there instead.

7. Paste the URL you copied in the above steps into the URL field.

   You can also enter the URL for images already hosted elsewhere online.

   

8. Enter Alternative Text to display if the image doesn't load properly, or that can be read by a screen reader as a description of the image.
9. Optionally, set the Width and Height of the image, which are measured in pixels.
   • By default, the aspect ratio of the image is locked, so your image won't be distorted or stretched out. If you want to change the width and height separately, click the lock icon so it displays as an open lock.
10. If necessary, type the pixel width of any Border you want around the image, and/or adjust the vertical space (VSpace), or horizontal space (HSpace) there is around the image.
11. Set an Alignment if you want to specify how the image interacts with other content in your template area.

    • This is equivalent to setting a float value in CSS. Left means the image will stay on the left of the page and the other content will wrap around it, Right means it will stay on the right and the other content will wrap around it.� <not set> means the image will appear on its own line and content will not wrap around it. As you change these values, you will see a preview of how this image looks alongside sample text.

      Alignment only affects how other content within the template area interacts with the image. The rest of your site won't be affected.

12. Configure the Link and Advanced tabs as necessary.
    • The Link tab lets you enter a URL the user will be directed to upon clicking the image.
    • The Advanced tab lets you set various HTML and CSS properties for the image.
      
      
13. When you are satisfied with your image, click OK.
14. Add any other content you want to the template area.
15. Click Save when you are done.
    • You will see a preview of your content in the same window. Keep in mind, because the preview window has limited space, this may not accurately reflect how the template area ends up looking.
16. Click Close.
    
    

Your image and content will display on whichever pages contain that template area. Add content to any other template areas as necessary.

Add Images to Your Products and Events (Software)

Images connected to your online offerings are managed directly from within the software, so you can easily adjust these as you make any product changes.  The below outlines how to add images to various things you might sell online.

Retail Items, Gift Cards, and Passes

You configure things such as retail items, gift cards, and passes, the physical things you sell, in Inventory Item Maintenance. This might be items you need to fulfill and ship.

1. From Manager Console, click Inventory.
2. Double-click Item Maintenance.
   
3. Locate and select the item to which you want to add images.
4. Click Edit.
5. Open the Images tab.
   
   • This tab lets you configure a number of images to associate with your product. If you only add the default Primary image (Image 1), it will be used for the thumbnail and the full image.  If you want a separate thumbnail image, you can use the Thumbnail icon. Additional images aside from the Primary image can be added using the Image 2, 3, 4, or 5 icons.
     
6. Click the Image 1, 2, 3, 4, 5 or Thumbnail icon depending on which you want to add.
   • Your Thumbnail image will display in the list of products you sell.
     
     If you don't add a Thumbnail image, your Primary image will display here instead.
     
   • Your Primary image, which is Image 1, will display when you click the product name or thumbnail image online.
     
     You can easily make any image the Primary image, by clicking Make Primary from the Images tab when it is selected.
     
   • Additional images will display in order next to the primary image, and can be hovered over to expand.
     
7. Once you have clicked the image icon you want to add, click Get Image.
   
8. Click Load File....
9. Locate and open the image file you want to use.
   Only .jpg, .png, .gif, or .bmp file types can be added and transparency is not supported.
10. Rotate the image as necessary.
    The image will automatically resize when you click OK. It may appear stretched or look like it fits normally within the software, but it will resize online according to where it is.  Visit Advantage Web Image Aspect Ratios to learn what dimensions you need for each image type.
11. Click OK.
12. Repeat this process for any other images you want to add.
13. Click OK to save the item.
    • The images you add will show up online shortly.

Events and Birthday Parties

You configure these images from within Event Type Maintenance.

1. From Groups, click Setup.
   
   
   

   You can also access Event Types from Manager Console.

2. Double-click Event Types.

   

3. Select the Event Type you want to add an image to.
4. Click Edit.
5. Open the Picture tab.
   
   This tab configures the main image for the event. If you don't configure a thumbnail, this image will display as the main and thumbnail image.
   
6. Click Edit.
7. Click Get Image....
8. From the Get Picture window, select Take Picture to use your web cam to get the image, or click Load File... to select one from your computer.
   
   
9. Rotate the image to the left or right if necessary.
   The image will automatically resize when you click OK. It may appear stretched or look like it fits normally within the software, but it will resize online according to where it is.  Visit Advantage Web Image Aspect Ratios to learn what dimensions you need for each image type.
10. If you alter the image and want to save a copy, or if you just want to save another copy of the original image, click Save File....
11. If you want to configure a separate thumbnail, open the Thumbnail tab.
    The thumbnail image displays in the list of events as highlighted below.The main image displays when you click to begin the booking process.
    
12. Repeat the above process on the Thumbnail tab to select a thumbnail.
13. Click OK.

 Areas

Configure area images from the Area Setup window.

1. From Groups, click Setup.
   
   

   You can also access Area Setup from Manager Console.

2. Double-click Areas.
3. Select the Area you want to add a picture to.
4. Open the Picture tab.
5. Click Edit.
   • This tab has the options to configure the main area image and the thumbnail.  If you don't add a thumbnail, the main picture will display in the thumbnail spot.
6. Click Get Picture....
7. Select Take Picture to use your web cam to get the image, or click Load File... to select one from your computer.
   
   
8. Rotate the image to the left or right if necessary.
   The image will automatically resize when you click OK. It may appear stretched or look like it fits normally within the software, but it will resize online according to where it is.  Visit Advantage Web Image Aspect Ratios to learn what dimensions you need for each image type.
9. Click OK.
10. Repeat this process by clicking Get Thumbnail... if you want to configure a separate thumbnail.
    The thumbnail image displays in the list of areas as highlighted below.The main image displays when you click the thumbnail or the area title.
    
11. Click OK when you are finished.

Theatre

If you have the Theatre module, you can add images from the Scheduling interface.

1. From Manager Console, click Maintenance.
2. Double-click Theatre.
3. Double-click Scheduling.
4. Double-click an existing title to manage, or click New Title to create a new one.
5. From the Edit Title window, select True next to Movie Poster.
6. Select an existing image from the pull-down below, or click Add... to load a new one.
7. If you are creating a new poster, enter a Description.
8. Click Browse... to locate and load an image from your computer.
9. Click OK.
   You can't choose a separate thumbnail for movies. The aspect ratio you need for the thumbnail is 135 x 200px, which displays in the location below.

Classes

You add images to classes from the Class Setup window.

1. From Manager Console, click Maintenance.
2. Double-click Class Management.
3. Double-click Class Management again from the next screen.
4. Select the Class you want to add an image to.
5. Open the Images tab.
6. Click Edit.
   • The Images tab lets you configure an image to associate with your class. Only Image 1 is currently supported online. The thumbnail and main image will be the same.
     
7. Click Get Image.
   
8. Click Load File....
9. Locate and open the image file you want to use.
   Only .jpg, .png, .gif, or .bmp file types can be added and transparency is not supported.
10. Rotate the image as necessary.
    The image will automatically resize when you click OK. It may appear stretched or look like it fits normally within the software, but it will resize online according to where it is.  Visit Advantage Web Image Aspect Ratios to learn what dimensions you need for each image type.
11. Click OK.
12. Click OK from Class Setup to save the changes.