​​Canada’s Hottest Live Recording Theatre.
​✏️ Styleguide

Blue Frog Studios Website

This a collection of guidelines and consistent elements used across the website. 

General

To use any of these elements on a page do the following:
1. Hover over the element (Sometimes our elements are grouped into a box with a dashed outline, ensure you're hovering over the correct element)
2. Click the arrow that appears on the top left of the elements bounding box
​3. Select the copy tab (Warning​: Moving the component will permanently remove it from this page)
4. Click on the page you want to copy the component to. (Copying a component will navigate you away from this page)
Scroll to top
This element is placed anywhere on a long page to make a button appear (when the user scrolls down the page) to scroll back up automatically.
Column Align
By Default Weebly align content in parallel columns to the top. Place on these element in a column to change that and align the content to the middle or bottom. This element will be hidden on the live website.
Column align: middle
Column align: bottom
Buttons
This element is placed on a page to allow user interaction.
Testimonials
This element is placed on a page to allow user interaction.
Section Sale Banner
This element is a full static section placed underneath the header on the homepage when you want to bring attention to an ongoing sale. Create a new section on the homepage and change the background colour to the orange used below then place the elements below in it.
BLACK FRIDAY SALE! Use promo code FROG30 at checkout for 30% off all concerts.*
*Promotion ends on 1st of january
Fixed Sale Banners
This element is a dismissible banner that appears as the user scrolls at the bottom left of the browser. This should be placed on the homepage or concert tickets page (Warning: Don't place this on a live page or any page that uses an Inplayer embed)
BLACK FRIDAY SALE! Use promo code FROG30 at checkout for 30% off all concerts.*
*Promotion ends on 1st of january
BLACK FRIDAY SALE! Use promo code FROG30 at checkout for 30% off all concerts.*
*Promotion ends on 1st of january

Copywriting Guidelines

1. Keep copy concise and to the point. Research show users typically only have time to read 28% of the words on any given page
  • Don’t: You must log in before you can write a comment
  • Do: Log in to comment
2. Avoid Long blocks of text
3. Use specific verbs whenever possible
  • Don't: Please press the button below to get access to the ticket
  • Do: Buy Ticket
​4. Make the copy consistent
5. Write in the present tense
6. Write in an active voice
7. Avoid ALL CAPS. We only use all caps to draw attention to CTA's, usage of all caps in copy often conveys a shouty and aggressive tone of voice.

Adding a concert ticket

Create a Weebly Item
  1. Navigate to the Weebly site in your account (outside of the weebly editor)
  2. Navigate to Items > Site items in the left hand menu
  3. Click Create new item
  4. Enter the product details. If the concert has multiple dates ensure you use the options and pricing section to track stock for each option.
  5. Ensure the product description follows the format outlined in the Template product (can be seen below or in the weebly items list)
  6. (optional) add a link to a corresponding livestream page, or come back and do this late.
  7. ​Click Save​
Create a link to the product page
  1. Navigate to the Weebly site editor by clicking Overview > Edit site
  2. (Optional) If this is a concert you'd like to be featured on the homepage, scroll down to Upcoming Concerts on the homepage and click on the Product element then Manage Products, remove 1 product you'd like to replace and then click on Select products to add the new ticket you just created. (Note: there should only ever be a maximum of 3 concerts featured on the homepage)
  3. Navigate to the Concert Tickets page 
  4. Hover over an existing product group (dashed grey line) and copy the group to the same page.
  5. Reorder the product appropriately 
  6. Click on the product element then Manage products > Select products and then deselect the concert you'd like to replace and select the new concert.
  7. Replace the copy in the accordion below the product
Create a product page
  1. Click on the + icon and select product page
  2. Rename the new page appropriately
  3. Select the newly created item in the dropdown
  4. Navigate to the Ticket: Template page and copy the group containing all the elements below the "add to cart" button
  5. Navigate back to your new concert ticket page
  6. Replace the Bio copy and Lineup info on your new product page
Done!

Concert Ticket Template (DO NOT DELETE)

CA$50.00

Day, Month Dater (or if multiple) Day, Month Date - Day, Month Date • Time PT



A short 3-5 sentence description of the concert. This should match the Inplayer asset description if there's a corresponding BFTV VOD.


This show will premiere on Blue Frog TV to watch from anywhere you are on Month Date Year

Click here to get access
Buy Tickets

Adding an Upcoming Stream

Create an Inplayer Asset
  1. ??​
Create a link to the live page
  1. Navigate to the Weebly site editor by clicking Overview > Edit site
  2. (Optional) If this is a concert you'd like to be featured on the homepage, scroll down to Upcoming Streams on the homepage and delete 1 of the 4 live stream groups, copy one of the groups and then replace with relevant image, date, time and title.  (Note: there should only ever be a maximum of 4 concerts featured on the homepage)​
  3. Navigate to the Upcoming Streams page 
  4. Hover over an existing Live stream group (dashed grey line) then copy the group or copy the template group below to the same page
  5. Reorder the Live Stream group appropriately 
  6. Replace with appropriate image, date, time, title and description. 
  7. ​Link the button to the relevant Live page (if you haven't created one yet you can do this later)​
Create a Live page
  1. Click on the Live: Template page in the pages list and copy it
  2. Rename the new page appropriately
  3. Replace the custom HTML embed with the new Inplayer assets embed. (It should appear in the editor if it’s working correctly)
  4. Click on the countdown element and then click Dashboard, this will take you to the Octomono plugin dashboard where you can set teh start time for stream in the left hand side menu. Click Done once you've made the adjustments.
  5. Replace the bio and lineup info below. (Note: this should be consistent with the corresponding physical concert page)
  6. Ensure you have linked button on the homepage & upcoming concerts page to the new Live page.
Done!
When the live stream has ended
  1. Remove the stream from upcoming streams (on homepage and upcoming stream page)
  2. Once the live stream has ended rename the live page to VOD: (Name)
  3. Remove the countdown element
  4. Drag the page to the 🔵​ Past Streams section in the Weebly editor page list
Day, Month Date • 7:00PM PT
Stream Title
9.50 CAD or 7.99 USD
A short & concise description of the event/stream. This description should match the InPlayer Assets' description.

Adding a Past Stream/VOD

Create an Inplayer Asset
  1. ??​
Create a link to the VOD page
  1. Navigate to the Weebly site editor by clicking Overview > Edit site​
  2. Navigate to the Past Streams page 
  3. Hover over an existing group (dashed grey line) then copy the group or copy the template group below to the same page
  4. Reorder the group appropriately 
  5. Replace with appropriate image, title and description. 
  6. ​Link the button to the relevant VOD page (if you haven't created one yet you can do this later)
Create a VOD page
Stream Title
9.50 CAD or 7.99 USD
Blue Frog Studios is proud to present Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales fames mollis adipiscing, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales fames mollis adipiscing.
1328 Johnston Road
White Rock, BC • Canada V4B 3Z2
Policies & Terms of Use  •  © 2022 Blue Frog Studios All rights reserved.