The platforms we use are:

Websites

• Contentful: www.threesbrewing.com // pre-pandemic main site

• Shopify: shop.threesbrewing.com // ecommerce

Key Plugins

• Zapiet: user checkout + fulfillment routing

Payments

• Stripe: payment gateway

Marketing

• Klaivyo: email marketing // integrated with Shopify & Facebook

• Facebook/Instagram

• Google Adwords/Shopping

• Google Analytics

Web hosting and registration

• Namecheap.com

• DNS in AWS Route 53: https://console.aws.amazon.com/route53/v2/hostedzones?region=us-east-1#ListRecordSets/Z2AVMK5PCXCLL1

More Website Documentation To Move To Here

https://docs.google.com/document/d/10CwI9jPYMx3LqRYxjhKxZs3jbwrM9IJ7Gx4n928x7R0/edit#

Pasted below to clean up:

Contentful

Here is what the main contentful landing page looks like:

Overview

• Contentful works by creating elements of different content types.

• Everything you need will be in the “Content” tab at the top. Changing things in the “Content Models” section will require changes to the code, and it’s easiest to add images from the content pages. So don’t worry about the other sections at the top :)

• Only things with the “Published” status will show up on the site. Draft items won’t show up at all, and “Changed” items will show an outdated version until you publish them.

• To add a new page, location, beer, etc. you will click the “Add Entry” button.

• When you make an update on contentful, the website will automatically regenerate. It might take up to a few minutes before you see the change reflected live.

Editing Content

On the left-hand side of the “Content” page, you’ll see this list of pages. All of the content on these pages can be edited directly on the page itself.

However, you’ll also see a list of “Elements” below, which can be edited directly, or edited on the page where they live.

These folders on the left-hand side help you view elements by type, but you can also select a content type in the top search bar, or search through all elements to find what you are looking for:

Tips + Tricks

To add a new event space, you must add the space itself, and then ALSO add it to the list of spaces in the Gallery on the “Private Events” page. Same thing goes for adding a new Beer.

Image Carousels

If you go to the page you’d like to add / update a carousel for, there is a section called “carousel” where if you click in, you can edit the images. For each page, there should be a different carousel, specific to that page. Each photo in the carousel needs to be less than 300KB.

Video: Updating Carousel Images

Forms

There are two types of forms on the new Threes site: mandrill forms, and tripleseat forms. Mandrill forms can be found in the “Forms” folder on the left, and include “Contact Us”, “Wholesale”, “Reservations”, etc. Tripleseat Forms are used for private events, and can be found in the “Event Spaces” folder on the left.

Mandrill Forms:

• Mandrill forms have set inputs, which cannot be updated without the help of a developer.

• The title, description, submit button, success message, and error message can be changed in contentful

• Each Mandrill form in contentful also includes the email address where you would like any form submissions to go. Only @threesbrewing.com email addresses are allowed. For Contact Us and Job Application forms, this email address may be overridden depending on which job is selected, or which topic in the contact us from.

Tripleseat Forms:

• Tripleseat forms are embedded forms that each have their own unique form id. These form IDs live in contentful and shouldn’t be changed unless you are trying to replace the form entirely.

• To update form fields or text, you must find the corresponding form in tripleseat and edit it from there.

• For these forms, the description and success message can be edited in the “General Book Event Form”, in the forms folder. The error message and submit button are handled by tripleseat and cannot be changed here.

Job Applications

Each job application in the “Jobs” folder will generate its own page, with the description at the top and form to apply at the bottom. There is also a generic application form, and the content for that can be edited in the “Job Application” form, in contentful.

Beer Categories

To update the categories of beer on the /beers page, you can add / update entries in the “Beer” folder on contentful:

Then, in each Beer entry, select each of the attributes type you’d like to sort it under including:

• Title: beer name (series like Eternal Return should read “Eternal Return - Type”)

• Slug: this should auto-populate (slug = URL)

• Beer number: ignore this, it should be blank

• Untapped URL: the place where this style lives on Untappd

• Grains: type in one then hit enter and they’ll show up below. Source of Truth

• Categories: click “Link Existing Entries” and choose Lager/Hoppy/Saison/Seasonal

• Hops: type in one then hit enter and they’ll show up below. Source of Truth

• Style: this is the type that’s written in on the beer label

• Alc by Volume: insert ABV

• Currently Available: to make sure the beers get featured under “Available Now” on the main beers page, simply check the radio button for “Currently Available” - conversely, when beers get 86’ed, they need to be moved to Not “Currently Available” and the associated text in in the box should get pasted in:

“Not currently available.

Visit [The Shop at Threes](https://www.instagram.com/theshopatthrees) for a peak at what’s currently in the fridge.”

• Product Image: Link Existing Asset and connect can cutout. (if needed, resize image instructions).

• Background Image: Link Existing Asset and find Alex Bohn pics, square version; of one doesn’t exist, the Source of Truth is in the drive

• Caviar URL: the URL caviar shares is too long to fit so please use this for all https://bit.ly/2YvWGAB

• SEO: page title and description can be “SFY IPA - Threes Brewing”

• 
  

Contact Us Subjects

There is a content type in contentful called “Contact Us Subjects”, and each of these has a title, an email recipient (who will be emailed when the form is submitted with that value), and a sort position which dictates where in the list order it will appear:

Links

The “Links” Content type is used across the site in different ways. They each require a url, a Link Name, and a title. The title is what will show in these sections:

And otherwise, the “Link Name” will be displayed as the link’s text. Each link also has a field to declare whether it is external, or internal.

Image Sizes

There are image size restrictions set up in Contentful, and if you go over them, you will see an error like this:

Other than keeping images under the max size, the higher the resolution the better, because there are a lot of full width carousels on the site. Images should ideally all be between 1440 and 2000 pixels wide is best. If you are having trouble, try converting any PNGs to JPEGs (will make them way smaller).

Resizing images

• Looked into the image size problem - turns out, if the file is *too* big, contentful won't actually resize it :) So from my sleuthing, the cutoff appears to be 20MB. Under 20MB, the image will be properly resized based on the width of the screen, and even on super large screens, there is a max width so we don't have enormous files. On the about us carousel, I deleted the enormous image (the first one) and resized it a bit on my computer and reuploaded. It's still very large, but under 20MB it seems to work just fine.

• For the Safari - just saw your note - seems the files that are broken are all .webp format, which is breaking in safari. Jpegs and pngs do fine - I will also go into contentful and limit file types to PNGs and JPGs only. That being said - we generally highly recommend JPGs over PNGs, because they are much smaller than and more optimized for the sort of images you are including. Good bug find!

Converting from .png to .jpg

• Download the image

• Save it as a png

• Name it appropriately (ideally the same as its title in Contentful, with dashes)

• Open in preview

• Click Export → export as jpg

• Delete the old image in Contentful

• Upload the new image to Contentful

• Click Publish Changes

• Done!

Resizing Beer Cutout Images

• These are the product images on each beer (Content Type = Beer)

• Can cutouts are in the homepage carousel as part of This Week’s Fridge

• These images should be 600 x 1200 pixels and on transparent backgrounds

• Process for converting anything not in the proper format:

  • Find the image in the drive: Threes Library > 05 Sales & Marketing > C Marketing > Photos > Beer-Photos > Can and Bottle Cutout Images

  • Download the image

  • Open in preview

  • Click Tools → adjust size → enter in 600 x 1200 pixels (click on the lock symbol to unlink length and width)

  • Click Export → export as jpg → rename appropriately

  • Upload the new image to Contentful

  • Click Publish Changes

  • Done!

• If the transparent image is not in the drive

  • Open the image in Photoshop

  • Select the magic wand tool (it should be the fourth tool down from the left)

  • Click the background of the image

  • Hit delete

  • The background should now be white and grey checkered, which means it’s transparent

  • Click Save As → save as png

  • Done!

SEO

On each page, there is a section at the bottom for the SEO page title, and Page Description.

JSON for shop hours (beware of formatting when copying and pasting)

{

"friday": {

"to": "2 am",

"from": "12 pm"

},

"monday": {

"to": "12 am",

"from": "3 pm"

},

"sunday": {

"to": "10 pm",

"from": "12 pm"

},

"tuesday": {

"to": "12 am",

"from": "3 pm"

},

"saturday": {

"to": "2 am",

"from": "12 pm"

},

"thursday": {

"to": "2 am",

"from": "3 pm"

},

"wednesday": {

"to": "12 am",

"from": "3 pm"

}

}

Shop Shopify

The shop theme is hosted on Shopify, just like the old site. You’ll add and update products in the same way as before in Shopify.

Change Logo Homepage Link

• Login to https://threesbrewing.myshopify.com

• Go to admin page

• Click Online Store

• Click Themes

• Click Customize the Live Theme

• Click Theme Actions

• Click Edit Code

• Click Snippets > site-header.liquid

• Change the a href parameter for the homepage tag

  • <a href="https://threesbrewing.com/" title="Homepage">

• Don’t forget to Save!!!

Events

Events are hosted through IRL! If you ever have any IRL questions or needs, please email irl@fictivekin.com. Login here: https://irlcal.com/login (info@threesbrewing.com / threesbrewing)

Here you can view all events, past and upcoming, sorted by location.

A few tips for adding a new event:

Short Description vs. Long Description

Each event must have a description (long text, can include links, styling, etc.), but there is also an optional short description. For threes, we use the short description under featured events on the calendar page, and underneath event titles on the calendar page. The short description can be the first sentence of your long description, or something completely different. Up to 200 characters.

Repeating Events

Events can be set to repeat!

Locations

Each of the three Threes Brewing sites are set as default locations in IRL.

You can also add an ad-hoc location for any event, by searching for a location and selecting from the google results below.

Featured Events

To add an event to the featured carousel on the Calendar page, make sure to select is featured when you create the event:

Calendar Event Text Formatting

During the testing period, a developer noticed one of the calendar events showed up on the website with dark text on a black background (see screenshot below). After a little investigation, he found that the event's description had some HTML that set the color. His guess is that this was pasted from somewhere, and the editor input preserved that text color.

To fix the issue, he went to the IRL "edit" page for that event, selected all text in the description, and hit the "Clear Formatting" button. The original text happened to contain a hyperlink to nols.edu, so at this point he went ahead and re-linked the text. See 2nd screenshot below.

Screenshot of the issue (see highlighted nols.edu)

Solution

After saving the changes, he noticed the IRL event ID changed (and as a result, so did the URL), so he found it necessary to go back to the main calendar page, reload it, and then click the event link. Hope this helps in case you ever run into this issue?

Other notes from Fictive Kin - @josh needs to clean this section up.

And if you'd like in the meantime, feel free to start poking around Contentful - I know you and your team had some changes you wanted to make, and that way you can get to know the set up a bit. Any updates that you publish in contentful will update directly on the staging site - usually takes a minute or two. Just make sure to only make edits in the "Content" tab, as opposed to the "Content Model" tab. More details on that, and editing specifics in the doc linked above.

3. A few (hopefully last) form questions.

The grid of event spaces can be seen here: https://staging.threes.fkvpn.net/private-events/#filter=all

And each small event space now has its own page with a carousel of images + description, and it's own form.

ex. page: https://staging.threes.fkvpn.net/spaces/franklin-kent

ex. form: https://staging.threes.fkvpn.net/book-event/franklin-kent

In the last email you sent, you mentioned these spaces:

Gowanus: Main Bar, Tiny Montgomery, The Yard, The Shop at Threes

Greenpoint: Main Bar, The Studio, Parlor

Governors Island: Beer Garden, Island Events

All of these now exist as spaces in contentful, but on your current site we were unable to find specific private event forms for "The Shop at Threes" or "Beer Garden", so currently those pages link to a general event booking form, and are in need of a bit more content, as seen here. If you'd like to add unique forms for those two event spaces, it will need to happen in Tripleseat, and then you can grab the form id and reference it in contentful to hook it up. Let us know what you are thinking, and we can help you get it set up.

We also kept "partial yard" and "winterized tents" - you're welcome of course to delete those if you no longer want them featured. Adding spaces and removing them is very easy.

Login for accounts, list of software and tools

Domain Registrar for threesbrewing.com

Network Solutions

See 1p

Other things to do how to

Editing locations

• In terms of the locations shown on threesbrewing.com, that is hardcoded, and not something we can change right now. So on IRL, you can see that the locations were updated (only seeing gowanus on the account page here https://irlcal.com/threesbrewing), but that doesn't change the tabs on Threes. The same goes for adding an "Off Site" tab. These updates are something we'd like to work on over the next two weeks, so you have Off-site and the option to hide Gov Island during the off season.

• Closing Gov Island is nice, but not essential, especially if we can edit the message.

Bug Problem Solving

Calendar formatting

• I noticed one of the calendar events showed up on the website with dark text on a black background (see screenshot below). After a little investigation, I found that the event's description had some HTML that set the color.

• My guess is that this was pasted from somewhere, and the editor input preserved that text color.

• To fix the issue, I went to the IRL "edit" page for that event, selected all text in the description, and hit the "Clear Formatting" button. The original text happened to contain a hyperlink to nols.edu, so at this point I went ahead and re-linked the text. See 2nd screenshot below.

• After saving the changes, I noticed the IRL event ID changed (and as a result, so did the URL), so I found it necessary to go back to the main calendar page, reload it, and then click the event link.

IRL

• You are correct - currently there is no "end repeat on _____ date" capability in IRL - we totally agree that this is a necessary feature update, and we are going to look into getting it in this week. Will update you on this soon.

• Images are 3:2 ratio, though the image uploader will crop it for you (as I am sure you noticed). They never appear full width on the site, but I would suggest images that are at least 800px wide to be safe, and ideally no larger than a few MB in size.

• In terms of the locations shown on threesbrewing.com, that is hardcoded, and not something we can change right now. So on IRL, you can see that the locations were updated (only seeing gowanus on the account page here https://irlcal.com/threesbrewing), but that doesn't change the tabs on Threes. The same goes for adding an "Off Site" tab. These updates are something we'd like to work on over the next two weeks, so you have Off-site and the option to hide Gov Island during the off season.

• "Sorry! There are no events scheduled. See all events" - are you asking that it be editable? Or just that it say something else as the default. Let me know what you are looking for here :)

Technology, Documentation, Technical

Host

• Changed from Network Solutions to Namecheap on in Feb 2020, Fictive Kin Jared did the transfer

General Architecture

• ADA, takes a lot of work to follow the best best practices, but they follow most of the rules but some are burdensome

• jekyll

• github.com/fictivekin/threes

• _data/Threes.yaml is contentful - change this in contentful, gets overwritten by contentful

• /master/_config.yml

• page_gen - makes pages

• /blog/layouts

• liquid which is shopify templating language

• download repo

• yarn start to start the local environment (be patient, it takes a few minutes)

• make my own branch if doing anything

• Hosting hosted on AWS bucket - served via cloudfront CDN

• _includes/components has a lot of the template files

  • head.html

  • footer.html

• http://localhost:4000/

• text boxes are in markdown if ever want to edit in contentful

GTM google tag manager

• In the head.html file

• And _includes/components/analytics.html

• https://tagmanager.google.com/?authuser=1#/container/accounts/6000194281/containers/30207493/workspaces/4

• Added based on Henry and Fictive David

  • https://youtu.be/7YhaDShS740

  • Tags

Old Website

Updating the Calendar

• 1. Login: http://threesbrewingevents.com/default/admin-login

     1. Username: admin

     2. Password: pass

     3. Click the Events tab

  2. To add an event:

     1. Click the New Event button

     2. Add in Required Info: Title, Description, Start/End Dates/Times, Category (venue), Location (333 Douglass St, Gowanus/113 Franklin St, Greenpoint), Add Image.

        1. If the Event Title is too long, you can change its name in the Alias section to shorten the URL.

        2. If you’re linking to another page for RSVPing or buying tickets, add in Link Title and Link URL.

     3. Click Save.

     4. After you click Save, edit the Thumbnail and Banner image by selecting the area you want to use for these images

  3. To edit an event:

     1. Use search tool to find event.

     2. To edit the content, click on the pink edit button to the left of the Event Name. To edit the image, click on the image.

     3. Make the changes you want to make, then save,

  4. Hosted by hostgator $11/month

1. Product pages on the online Shop/Press Page/Homepage Gallery:

   1. Log into Shopify: https://threesbrewing.myshopify.com/admin

      1. Email: info@threesbrewing.com

      2. Pass: 333Yummybeer!

   2. Click Products in the left-hand menu.

   3. Select a similar product to what you want to create, Duplicate it and edit it accordingly.

2. Changing the Homepage Gallery:

   1. Log into Shopify, click Online Store on the left-hand menu. You should see a button that says Customize on the right-side of the page- click it!

   2. The Homepage will open with an editor menu on the left-hand side.

   3. Click Slideshow.

   4. Here you can Add, Edit or Remove slides.

   5. Always be sure that the image isn’t getting cut off. You may have to resize an image in Photoshop/Illustrator first if the image isn’t the appropriate dimensions.

3. Any other pages:

   1. Login to Shogun Drag & Drop Page Builder to update any other pages on the site:

      1. Log into Shopify, click Apps in the left-hand menu.

      2. Click Shogun.

   2. To edit a page:

      1. Use the search feature (hint: search using the URL slug for an exact match).

      2. To edit text:

         1. Double click the text box you want to edit, and edit it!

         2. Click Save AND Publish.

      3. To change images:

         1. Click the image you want to change and upload the image.

         2. On the right-hand menu, you’ll see options for the image’s layout. Select either Cover or Contain to avoid stretching the image.

         3. Click Save AND Publish.

      4. To change the layout:

         1. It’s easiest to duplicate/rearrange sections that are already set up on the page, but you can also insert different sections using the Elements tab on the right-hand side.

         2. Click Save AND Publish.

      5. To Add a Page:

         1. Find a page with a similar layout to what you want and Duplicate it. DO NOT CREATE A NEW PAGE- it won’t follow the format of the rest of our site.

         2. Follow the rest of the instructions (above) for editing a page.

Contact form container

https://www.threesbrewing.com/pages/contact

https://app.getshogun.com/editor/pages/5ac61f2040a25f004e3eb500/edit

Contact form body

https://www.powr.io/users/me?platform=shopify&shopify_embedded=true&shop=threesbrewing.myshopify.com&shopify_id=073c8b05aa4a47de055279f5c2c59962&app_type=contactForm

Homepage

• Edit through Shopify > Online Store > Themes > Customize

  • https://threesbrewing.myshopify.com/admin/themes/265912336/editor

• https://www.threesbrewing.com/

Nav / menus

https://threesbrewing.myshopify.com/admin/menus

New menu

Homepage Carousel

1. Log in to Shopify

2. Click "Online Store" under "Sales Channel" on left hand column.

3. Under "Live Theme" select "Customize"

4. Select "Slideshow"

5. Select the first slide "Bar Brewery Events"

6. Scroll down to "Subheading" and input text to indicate closure in this format:

[DATE] Ex: Saturday October 19, 2019 <br>

Threes @ Franklin + Kent will be closed for a private event from 6:00PM - 10:00PM.

7. Save and check the homepage threesbrewing.com to ensure the message saved and looks nice.

Website Forms

- Private Events: all data collected under this part of the taxonomy goes to Tripleseat; we do a fair # of one-off promotional landing pages that should also route there.

- Public Events: sometimes we collect emails in exchange for some value to the user; those should point to Mailchimp, where we create special promo groups in these instances.

- About > Jobs: these currently go through powr; moving forward, we can create special Mailchimp folders for these.

- Beer > Wholesale: go through powr, but this should be MailChimp integration.

- Beer > Retail: currently powr; should go through MailChimp.

- Email signup (footer): to Mailchimp, consumer newsletter.

- Contact (footer): currently to powr; should go to mailchimp (ideally, routed by subject).