Template Instructions
Read these first for important notes about your template and how to edit it.
To view and follow along with this guide, simply navigate to this page within your Showit dashboard and click on the preview button in the top right corner. It will then display the preview of this page in a new frame within the Showit app. I'd recommend opening the instruction page in a new window by right clicking on the blue link that appears at the top of the preview display and clicking "open link in a new window".
Learn More
I offer One Day Showit Template Customizations to customize your template to your brand. You can read all about them here.
Don't have time to customize yourself or just don't want to?
this is a link
Photo is automatically in an arch frame
Hovering over the text makes the line disappear on desktop!
If you've worked with a Showit template before, then you may already mostly know what you are doing, but there are a couple of features of this template that are unique to add in some elevated styling options. Those include the Arched Photos and the Disappearing lines on link hover. View the instructions below for how to edit each item.
a couple things that are different about this template
Instruction guides
watch a video
Typically in Showit, you can just double click on a photo to replace it. However, this template is unique because it has a frame sitting on top of the photo to create the arched shape. If you don't want the arched shape, you can simply click on the photo area in the customizer to select the frame and hit "Delete" on your keyboard to delete the frame. Then you will be able to update your photo by just double clicking. However, if you'd like to keep the frame for the arched photo effect, follow the instructions below.
1) If you click directly on the photo you want to edit, it will actually select the Frame element rather than the photo element, but clicking on it to start will help you find where the photo element is that you need to replace.
2) Once you have clicked on the frame for the photo, look within the left sidebar of Showit and be sure you are on the Page tab. Then, find the element highlighted in blue. Beneath that element, you will find the photo element with the word "Photo" in the element name. Select that element so that it is highlighted in blue.
3) Now look to the right sidebar of Showit and click on the image tab at the very top.
4) The image tab will display a thumbnail of the image that is currently on the page. Click on the image thumbnail and it will open the image selection tool.
5) You can now select a new image to replace the existing one and it will automatically take the arch shape.
Replacing photos to keep the arched frame
watch a video
Typically in Showit, you can just double click on text to replace it. However, this template is unique when it comes to link text because it has a line icon beneath the link text that disappears when you hover over the text itself. To achieve this effect, the area for the line expands above the text, so you can't actually click into the text field to edit it, but there is a simple workaround for this.
1) If you click directly on the text you want to edit, it will actually select the line element rather than the text element, but clicking on it to start will help you find where the link text element is that you need to replace.
2) Once you have clicked on the line element beneath the link text, look within the left sidebar of Showit and be sure you are on the Page tab. Then, find the element highlighted in blue. Simply click on the little desktop and phone icons that appears to the left of the element name to temporarily hide the element from both views.
3) Now you can click directly into the text field to edit the text and expand or shorten the text box. Ensure the size works well on the mobile view screen too.
4) Once you've edited the text, you can now find the Line Element in the left sidebar of Showit again. It should be the element just above the text with the name "LINK THIS-CTA UNDERLINE". You can now click the desktop and phone icons once again to make them visible on Desktop and Mobile.
5) The last step is to actually assign the appropriate click action to the line element. With the element still selected, look to the right sidebar of Showit for the Click actions tab and select it.
6) You can now update the link type to link to the page, canvas, or URL that you would like it to link to.
Editing link text to keep the disappearing line effect
watch a video
One of the coolest features of Showit is that you can easily update your website with your own color palette within the design settings and the changes will take affect across your entire site. Follow the instructions below for how to do this and best practices.
1) In the left sidebar of Showit, select the Design Settings tab to open the design settings window.
2) Within the Site Style Tab, you will see a color palette section where you an update the colors to your own color palette.
3) For the Salt & Shore theme, the only colors we are using are colors 2-6. Color 1 is set to black and color 8 is set to a pure white.
4) To update the colors, I would suggest keeping with the order of going from darkest to lightest colors like the template is currently set up.
5) Here is an overview of what the colors are used for throughout the design:
Color 2: Most of the Text is this color
Color 3: This is mostly used for accents like the underlines beneath the Call to Action text.
Color 4: This is used for the sticky menu background and for a few accented text options.
Color 5: This is one of the main background colors
Color 6: This is one of the main background colors.
6) When adding your colors to the theme, make sure that the color you are replacing Color 2 with (most of the text) is easy to read on top of colors 4-6 as these are used for backgrounds throughout the theme.
7) When you have adjusted all of your color settings, click the blue save button to save the changes and see the color changes reflected throughout your site. Upon reviewing, you may see that you need to adjust or move around some of the colors.
Updating Template Colors
watch a video
Updating the typography across your Showit template is a simple process. Follow the steps below if you’d like to change up the typography on your site.
1) If you already have web fonts that you would like to use on your site (and proper web font licenses for use), the first thing you will need to do is add the font files to your media library. To do this, ensure you are on the Site tab in the left sidebar of Showit, and then click on the Media Library tab. This will open the media library where you an upload or drag and drop your font files into the library.
2) If you don’t already have typefaces that you would like to use, but you want to change up the type from what is currently in the theme, a great resource is Google Fonts, and the best part about Google Fonts https://fonts.google.com/ is that all Google Fonts are already pre-loaded into your Showit library for you to use.
3) Once you are ready to set up your type settings, ensure you are on the Site tab in the Showit left sidebar and then click on the Design Settings tab.
4) You will see a tab titled “Fonts” at the top of the window that appears. Click that to load the fonts you will be using into your font list.
5) If you uploaded fonts you already have a web font license for to your media library, you will be able to add them to your Font list in the Custom Fonts section. Simply select the drop down beside the Library WOFF text and choose the font you would like to add. It will also have you assign a name to the font. Once you’ve done this, click Add Custom Font to add it to your font list. Do this for each custom font you would like to add.
6) If you are going to use a Google Font in your design, locate the Google Fonts section near the top of the window and in the selector next to font name, the drop down list will contain all of the fonts in the Google Font library. Choose the One you would like to use and then select the style of the font you would like to add to your font list. Then, click Add Google Font. Do this for all Google Fonts you wish to add.
7) Now that your fonts have been added to your font list, you can click on the Save Now button.
8) We will now click the Design Settings tab again to go back to the design settings, but this time, click on the Site Style tab if it isn’t already selected.
9) Within the type styles section, you will see the Typography settings for both desktop and Mobile. You can define the styles for Titles, Headings, Subheadings, and Paragraphs.
10) To edit a type style, click on the 3 dots beside the style you would like to edit to reveal a menu of options. Here, you can select a new font, adjust the size, adjust the line height and letter spacing, change the alignment, and change the letter case. Please note that it is not recommended to change the alignment on this template as it was designed with the current alignment settings in mind and may require many manual adjustments if it is changed. Be sure to always adjust the style for mobile as well, as it will not automatically update.
11) Once you have adjusted all type styles that you want, click the blue save button to see your changes within the Showit customizer.
Updating Template Typography
watch a video
The home page currently features a looped video background for one of the sections with text on top of it. The video overlay is also set to be somewhat transparent so that it blends with the background color beneath it. To change the video used, or use and image instead, follow the instructions below.
1) If you'd like to use a different video here, make sure that the video is an .mp4 and it is less than 8mb. One way to keep it under 8mb is to trim the length of the video down by quite a bit. A video that is less than 10 seconds will likely be best. If you need to compress the size of your video without using quality, my favorite tool for this is Clipchamp. With Clipchamp, you can adjust the compression settings and then download the new video file once the compression is complete. You do not need a paid account for this. It may take a few tries and adjustments to get the video down to less than 8mb. I recommend trimming the video first down to a shorter time and then uploading to Clipchamp for compression. If after compressing, it is still too large, you can trim again and then re-try the compression with Clipchamp until you get it down to 8mb or less.
2) If you'd like to find a video to use, my favorite resource for free videos that are free to use without credit under the creative commons is Mixkit but many stock photo websites also offer high quality videos that you can pay for and download as well.
3) To update the video background (or change it to a photo), make sure that the Site tab is selected the left sidebar of Showit and that you are on the "Home" page.
4) Next, select the "Page" tab at the top of the canvas to display the canvases on the home page.
5) In the Showit sidebar, select the canvas labeled “Value Prop”. This is the canvas that contains the video background.
6) Once you click on the Canvas, the right sidebar will display settings for that canvas. Click on the Canvas background tab.
7) You will now see a few options displayed. Type indicates if the background is a solid color, a video, an image, or none for no background. If you would like to switch the background to something besides a video, select one of the other options and then make your selections.
8) To change the video background for this canvas, click on the Video thumbnail that is displayed in the right sidebar. This will bring up the selection window where you can select your new video. If you have not already uploaded the new video, you can do that now from within the selection window, either by clicking the “Upload Files” button in the bottom left corner or simply dragging the video file into the image selection tool.
9) Next, you will also need to select a fallback image to use in case the video has issues loading or it is not supported on a visitors browser. You can select the fallback image by clicking on the thumbnail for it and then selecting the image you would like to use.
10) You can also update the rest of the settings in this pane, including the Opacity level. The current video background is set to a very low opacity so that most of the color beneath it shows through and the text is easy to read. However, you can adjust the opacity percentage as you wish as well as the color beneath the video that shows through.
11) It is worth noting that you cannot use video backgrounds on Mobile, so you will also need to click on the “Mobile” tab within the Canvas background settings and select an image or color to use for the mobile view of this canvas.
Updating Home Page Video Background or Changing it to a Still Image
watch a video
The featured gallery canvas on the home page can be easily edited to display any galleries of your choosing. Follow the steps below to customize the galleries that are displayed.
1) In the left sidebar of Showit, ensure the Site tab is selected and then select the home page.
2) Select the Page tab at the top of the left sidebar to display the canvases on the home page.
3) Select the Gallery canvas to display the elements and Canvas views within the galleries canvas.
4) Since the gallery titles are Links, we will need to update the text for the titles by hiding the line icons that display beneath them first.The line icons are indicated by the text that says “LINK THIS- Gallery x Underline” Simply click on the desktop icon beside all for of those line elements to temporarily hide them from the desktop view.
5) Now you should be able to double click into each of the gallery names to re-name them. Once you have renamed them all, un-hide the line icon elements by clicking on the desktop icon beside each of them to make them visible again. Make sure to check out the mobile view to see if any of the formatting needs to be adjusted after changing the names. Try to keep the names short. If they end up on two lines, you will need to expand the height of the line icon element after making it visible again.
6) Now it is time to update the gallery photos. The photos for each gallery are located within a separate Canvas View (indicated by the folder icons beside the view name). The views are labeled by gallery number, with the first gallery being the first one in the list.
7) In the left sidebar of Showit, Select the Canvas View for the first gallery. Then click on the Gallery element within the view.
8) With the Gallery Element selected, click on the “Gallery Images” tab in the right sidebar of Showit. Then click “Manage Images”
9) The image selection window will appear. In the right side bar of the window, start by deleting the images currently in the gallery by selecting the first on, holding shift and selecting the last one. This will select them all. Then you can click the red trash can icon to delete those photos from the current gallery.
9) You can now select the new images for your gallery. You can select multiple images in a row by clicking the first in a series, holding shift and then clicking the last one you would like to select and it will select all photos in between. Alternately, you can select multiple photos by simply holding down CTRL (windows) or Command (mac) while you are selecting them. Once you have selected photos, click the blue arrow to move them into the gallery. You can also select just one at a time and move them into the gallery by clicking the blue arrow after each selection. This is what you should do if you are pulling images from multiple folders in your media library.
10) In the right sidebar of the image selection window, you can drag and drop the photos to move them into the position you would like them to appear in. Once you have finalized the photos and their positions, click the blue save button. Your gallery will now reflect the new images.
11) Repeat steps 7-10 for all remaining gallery views.
Updating Home Page Featured Galleries
Updating & Adding New Testimonials
About Page
watch a video
The about page features a testimonials section where you can add in nice things clients have said about you. You could also change this section up to be fun facts or bucket list items, anything you want really!
1) In the left sidebar of Showit, make sure the “Site” tab is selected at the top and then select the “About” page.
2) Then, select the “Page” tab at the top of the left sidebar to display the canvases on the About page.
3) Next, in the left sidebar, select testimonials canvas.
4) Each testimonial is displayed within a separate Canvas View (indicated by the folder icon beside the Canvas View Name)
5) Click into each Canvas view to update the text and names within it by double clicking into the text fields and replacing the text. You may need to adjust the size of the text fields to accommodate for more or less text.
6) After updating the text, you can adjust the size of the text box to fit the text perfectly, and then in the right sidebar of Showit, click on the Size and Position tab and find the “Center to Canvas” section. Click on both icons in that section to center the testimonial text in the middle and center of the canvas.
7) After updating text on the desktop view, switch to the mobile view, as you will likely need to adjust the size of the text box there as well.
8) Repeat steps 5-7 for all testimonial Canvas Views.
9) To add additional testimonials, simply duplicate the previous Testimonial Canvas View by clicking on the Canvas View and then clicking on the 3 dots that appear beside the Canvas view name. A new menu will appear with the option to duplicate. A new canvas view will appear that is a replica of the previous one. Just follow steps 5-7 again to update it with new information.
Updating & Adding New Testimonials
watch a video
The Galleries page shows a collection of gallery cover photos with titles. When the photos are clicked, they lead to the full gallery of images. See instructions below for how to upload the gallery covers, titles, and photos within the gallery that display when clicked.
!) In the left sidebar of Showit, ensure the Site tab is selected at the top and then select the Galleries page.
2) In the left sidebar, click on the Page tab to display the Canvases within the Galleries page.
3) You will see that the Gallery Covers are broken up into separate canvases with each canvas containing a row of 3 Gallery Covers. Galleries 1-3 are on Gallery Covers Row 1, Galleries 2-6 are on Gallery Covers Row 2 and so on.
4) We’ll start by updating the Gallery Covers for the galleries you would like to update.
5) Select the Gallery Covers Row canvas that contains the Gallery Cover you would like to update. You can also click directly on the gallery cover within the Customizer to select it in the sidebar.
6) Within the Gallery Cover Row Canvas that you have selected, you will see that there are elements for all 3 Gallery Covers on that row displayed. There is an arch frame that is placed above the Cover Photo, The Cover Photo, and the Gallery Title.
7) Start by replacing the Gallery Cover photo by selecting the corresponding Photo element in the left side bar named “Gallery x Photo”
8) Now, look to the right sidebar of Showit, and click on the image tab at the top. Click on the image thumbnail to bring up the image selection window to choose a new image for your cover photo.
9) Next, double click into the Gallery Title text field to update the title text.
10) Now, we can add all photos for this gallery. In the left sidebar of Showit, select the Galleries canvas to display the elements and canvas views within it.
11) Choose the canvas view that corresponds to the Gallery # you are currently working on. Double click on the Gallery name within the customizer to update the name.
12) Next, double click into the gallery photo area to update the photos for that gallery. The image selection window will appear.
13) Start by deleting the photos currently in the gallery by selecting the first photo in the Gallery Images pane, holding shift, and selecting the last photo which will select all photos. Then, hit the red trash can icon to delete. them.
14) Next, if add in the images for this gallery by selecting and moving them into the Gallery images panel with the blue arrow button. You can select and move multiple images at a time by holding Shift to select several photos in a series, or you can hold the CTRL (pc) or Command (mac) while clicking photos to select multiple photos not in a row. You can drag and drop the photos into the position you want them to display in the Gallery Images pane and then click save when you have them all added and sorted how you’d like.
15) Repeat steps 5-14 for all Galleries that you would like to update.
16) If you don’t need all of the Galleries shown yet, you can simply hide the unused Gallery Cover rows or specific Gallery covers within a row.
17) To hide an entire row of Gallery Covers, select the Gallery Covers Row canvas that you would like to hide and then click on the 3 dots that appear beside the Canvas name. Uncheck both the Visible on Desktop and Visible on Mobile selections to hide the Canvas from view until you need it. Repeat this for any additional Gallery Row canvases you are not yet ready to use.
18) If you need to use just one or two Gallery Covers on a row, you can hide the additional Gallery elements on that row by clicking the Mobile and Desktop icons beside the unused elements to hide them until you need them. Please note that if you do this, you will need to adjust the size of the canvas on Mobile view to get rid of the extra white space where the Gallery Cover elements used to be. Then, when you un-hide them to use them again, you will want to extend the canvas height to once again make room for those elements once they are visible.
Updating Galleries
watch a video
Your template comes with 9 galleries already activated. If you don’t need all nine, you can follow the instructions in the Updating Galleries tutorial to temporarily hide galleries until you need them. If you would like to add additional galleries, follow the instructions below.
1) In the left sidebar of Showit, ensure the Site tab is selected and select the Galleries page.
2) Click the page tab at the top of the left sidebar to display the canvases on that page.
3) The template comes with 3 rows of Gallery Covers displayed with 3 galleries listed on each row, 9 Galleries in total.
4) To add additional galleries, we just need to turn on the visibility for the additional Gallery Cover rows. As you’ll see in the left sidebar, there are 7 additional rows for Gallery Covers for up to 30 galleries, and you can always add additional galleries over that number by duplicating the last row of gallery covers and changing the click actions for each gallery cover on the row to link to the corresponding gallery view.
5) To turn on the visibility for the next row of Gallery Covers, select the Gallery Covers Row Canvas in the left sidebar and then click on the 3 dots that appear beside the Canvas name to reveal a new menu and then click the checkbox for both Visible on Desktop and Visible on Mobile.
6) You now have a new row of Gallery Covers to edit. These are automatically linked to the corresponding Gallery View in the Galleries canvas. Just follow the instructions in the Updating Galleries tutorial to update these Gallery covers, titles, and gallery photos.
Adding Additional Galleries
watch a video
The FAQ’s page features a list of common questions and when clicked on, the answer slides up from the bottom. To update the questions and answers, follow the instructions below:
1) In the left sidebar of Showit, ensure the Site tab is selected and then select the FAQs page.
2) Select the page tab at the top of the left sidebar to display the canvases on the FAQs page.
3) The page currently displays 10 questions, but there are placeholders for up to 20 questions, and additional questions beyond that can be easily added by duplicating the most recent question and updating the text and then duplicating the most recent Answer Canvas view and updating the text. You will then just need to change the click action for the Question to link to the new Answer Canvas view (shown in video).
4) To update a question, double click into the question text area and replace with your question text. Be sure to also check out the mobile view to adjust the formatting if necessary and extend or shorten the canvas as needed.
5) Next, update the answer by selecting the Answers canvas in the left sidebar to display the Canvas Views within that canvas. As you can see, each answer is on its own canvas view.
6) Select the corresponding answer view for the answer you are updating and then click into the text area where the answer is to update the answer text. Be sure to check the mobile view as well to see if the formatting needs to be adjusted.
7) Repeat steps 4-6 for all questions that need to be updated.
8) If you don’t need all 20 questions yet, you can simply hide the additional question canvases that you aren’t using by clicking on the Canvas name for each question you would like to hide and then clicking on the 3 dots that appear beside the name. A small menu will appear. Uncheck the boxes for both Visible on Desktop and Visible on mobile to hide these canvases until you need them.
Updating the FAQ's
watch a video
The FAQ’s page comes with 10 Questions and Answers visible, but there are placeholder fields for additional FAQ’s to be added. Follow the instructions below to add those additional FAQ’s.
1) In the left sidebar of Showit, ensure the Site tab is selected and select the FAQ’s page.
2) Select the Page tab at the top to reveal the canvases within the FAQ’s page.
3) You will see that each Question is listed on its own canvas, named accordingly and the canvases for questions 11-20 are not currently visible as indicated by the icon showing an eye with a line through it.
4) To make a question canvas visible, select the Canvas name for the question you would like to make visible and then click on the 3 dots that appear beside the name. Then check the boxes for both Visible on Desktop and Visible on Mobile to make the canvas visible.
5) You can now update the question and answer as per the instructions in the Updating FAQ’s tutorial.
6) If you need more than 20 FAQs listed, just duplicate the last Question canvas by clicking on the Canvas name and clicking the 3 dots that appear and then clicking duplicate in the menu that appears. You will then need to click on the question text and adjust the click action text so that it links to the Canvas View number that corresponds with the question number. You can then select the Answers canvas to reveal the canvas views that contain the answers and duplicate the last Answer canvas by selecting it and clicking on the 3 dots that appear and clicking duplicate. You can now update the answer text with the new answer.
Adding Additional FAQ's
watch a video
The Salt & Shore template comes with a blog page that includes blog categories that can be clicked on to reveal blogs within those categories. However, you will need to update the Category names and links to link to the categories you choose for your blog. To do this, follow the steps below:
1) In the left sidebar of Showit, ensure the Site tab is selected and then scroll down to the Site Canvases section and select the “Post List 1” Site Canvas (this is where the categories are displayed. Since it is a site canvas, updating it here means that it will also be updated on the other pages where it is displayed, like the Category result page).
2) Next, select the Canvas tab at the top of the left sidebar to display the elements within the Post List 1 site canvas.
3) Next, we will need to update the text for each Category, but we will first need to turn off the line icon visibility so that we can actually click into the text to edit it. These line icons are titled “LINK THIS- Category x Underline”. Click on the desktop icon beside each one to turn them off temporarily.
4) After hiding the line icons, you should now be able to click into the Category name text fields to edit the text with your own category names. Be sure to check the formatting on mobile as well to see if the text box areas need to be extended.
5) Once you have updated all category names, we will need to link those categories to the appropriate pages that will display posts from those categories. Start by turning on the visibility for the line icon links again by clicking the desktop icon beside each of them. These are what will set a click action for to link to the category pages.
6) Before creating a link, we will need to determine the category slug for each category. To do this, you will need to log into your Wordpress Admin area.
7) Within your Wordpress dashboard, select the Posts tab in the left sidebar, and then select the Categories tab beneath it. This will display your Wordpress categories. If you don’t yet have all of your categories added, you can add them here.
8) Next to each category listed, you will see it’s category slug. This is what we will need to create a URL to link to that category page.
9) Back in your Showit Dashboard, click on the corresponding line icon element for the category you would like to link titled “LINK THIS- Category x Underline). Then look to the right sidebar of Showit and select the Click Actions tab.
10) The Click action type should already be set to URL and now we just need to input the URL there that we will create in the step below.
11) To create your URL, adjust the following URL to replace the “yourdomain.com," portion with YOUR WEBSITE DOMAIN and the “whatever-the-category-slug-is” portion with the category slug that you pulled from Wordpress. Leave the rest of the URL as is.
https://yourdomain.com/category/whatever-the-category-slug-is/
12) Repeat steps 9-11 with the remaining categories that you need to link.
Updating Blog Categories
watch a video
One thing you will notice when working with your blog in Showit is that the Blog template pages look like a bit of a mess! This is because the design of the page is set within Showit but it is going to be pulling in content from your Wordpress account. You will only be able to see the blog page in its true form when your design is published and it can pull in that live blog content.
Since all of the content for your blog page is pulled directly from Wordpress, there isn’t much you should need to edit here besides the blog categories. Editing anything else could impact the functioning of your page.