Sweetwater Enhanced Page Generator Documentation

Contents

Folder Setup

"Product" Section

"Colors" Section

"Intro" Section

"Hovers" Section

"Page Content" Section

"Footer" Section

Code Generation/Output

Folder Setup

basic folder tree — hover for example:
* hover-bg.jpg placed into images folder
  1. Navigate the sweetwater.com directory to
    Store → Manufacturer → Manufacturer_Name
  2. If Manufacturer_Name doesn't exist, create a new folder with the name of the respective Manufacturer.
    ex: Store → Manufacturer → PreSonus
  3. Create a new folder named according to the Item ID of the enhanced product
    ex: Store → Manufacturer → PreSonus → SLRM32AI
  4. Inside the ItemID folder create a css and an images folder, as well as a file called index.php
  5. Inside the css folder create a file called styles.css
  6. Place any and all images associated with the page inside the "images" folder
  7. * If there are Hovers associated with this product's enhanced page create an image called hover-bg.jpg that displays all hoverable aspects of the product. This will serve as your main hover section image. Place it into your newly created images folder

"Product" Section

Manufacturer

Enhanced product manufacturer name goes here.
ex: PreSonus or Solid State Logic

Item ID

Enhanced product item ID goes here.
ex: SLRM32AI or XLDeskL

Product Name

Enhanced product name goes here.
ex: StudioLive RM32AI or XL-Desk

"Colors" Section

Changing Colors

To keep with a general theme, the only colors that are really changed are the Headline Color and the Bullet Headline Color, although it is possible to change the other colors if desired. To change colors just click the color picker box next to the item you want to color and choose/input a color.

"Intro" Section

Intro Headline and Intro Subhead

Fairly straightforward... just type or copy and paste the intro section's headline and subhead into their respective inputs.

If no Headline or Subhead exists simply leave that input blank

Intro Paragraph(s)

Copy and paste the intro paragraph into the textarea. Usually the intro consists of only 1 paragraph, but in the event of multiple paragraphs separate each one with a new line.

If a pull-quote is desired treat it like a normal paragraph [i.e. separate it from other paragraph(s) with a new line] and prefix it with "pullquote: " (no quotation marks).

Intro Bullets Headline

Type or copy and paste the intro bullets headline (usually something along the lines of "so-and-so product at a glance:").

If no such headline exists, leave it blank.

Intro Bullets

Type or copy and paste the intro bullets into the textarea. Each bullet, or <li>, should be plain text (not wrapped in a "<ul>" or "<li>" tag) separated by a new line.

If no bullets exist, leave this section blank.

Intro Media

This is where you tell the generator which image or video(s) will be accompanying the intro text. If no media exists, leave this section blank or use the default video placeholder [video: OCWj5xgu5Ng].

Intro Media Caption

Caption for intro image or intro video. Leave blank for galleries (inserted manually into html)

If no caption exists, leave this section blank.

"Hovers" Section

If no hovers exist leave this section blank and move on.

If you have hover text and have created your hover-bg.jpg image and placed it into the images folder then click the "Create Hovers" button to open up the Hover Wizard.

Hover Wizard

If brought to the Hover Wizard from the main page of the Sweetwater Enhanced Page Generator, assuming Manufacturer and Item ID were correctly filled in, and assuming there is a "hover-bg.jpg" image in the images folder the Hover Wizard should auto-populate any necessary information. If anything was not carried over from the main page then only the items that are available will be populated. If there is no "hover-bg.jpg" in the images folder then the Hover Wizard will not work.

  1. Make sure the Manufacturer and Item ID inputs are filled in correctly and that there is a "hover-bg.jpg" image in the correct images folder
  2. Paste in your hover text with each hover on a new line (you can do this at any time).
  3. Click the "Load" button. If all info was input correctly your "hover-bg.jpg" image should appear, as well as any hovers that were added to the textarea.
  4. You can add hovers at any time by adding them to the textarea and clicking the "Add Hotspots" button (note: duplicate hotspots will be created if old hover text isn't first removed from textarea).
  5. To place hotspots simply click and drag them around until they are the correct location. To resize them click and drag on the bottom or right edge, or the bottom-right corner of the hotspot.
  6. To remove a hotspot simply hover over it and click the red "X" icon that appears between the hotspot and the popup text.
  7. Popup text can be edited right from the hotspot by hovering over the popup and clicking on the text. Moving the cursor outside of the popup will automatically submit any text changes.
  8. Once all hotspots are placed copy the code from the output section.
  9. Switch back to the main page of the Sweetwater Enhanced Page Generator and paste the code in the textarea labeled with "Hover HTML Here:".

"Page Content" Section

Headlines and Subheads

Paste the headlines and subheads into their respective textareas with each headline and subhead on a new line.

If some headlines don't have an accomanying subhead you will still need to create a new line for each missing subhead.

If no subheads exist at all just leave the subheads textarea blank.

Paragraphs

Paste all of the page's paragraphs into the paragraph textarea with each section's paragraph on a new line.

If a section contains more than one paragraph, or a pullquote, then separate each paragraph and/or pullquote in the section with an equals sign (=) on a new line between the section's paragraphs.

If a pullquote is desired, prefix the pullquote text with "pullquote: ".

Bullet Headlines

Paste the bullet headlines here with each bullet headline on a new line.

If some bulleted sections don't have headlines you will still need to create a new line for each missing headline.

If no bullet headlines exist at all just leave this textarea blank.

Bullets

Paste each section's bulleted list here with each list item on a new line and without any tags. Separate each section's bulleted list with an equals sign (=) on a new line between the lists.

If some sections don't have bullets you will still need to create a new line for each missing bulleted list.

If no bullet lists exist at all just leave this textarea blank.

Media

This is where you tell the generator which image or video(s) will be accompanying each section's text. Each section's media gets put on a new line.

Media Captions

Captions for images or videos. Each section's media caption gets put on a new line. Leave blank for galleries (inserted manually into html)

If only a few captions exist you will still need to create a new line for each missing caption.

If no captions exist, leave this section blank.

Features List

If there is a features list at the end of the page copy and paste all of the list items to the features list textarea without any tags. Each list item gets its own line.

Code Generation/Output

Once all information has been filled in correctly click the "Generate Code" button. If all goes well the output section will appear and display the HTML and CSS code under their respective tabs. Information can be changed at any time. Just click the "Generate Code" button for any updates.

HTML

Copy the code from the index.php tab and paste it into your enhanced page's "index.php" file.

CSS

Copy the code from the css/styles.css tab and paste it into your enhanced page's "styles.css" file.

content.txt

There is a third tab titled content.txt. Copy and paste this code into a text file called content.txt and store for reference.