Products

Landing Pages

Inventory Management

Email Marketing

Gift Cards

Payment Gateway

Home Page Rotator


Products

Remove a Product

Let’s say you want to remove a particular colorway from a variable product. We’ll use the Winterport Throw as an example. First go to the “Edit Product” page for the Winterport Throw, either by doing a search in the back end under products or just going to the front end product page and clicking “Edit Product” in the black bar at the top of the page (you need to be logged in as an admin. to see this bar).
  1. Scroll down to the “Product Data” section of the product page. In the list of blue links on the left-hand side, click “Attributes” then click “Color.” In the “Value(s)” pane on the right, click the “X” next to the colorway you want to remove. Click the blue “Save Attributes” button below.
  2. Now click the “Variations” link (just below “Attributes”) in the left-hand menu. Find the variation that displays “Any Color” in the dropdown (it says this instead of the colorway name because you just removed that color attribute in the previous step). Confirm that this is the right variation to remove by checking the SKU and/or the Description at the bottom of the variation details. Uncheck “Enabled” just below the variation image. Then click the blue “Save Changes” button below the Description.
  3. Scroll back up to the top of the product page and click the big blue “Preview Changes” button in the upper right. A new browser tab opens and you can make sure everything looks good before publishing.
  4. To publish the changes, click the big blue “Update” button on the right. Then click the “Purge from cache” link just to the left.
  5. Go to the front end of the page by clicking the “Permalink” right below the product title at the top and check carefully. Done!

Add a Product Variation

Let’s add a new colorway to the Washable Wool DK yarn. Find that product under “Products” in the WordPress admin (or browse to the front-end product page and click “Edit Product” at the top.
  1. Scroll down to the “Product Data” section of the Edit Product page, click “Attributes,” then click “Color.”
  2. To add an existing color attribute, just click anywhere in the “Value(s)” box containing all the color names and start typing the name of the color you want to add. If the color has been used before anywhere in the store, it will appear in the dropdown selection tool and you can click on it to add it. Then click the blue “Save Attributes” button.
  3. Click the “Variations” link just below “Attributes” on the lefthand Product Data menu to open the Variations section. Then click “Expand” on the upper right to display all the variation details below.
  4. If you’re re-activating a variation that already exists but was out of stock, find it in the list of variations. You can usually identify it by the variation image and/or the “Description” field in the variation details. Once you find it, you’ll need to select the proper color attribute in the dropdown menu that will currently say “Any Color…”.
  5. Make sure the “Enabled” checkbox is checked and “Stock Status” is set to “In Stock.”
  6. Click the “Save Changes” button at the bottom of the Variations.
  7. Click on “Swatches” in the Product Data menu on the left, and then click on the colorway name.
  8. Choose “Image” in the “Attribute Color Name or Image” dropdown.
  9. Then click the “Upload/Add Image” button to access the Media Library and find the image there (use the search function to filter) or add a new image. Then click the “Update” button at the upper right of the Edit Product Page, click “Purge from Cache,” and then check the front end to confirm your changes.

Landing Pages

Optimize a Product Category Landing Page for SEO

We’ll use the Baby Blanket landing page to show how to optimize the page for SEO. In this particular case we’re optimizing for a specific Google Ad campaign. Before optimizing any page you need to have done some research and decided on what keyword(s) you’re targeting with this page. A great quick primer on this is https://neilpatel.com/blog/rank-for-multiple-keywords/.
  1. First go to the landing page at https://swansislandcompany.com/product-category/handmade-baby-blankets/ and click on “Edit Category” in the black bar at the top (you have to be logged in to the site to see the black bar).
  2. Scroll down the Edit Category page until you come to the “Yoast SEO Premium” section. Add the focus keyphrase at the top–here we’re using one of the main keywords from a Google Ad campaign that targets this landing page. Then click the “Edit Snippet” button below to edit the SEO Title and Meta Description. Make certain both of these contain the focus keyphrase.
  3. If you want you can add an additional, related keyphrase. Here we’re going to add “baby gift.” Click the “Related Keyphrase” heading below the snippet editor you were just in, and then you can add a new keyphrase.
  4. Yoast evaluates the page based on the focus keyword and offers suggestions. Basically, your aim is to convince Google that this is a quality page that’s highly relevant to the keyword. To check Yoast’s assessment and recommendations, click on “SEO Analysis” to expand that section. Yoast presents an evaluation and offers recommendations. Sometimes they’re not always relevant–for example, in this case Yoast is telling me to expand the page text to 250 words or more, but that would be excessive in the context of a product landing page like this. But definitely make sure that whatever text is on the page contains the keyword and is generally relevant to that topic. Don’t try to mindlessly repeat keywords, just once or twice (if it reads naturally). Ideally, the category name and slug also contains the focus keyphrase. Be careful changing any slugs, though–these have already been indexed by Google. They can be changed but the web server admin. would need to create a “redirect” so no customer ends up getting a “page not found” error.

Remove a Product

  1. To remove a product from the online catalog without deleting it (so it can be quickly restored later), just change the status under “Publish” from “Published” to “Draft” using the dropdown menu. First click the “Edit” button next to the Status as shown below:
  2. Then select “Draft” from the dropdown menu that appears and click the “OK” button just to the right. After that click the large “Update” button below and then click the “Purge from cache” link. Check the front end to be sure the product is no longer visible–do a search for the product by name and there should be no results.

Add a Note to a Specific Product Variation

One way to add a note that you only want to appear when a specific product variation is selected is to add the note to the “Description” field for that variation. The way our current theme is set up, the note appears below the swatches. In this example, we’re adding a note “Ships by June 15” to the Nautical Blue Acadia Blanket in King size only.
  1. First go the the Edit Product page for the Acadia Blanket. Scroll down to the “Product Data” section and click on “Variations” in the left hand list of links. When list of variations appear, find the Nautical Blue in King variation and click on it, which will expand the variation details.
  2. In the details for the variation, find the field named “Description” at the very bottom. Add the “Ships by June 15” text below the colorway name. Now click the “Save Changes” button below the variations, and then click the “Preview” button in the upper right of the Edit Product page to preview the change. If you like what you see, you can click the “Update” button. Once updated, click the “Purge from cache” link next to the “Update” button. The “Ships by June 15” note will only appear when a customer chooses the Nautical Blue color and the King size.

Remove a Product From Clearance

This requires both removing the sale price and also removing the product from the “Clearance” category. We’ll use the Hana Boat Bag as an example of a variable product. It’s the same idea with a simple product but easier because there’s only one SKU to remove the discount price from.
  1. Start by going the Edit Product page for the Hana Boat Bag. Scroll down to the “Product data” section and click on “Variations” in the main menu on the left-hand side. Then click on “Expand” over in the upper right to reveal all the variation details. You should see the “Sale price” field just to the right of the “Regular price” field near the top each variation. Just delete the sale price for each variation.
  2. Next, scroll back up until the “Product categories” section is visible on the right. Deselect the “Clearance” category, then hit the big blue “Update” button just above the “Product Categories” section (or you can “Preview Changes” before updating). After updating the product, click “Purge from cache” just to the right of the “Update” button.
  3. Last step: confirm the changes by viewing the product page on the front end. Make sure the price is displaying correctly and check the “Clearance” is not listed among the categories. To be extra sure you can also go to the “Clearance” page and confirm that the Hana Boat Bag isn’t showing there.

Inventory Management

You can control how WooCommerce handles inventory by configuring the general settings which apply across the entire site, and also product-specific settings. First, let’s take a quick look at the general settings.
  1. Under “WooCommerce” in the main WordPress menu on the left click “Settings” then click the “Products” tab. In the Products settings click “Inventory.” Here you can turn stock managment on or off and configure various options. Most of these are self-explanatory. “Low stock threshold” is the number that stock has to drop to before a warning is emailed to the recipient you specify. “Stock display format” lets you control whether a “Only __ left in stock” message is displayed on the product page.”
  2. Now let’s look at inventory settings for a specific product. We’ll use the Coastal Cowl for this example. Go the the product settings and since this is a variable product click “Variations.” Each individual variation will have its own stock management settings. To have WooCommerce automatically track inventory for that particular variation, first click the “Manage Stock” checkbox. Then enter the amount of that item currently in stock under “Stock quantity.” You have the option to allow backorders or not (and you can choose whether or not to display a message to the customer “available on backorder”).
  3. When the stock drops to 0 on a variation, the swatch for that variation will disappear until stock is replenished (Justin asked for this behavior, which I accomplished with some custom code–the default behavior is for the swatch to be faded out). Below is what the Coastal Cowl product page looks like when the “Coral” variation is out of stock:

Configure Shipping Weight & Dimensions for a Product

In some cases, depending on how shipping is set up in Woo Commerce, shipping charges are calculated using the weight and dimensions of the boxed product. Here’s where to add that data to an individual product.

  1. On the “Edit Product” page, scroll down to the “Product Data” box and click on “Shipping” in the lefthand column (third row from the top):
  2. Add the weight in pounds and dimensions in inches in the first two form fields. “Declared Value” is for international shipping and customs/VAT charges– Swans Island isn’t currently using this data. Use the “Shipping Class” dropdown if you want to assign a special shipping class to the product (for example, we have a special shipping class for knitting patterns, which assigns a special rate; at the moment shipping classes are seldom used at Swans Island):
  3. Products with multiple variations will use this shipping data for all variations; but you also have the option to specify special shipping data for an individual variation (this would likely be rare at Swans but here’s how to do it anyway). To specify different shipping data for a specific variation, click on the “Variations” option on the lefthand menu:
  4. You can now specify shipping data for any particular variation and that will override the general shipping data configured through the “Shipping” tab described above.

Email Marketing

Unsubscribe Customer from MailChimp List

Removing someone from the mailing list just takes a few clicks on the MailChimp site. Note that the subscriber’s information is not deleted in case you want to re-subscribe them later.
  1. To unsubscribe a customer from the mailing list, go to the MailChimp homepage and click on the icon for “Audience” in the lefthand navigation menu:
  2. On the Audience page, make sure you have the right audience selected in the dropdown menu. As of now the main mailing list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Manage contacts”:
  3. Click on “Unsubscribe People”:
  4. Copy/paste the email address of the person you want to remove from the list into the “Unsubscribe People” field, then click the “Unsubscribe” button below the field:
  5. That’s it. You should see a confirmation message at the top of the page indicating the person has been unsubscribed:

Add a Customer to MailChimp List

  1. To add a customer to the mailing list, go to the MailChimp homepage and click on the icon for “Audience” in the lefthand navigation menu:
  2. From the Audience dashboard, make sure you have the right audience selected in the dropdown menu. The main list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Add a subscriber”:
  3. Fill in the “Add subscriber” form. The only required info. is the email address, however you can add other info. if you have it. Check both the “Home and Apparel” and “Yarn” checkboxes unless you know the customer is only interested in 1. It’s a good idea also to check the following boxes before submitting the form:  “New Subscriber Onboarding”, “This person gave me permission to email them”, “If this person is already in my audience, update their profile”:
  4. Click the “Subscribe” button to complete the process:

Gift Cards

Adjust Gift Card Balance

You can adjust gift card balances in the back end of the website.
  1. Find YITH in the main navigation column on the left and select “Gift Cards” (see screenshot below): Gift Car
  2. On the Audience page, make sure you have the right audience selected in the dropdown menu. As of now the main mailing list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Manage contacts”: Gift Card screenshot 2
  3. Adjust the gift card balance by editing the field labeled “Current Balance” (see below): Gift Card Screenshot #3
  4. There’s also a field for internal notes that can be useful–only admins. can see this: Gift Card screenshot #4
  5. Once you’re done making changes, click the big “Update” button on the upper right: Gift Card #5

Making a Gift Card Purchase from the Front End

Here’s how to apply a gift card to a website purchase from the front end, just like a customer would:
  1. After clicking the “Add to Shopping Bag” button to put the item in the cart, hover over the shopping cart icon in the upper right and then click the “View Shopping Bag” button:
  2. On the “Shopping Bag” page, click the link at the top that says “Have a gift card from a loved one? Use it here!”:
  3. Enter the gift card code in the blank form field and then click the button labeled “Apply Gift Card”:
  4. After clicking the “Apply Gift Card” button, a confirmation message will appear and the gift card code will be displayed toward the bottom of the “Cart Totals” column on the right. Note that the gift card value has to be at least as much as the total cost of the item(s) or else the customer will have to pay the balance (if the gift card value exceeds the total cost of the items then the value of the gift card will be reduced by that amount):
  5. Click the “Proceed to Checkout” button below the Cart Totals:
  6. On the checkout page, put the retail store address in the “Billing Details” section to ensure Maine state sales tax is properly applied. Also put “DO NOT SHIP” in the “Order Notes” box. Make sure the “Free Shipping” option is selected so the customer isn’t charged for shipping (this may change to “Pickup order locally” when the free shipping promotion ends). To complete the transaction, click the “Proceed to Payment” button.
  7. After clicking the “Proceed to Payment” button you should see the “Order Complete” page showing all the order details:

Add a Lead Time to a Product

Here’s how to apply a lead time to a product. It’s possible to display a lead time for an in-stock product and/or an out of stock product by reconfiguring the Lead Time settings under WooCommerce settings, but for now let’s just assume we’re only going to display a lead time for out-of-stock products. Let’s start with a simple product like the XL Beach Tote:
  1. Once you’re in the “Edit Product” screen in the back end, scroll down to the “Product Data” box and click on “Inventory”:
  2. On the “Inventory” screen find “Lead Time” and choose “Static,” enter “Ships on 11/23/21” in the “Lead Time Text” field if you want to display a date when the product is expected to ship (you can enter whatever text you want here). Alternatively, you can choose “Dynamic” for “Lead Time” and select a date in the popup calendar–the number of days until the date you select will be displayed:
  3. When the “stock quantity” reaches 0, your “Lead Time Text” will automatically be displayed to the customer on the product page, as in the screenshot below. Note that if you don’t have the “Manage Stock” checkbox clicked in the Edit Product page, the lead time message won’t appear unless you manually set the product stock status to “Out of Stock.” Also note that if you want to enable customers to backorder the product, you can choose “Allow” under “Allow Backorders” and the lead time will appear with the message “Available on Backorder” followed by the Lead time Text you entered.
  4. Now let’s set a lead time for a variable product. It’s similar to a simple product except you can set different lead times for different variations if you like, or you can set a global lead time that would apply to all variations. Let’s use the Penobscot Throw as an example. On the Edit Product page, scroll down to the product data box but instead of selecting “Inventory” select “Variations” instead; then set the “Lead Time” to “Static” and add some text and a date into the “Lead Time Text”:
  5. Click the “Update” button at the top of the Edit Product page and just as with the simple product example above the product page will display your lead time text when inventory reaches 0 (and the same thing applies here about having the “Manage Stock” checkbox checked–if you leave this unchecked then the lead time is only displayed if you manually set the “Stock Status” to “Out of Stock.”). Since this is a variable product and we only set up a lead time for one variation, the lead time message will only display when the customer selects that particular variation, as shown below:
  6. What if you want to set the same lead time for all the variations? In that case you just go to the “Inventory” section of the variable product data and set the lead time there rather than in each specific variation. The global setting in “Inventory” will apply to all variations–unless a variation has its own lead time configured, which will override the global setting.
  7. There are some more advanced global lead time options you can configure in the lead time general settings which you can access using the right-hand menu under “WooCommerce.” Here you can configure where the lead time is displayed (Product Page, Cart, Checkout, etc.). Rather than trying to go through all these various settings here, I’ll just point you to where they are so you can explore them yourself or we can do a Zoom screenshare and discuss. Most of these you probably aren’t going to touch on a regular basis once we have things configured the way you want:

Bulk Edit Products

If you need to make the same change to multiple products–like a percentage price markdown or adding a category–you can make edits to multiple products simultaneously. In this example we’re going to add the “sale” category to all the products with the tag “knit apparel.”
    1. First, hover over “Pickwick Plugins” in the lefthand menu (below “posts”) and click on “PW Bulk Edit.” Then set a filter to just give us the products we want to edit–choose “Tag” for the first dropdown, then “is any of” for the second, and finally “knit apparel”:
    2. Next we’re going to add one other rule or filter to weed out any products that aren’t currently published, so click on the “Add a filter” link below the first dropdown, then set the new filter to “Status” “is any of” “published”:
    3. Now that your filters are set, click the “Search” button and a list of all published products with the “knit apparel” tag will appear below the search button. All the products returned in your search will be preselected–you can deselect any products you don’t want to edit, or just leave them all selected to edit the whole lot:
    4. Next, we’ll scroll horizontally until we see the “Categories” column; click on the word “Categories” then click on “Edit All Check Products” when that appears.
    5. A dialogue box titled “Bulk Edit Categories” will appear; click the “Add to Categories” radio button and then type “Sale” in the blank field to the right; finally, click the “apply” button to add the “sale” category to all the products in the list (but we’re not done yet–changes aren’t published until the final step):
    6. The last step is to click the “Save Changes” button beneath the filters you set earlier. This will assign the category “Sale” to all of the products listed in your search. Go to the “Sale” page to confirm that those products now appear on the page. This is obviously a pretty powerful tool and can save a lot of time–it can also wreak havoc and create headaches if you’re not careful, so review your intended edits carefully before hitting that “Save Changes” button.

Change the Monogram Form on a Product Page

To change which monogram form is displayed on a product page you just have to select the appropriate Gravity Form on the back end of the product page. If you want to display the “Three for Free” promo on the page, there’s an extra step of assigning a tag to the product.
  1. Start by going the product you want to edit. On the “Edit Product” backend page for that product, scroll down to the “Product Data” box and click on “Gravity Forms” in the lefthand column. This will display the Gravity Forms options. At the top is a dropdown menu labelled “Choose Form”–this contains all the Gravity Forms that have been created. Select the form you want, then scroll back up to the top of the page and click the “Update” button.
  2. If you’ve chosen the form named “Add Hand-Stitched Monogram (1st 3 Letters Free!)” and want to display the little promo for this special offer on the product page, all you need to do is assign the tag “free monogram” to the product and the promo will automatically appear on the product page. To add a product tag, go to the right-hand column on the “Edit Product” page and scroll down until you see the “Product Tags” box (right below the “Product Categories” box). Simply type “free monogram” in the blank field at the top and click the “Add” button to the right. If you want to remove the tag from the product, just click the little X in a circle that’s just to the left of the tag. Scroll back up and click the “Update” button on the product page and check the front end to confirm everything looks the way it should. (note: the promo that’s displayed can be edited; it’s in the “UX Blocks” section if you look at the main left-hand column in the website back end and the block is named “Monogram 3 for Free Promo”; here’s a direct link)

Change a Product Image

Every product has a main image associated with it and these are very easy to change.
  1. Start by going the product you want to edit. On the “Edit Product” backend page for that product, scroll down to the “Product Image” which is on the right-hand side of the page just below “Product Tags”.
  2. To change the product image, just click on it and a popup window will appear displaying the current product image in the Media Library. From here you can either choose another image in the media library or upload a new image. If you have a new image, it should be 1000 pixels square and saved in JPEG format.
  3. To upload a new image, click the “Upload Files” tab in the upper left, then either drag the image file into the window or click the “Select Files” button and browse to the new image.
  4. After dragging and dropping or selecting the new image file, add “Alt Text” (a descriptive phrase for the image) and also a “Title” (can just be the name of the product followed by “product image”). These are both in the right-hand column. The last step is to click the “Set Product Image” button in the lower right.
  5. After clicking the “Set Product Image” button, you should see the new product image displayed on the product settings page under “Product Image”.
  6. To publish the new image on the product page that the customer sees, scroll up in the product settings and click the “Update” button in the upper right.
  7. Finally, check the product page on the front end to verify that the new product image is displayed:

Payment Gateway

Reset the Intuit Payments Connection

Occasionally the website’s connection to the Intuit Payments gateway fails and prevents customers from charging orders to their cards. If that happens, here’s the procedure to reset it. Note that not all failed orders are caused by this issue, sometimes the card gets rejected for various reasons.
  1. If you see a failed order, click into the order details and look at the order notes on the right. If it says “Intuit Payments Credit Card Payment Failed (invalid access token)” then that indicates we need to reset the connection.There’s also usually a notice that appears in the WordPress dashboard that looks like this:
  2. To reconnect, go to WooCommerce settings in the left-hand column of the site admin. and then click the “Payments” tab:
  3. Click the “manage” button next to the “Intuit Payments Credit Card” payment method:
  4. Scroll down to the bottom and click the “Disconnect from Quickbooks” button.
  5. If you get a popup message asking if you really want to disconnect, click OK:
  6. Now the disconnect button should turn green and read “Connect to Quickbooks”; go ahead and click it:
  7. A popup window will appear. Log in with “ed@edgeis.com” as user and use the password I provided (not going to publish it here for security reasons):
  8. When it asks to “Verify Your Number” click “Skip for Now”:
  9. There’s often no confirmation message from Intuit that you’ve reestablished the connection, the popup window just disappears. But you should see the button on the bottom is no longer green and no longer says “Connect to Quickbooks” but instead says “Disconnect from Quickbooks.”
  10. I usually hit the “save changes” button at the very bottom as the final step.
  11. Test that the credit card payments are working by buying an item with a credit card (I usually get an $8 pattern).

Designate Default Size and Color for Variable Products

You can designate a default size and/or color for a variable product so that the size/color will be selected by default when a visitor views the product.
  1. To set a default size and/or color for a product, go to the “Product Data” section of the product settings and select “Variations”:
  2. At the top of the Variations section you’ll find “Default Form Values” followed by two dropdown menus, one for size and one for color:
  3. Select the desired options. In this case, we’re designating a default size of Queen and leaving color unspecified:
  4. Once you’ve made your default selections, click “Save Changes” button at the bottom of the “Product Data” section, then click the “Update” button at the upper right of the product settings page. Check the front end page (what the customer sees) to verify that the default options you chose are selected:

Change a Swatch Image

Swatches are configured in the “Swatches Settings” area of the “Product data” box when editing any variable product.
  1. Click on the “Swatches Settings” link in the right-hand column of the “Product data” box, then click on “Color” in the list of settings, and finally click the color you want to configure the swatch for:
  2. To change the swatch image, click the “Upload/Add Image” button:
  3. After you click “Upload / Add Image” a box will open up showing the Media Center. You can either choose an existing image or upload a new one. Use the search button to locate swatch images. In the example below I’m searching for “dusk swatch.” To select the swatch just click on it and then click the “Use Image” button in the lower right:
  4. The box with the media center will close after you click “Use Image.” To finalize your changes, click the “Save Swatches Settings” button below the list of swatches, then click the “Update” button in the upper right of the product page. Check the front end to make sure your swatch is correct.

Graphic Elements

Build a Banner for the Homepage Slider (“jumbotron”)

The slider at the top of the homepage displays large images with overlaid text. To build a new banner (that’s what our WordPress theme calls an individual slide), go to the page named “Homepage Sandbox” (https://swansislandcompany.com/homepage-sandbox/), which is a privately published copy of the public homepage (only website admins. who are logged in can see this page). You can build a new banner here, test it, make it available for review, then copy it over to the public homepage. The Homepage Sandbox also serves as a repository for retired banners that can be repurposed. Let’s walk through the process of creating a new banner:
  1. First go to the Homepage Sandbox (here’s a direct link to the backend of that page in UX Builder editing mode–UX Builder is the “click and drag” page editor provided by our WordPress theme). On the upper left you’ll see a stack of gray bars. Click on the top one labelled “Slider” to select the slider. 

  2. The easiest way to create a new banner is to duplicate an existing one, rename it, then edit it. Click the triangle on the lefthand side of the Slider bar (the bar you just selected in the previous step) to expand it and display all the banners contained in the slider:

  3. Select the top banner in the list (any banner would work), then click the little gear-like settings icon to the right of the banner title, and select “Duplicate” from the dropdown menu that appears:

  4. After you click “duplicate” you’ll suddenly be in editing mode for the new duplicate banner (it’s a little disorienting the first time this happens!). Rename the banner in the field at the top named “Admin label”; for this demonstration we’re just going to call it “Banner Practice” but you can name it whatever you like:

  5. Once you’ve typed the new name into the “Admin label” field, go down to the bottom of the lefthand column and at the very bottom are a pair of buttons. Click the one on the right called “Apply” to save the name change:

  6. After clicking “Apply” you should see the list of banners like before but now you’ll see the new banner you just renamed (if you duplicated the first banner at the top of the list, the new banner should be just below that in the #2 spot):

  7. Move the new banner to the top of the list, which will make it the first banner to appear in the slider. Having it in the #1 position will make it easier to test your new banner across devices when the time comes:

  8. To edit the banner, click the little gear icon to the right of the word “Banner” in the list of banners in the left-hand column and then click “Options” in the dropdown menu that appears:

  9. Now let’s edit the banner. We’re going to start by replacing the image. To do that, click the “Change Media” button under the heading “Background”:

  10. Select the media from the Media library (or upload a new image into the library now by clicking the “Upload Files” tab in the upper left). The image file used should be a JPEG, WebP, or AVIF format image file in RGB color mode sized to 2000 x 700 pixels). If you create a new image, add a brief description of what the image depicts in the “Alt Text” field and also fill out the “Title” field. If you append the word “jumbo” at the end of the Title, it makes it very easy to search for jumbotron-sized images already in the media library:

  11. Once you’ve replaced the image, save your changes to the banner by clicking the “Apply” button at the bottom of the lefthand column :

  12. Now that we’ve updated the image, let’s revise the text. Do that by clicking on the text itself to select it:

  13. Once you select the text, the editor will appear at the top of the lefthand column. To edit the text you can either work directly in source code mode, which is displayed in the gray window below the “Open Text Editor” button or click the button to open the editor. Let’s go ahead and use the Text Editor, so click the blue button:

  14. The text editor should now be open on the lefthand side. Go ahead and revise however you like:

  15. After revising the text, you may want to reposition it. Do that by hovering your mouse over the text until a blue outline appears with a little blue circle containing four little arrows in the upper left of the text box. If you click on that circle and hold the mouse button down, you can drag the text box to another position:

  16. If the revised text is longer than the previous text, you may end up with a line break. If you want to eliminate that break, you can widen the text box. Do that by hovering over the righthand edge of the textbox until a thick blue line appears and the cursor turns into a pair of arrows (note: for some reason the arrows won’t show in my screenshot below). Then hold the mouse button down and move the cursor to the right in order to widen the text box :

  17. Now let’s edit the button. Start by clicking on it to select it:

  18. Once you’ve selected the button you can revise the button text using the “Text” field at the top of the lefthand column:

  19. The link for the button is set in the field named “Link” which is toward the bottom of the lefthand column. Be sure to update this as needed:

  20. There’s also a place to specify the link for the whole banner, not just the button. To do that, click anywhere on the banner (outside the text box) to select it, then scroll down the lefthand column until you see the “Link” field. Copy/paste the correct link here (should match the button link):

  21. Be sure to check how the banner displays in mobile and tablet before publishing. Use the icons in the righthand column to toggle between mobile, desktop, and tablet views. You may want to make adjustments to the text positioning for specific views (those adjustments will be restricted to just the view you’re working in). Unfortunately these previews aren’t always 100% accurate so be sure to double check on an actual device (or use the developer tools in your browser) before publishing:

  22. Once you have the banner to your liking, go ahead and save it. Click the “Apply” button at the bottom of the lefthand column, then afterward click the “Save Private” button that appears at the bottom of the lefthand column after you click “Apply” :

  23. At this point you can view your new banner in the front end of the website by browsing to the Homepage Sandbox:

  24. That’s it–you copied an existing banner and revised it to create a new one. This is usually the fastest way to do a jumbotron, but you can also build one from scratch if you prefer. In this tutorial we’ve deliberately kept it really simple but there are a lot more controls and tools you can use. If you want to dive in deeper, check out some of the videos offered by the theme developer and/or play around with the various options and controls.  

    Your new banner is now published on the Homepage Sandbox where it can be reviewed/tested. The current procedure to publish this on the homepage is a quick copy/paste of the banner’s source code from the sandbox to the homepage. For now just contact the Swans Island webmaster when you’re ready to publish the new banner. Unfortunately there’s no easy way to automatically schedule the publication or publish to the homepage with a simple click.

Saving Images

The goal when saving images for the web is to make the file size as small as possible without discernibly compromising image quality. For photographs or other continuous tone images, you can use the JPEG file format. When saving JPEGs you typically specify the amount of file size compression you want to apply. This setting is usually labelled as an “image quality” scale of 1-10 (or 10-100). For the most part, choose 3 (or 30), as this reduces the file size considerably but most people can’t detect any visible image deterioration. If you’re using Adobe Photoshop, one way to do this is by using the File > Export > Save for Web command. In the dialogue box that appears, set “Quality” to 30 or use the “JPEG Medium” preset: