Take control of your website! Change texts, buttons, links, images, background, and manage the content and style of your homepage sections the way you want to, whenever you want to. Directly from your SpotHopper platform!
Contents:
More Control
As a restaurant owner or manager, we know you’re juggling multiple things at once. That's why we’ve made sure that updating your website isn't one of them.
Now, you can easily make a quick change late at night or during the busy weekend hours without having to contact support!
Our Website Editor allows easy, convenient, and time-saving website updates.
How to Use Your Website Editor
From your SpotHopper account, choose the “Website” tab from the left sidebar.
In the upper right corner of the “Website” page, you will see an orange “Edit Website” button.
Clicking that button will open the Inline Website Editor.
The Inline Website Editor is your homepage, but in an edit view:
From within the Website Editor, you can edit the content and the style of your homepage. Depending on what you need to edit, click the respective tab from the banner at the bottom of the screen.
If you're editing the content, the "Edit Content" button should be orange and vice versa. If the "Edit Style" button is orange, that indicates you're implementing style changes.
To edit the content, simply click the pencil icon above the section you wish to update:
Know when you're editing thanks to the 'Editing' icon replacing the simple 'pencil' icon.
If you wish to start editing the style of a section, then you will need to click the pink "Style Section" button
💡 TIP: if you open more than one window of your editor simultaneously only the changes within the first active window will be saved.
Editing Content - What You Can Edit
To start editing the content, make sure that you are under the "Edit Content" mode:
Then, find what you need to edit, and hit the appropriate pencil icon to start editing.
With the Inline Website Editor, you have four options to edit the content on your homepage:
1. Change Text:
2. Change Button/CTA Links and Text:
Note: Changing links/texts only applies to that individual CTA/button.
If you're changing a Reservations link in a section at the top of your homepage, it will only update the Reservation link there–nowhere else. This is important if you have multiple Reservation links on your website that need updating.
Reach out to your support agent if further changes need to be made!
3. Change Images:
Clicking the pencil icon will open your SpotHopper gallery so you can either choose an existing image or upload a new one.
4. Hide/Show Homepage Sections
In the upper right corner of each homepage section, you will see a"Hide Section" button.
Clicking this button will hide the specific section from your homepage. Keep in mind that the section will only be hidden from the website view, but saved within the editor. You can easily bring it back by clicking the "Show Section" button in the left corner below the hidden section.
For instance, if you hide Section 2 (as shown in the image above), the "Show Section 2" button will be placed on the left, between Section 1 and Section 3. So you can always bring it back.
Once happy with the changes, make sure to save them so they become active. You can do so by clicking the orange "Save Changes" button in the lower right corner of the screen.
To see how the applied changes will look on your homepage, you can easily switch out of the "Editor" view by clicking the "Preview Changes" button.
Editing Style
Need to change the homepage colors to a more festive theme for the upcoming holiday? Or do you simply want to increase the background contrast so your text is more readable? Now you can apply such style changes on your end, through the Website Editor.
To start, make sure you click the "Edit Style" tab from the banner at the bottom of the screen.
Then, find the section you wish to edit, and hit the "Stle Section" button.
A pop-up with the editing options will appear:
You can not only update the background image of the section, but you can change the color of the text and background, as well as apply other filters to the background image:
Grayscale - Turns the color image into a greyscale image. The pixels become different shades of grey.
Sepia - Adds a warm, brownish, and vintage-looking tone to the image.
Opacity - Adds transparancy to the image
Blur - Applies blurring effect to the image
Why is this important? Well, let's say you change the background image to a section, and now it looks like this:
Clearly, the text here is hard to read, and the image needs to be a bit faded out so that the email box can stand out more.
So you play around with the filters, change the opacity, maybe add some blur and greyscale tones,
And your image now looks like this:
If you're satisfied with the changes, just hit the "Save Changes" from the lower right corner of the screen. If not, don't worry! You can always reset the changes
What Cannot Be Edited
The Inline Website Editor will help you customize your homepage. However, it will not work for those parts that can be updated directly through your platform.
For instance, in the contact section at the bottom of the homepage, you can only update the title text as seen below:
Information like hours, address, phone number, social icons, etc. should be updated from their respective page on the platform.
The changes made with the Website Editor will be visible on your website within seconds. However, please allow 1-2 minutes if opening your website from the "Website" tab in SpotHopper.