Ecommerce: Tips & Gratuity

Dynamic Pages: Adding Dynamic Pages to Site Nav

Timeline

Ecommerce: Product Gallery

Email: Password Recovery and Password Reset

Email: Send and Receive Emails Within Gmail

Email: Adding a New Mailbox

Email: Storage and Attachment Size Limits

Email: Setting Up an Auto-Responder

Email: Setting Up Email Forwarding

Note: this feature is only available to sites hosted on our Standard, Pro or Unlimited store.

You may accept tips & gratuity in your ecommerce sites. This feature is available regardless of store or product type; so you may use it for restaurants, services or goods. Consider using this feature for crowdfunding and donations as well!

Tipping is available in percentage based amounts (5%, 10% or 20%) as set dollar amounts ($5, $10 or $20). Label text is customizable and gratuity amounts are added to the checkout total for a seamless and transparent customer checkout experience.

Enable Tips and Gratuity

To enable Tips and Gratuity:

  • In the left panel, click eCommerce, and then click Manage Store.
  • Click Settings, and then click General.
  • Click the Cart & Checkout tab.
  • Scroll to Tips and Gratuity
  • Click the toggle to enable Tips and Gratuity.
  • Click the Tips Settings button.

Tip Wording

This section allows you to display your own custom text. Use this wording to match the purpose and benefit of your business. Be creative! With the right wording, you can apply this feature to services, crowdfunding campaigns and donations.

Tip Amounts and Calculation

The remaining options allow you to select percentage or fixed amounts, as well as determine the actual values.

Dynamic pages can easily be added to your site navigation. This makes it quick and easy for site visitors to find the page they’re after, directly from the main nav. Let’s look at how to add dynamic pages to site navigation.

Create a Parent Page or Folder

Dynamic pages listed within a site’s navigation must be contained within a parent folder or page.

  • If you do not already have a parent folder or page, create one now. Click on Pages in the side menu.
  • Click the New Page button.
  • You may create a page or folder as the parent item. In our example, we’ll select folder.
  • Name the folder and click Add Page.

Adding Dynamic Pages to Navigation

Now that you have a parent folder or page, you need to add Dynamic Pages as subpages.

  • In the pages menu, locate your dynamic page. If you haven’t built a dynamic page, do that now. See our Creating Dynamic Pages documentation for more info.
  • Click the gear icon to access settings.
  • Select “Hide/Show in Navigation”, then “Show on All”
  • In the “Add page items as subpages of” field, select the parent folder or page.
  • The next selection will allow us to choose the page title that will be displayed in the submenu of the parent item. In your collection, you should have a field name set to page_title or similar.
  • Select the field name you would like to use. In our Featured Homes example, we’ll select “listing_title”
  • Click Save Details.

And that’s it! Your dynamic pages will be displayed in your site nav in a submenu of the parent item.  

 

For a complete overview and video tutorial of Dynamic Pages, check out our 5-part video series:

The Timeline widget offers a great way to put events or milestones on display. Once you’ve entered your event information into the widget panel, the widget displays events in an interactive visual timeline. Users can explore the timeline, clicking events to reveal more information. Great for your about page or project development roadmaps.

Preview: https://demo.wocode.com/timeline

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the timeline to appear.
  • If you need to resize the widget, the width may be adjusted with the blue grab handle in the bottom right. However, keep in mind that the timeline itself is adjusted manually. If you resize the widget, it may be necessary to resize the timeline: Design tab > Timeline Styling > Timeline Width.
  • As content is added, the widget may auto-expand, based on sizing and padding settings.

CONTENT SETTINGS

  • Unique ID: If you use multiple widgets on the same page, be sure to use unique ID’s for each widget.
  • Events: Use these list items to add your event content. Within each event list item, you will find several options:
  • Event Date: This sets an event date to be displayed if the Label Type option is set to Date. This entry must use the mm/dd/yyyy format.
  • Label Type: You may choose from 2 different label types: Date or Custom. Date uses the date entered in the Event Date field above. Custom uses whatever text you enter in the Custom Label field below.
  • Event Title: Sets the title of the event.
  • Event Subtitle: Sets the subtitle of the event. The subtitle appears just below the title. You may leave this field blank if you have no subtitles.
  • Event Description: This sets the description for the event.
  • Click the Add Event link to add more events. Repeat as necessary.

DESIGN SETTINGS

Front Box Styling / Back Box Styling:

There are numerous options that allow you to style all of the elements of the timeline, including title, subtitle, description, timeline and navigation dots. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, we will share a few notes:

  • There are numerous padding and margin options in the Design section. Use these to add and control spacing around various elements.
  • Use the Timeline Width setting to control the width of the actual timeline.
  • The timeline places events on the timeline based on the actual date you enter in the content section. If you have events that are close to one another, the labels may overlap. Consider using condensed fonts or shortening label text content if you have overlapping text.
  • The dots on the timeline provide the timeline navigation for site visitors. When styling the dots, be sure that they are easily clickable.

The new Product Gallery sets the stage for a fantastic shopping experience in your Ecommerce sites. With all the functionality of the Photo Gallery widget, the Product Gallery goes above and beyond by seamlessly integrating live products in your store catalog.

Preview:https://demo.wocode.com/product-gallery

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear.
  • You may use as many instances as you like throughout the site.
  • Ensure that you still have a store page with the Store Design widget in use. Products in the Product Gallery will link to the items in the store.

CONTENT SETTINGS

  • Select a category. These consist of the product categories you’ve created in your store catalog. Any new category you create will appear in this dropdown.

PRODUCT FILTERS

In addition to product categories, you can also use filters to show a collection of products. There are 2 filter types: On Sale and What’s New.

  • On Sale automatically detects and displays items that are discounted in your store catalog.
  • What’s New displays items that have been added within the last 30 days.

To use these filters, simply select them from the category dropdown.

ADDITIONAL CONTENT SETTINGS

At the bottom of the content tab, there are additional content settings, all with toggles so that you may enable or disable them. These settings include:

  • Title
  • Button
  • Price
  • SKU
  • Additional Image

DESIGN SETTINGS

Extensive styling options are available in the Design section, allowing you to fine tune the look and feel of the gallery. Several layout options are available, as well as control over the column and row counts. Beyond the structural settings are numerous styling settings, allowing for full control over fonts, colors and spacing.

The Design settings are the same as what is available in the Photo Gallery widget. See our Photo Gallery documentation for additional details.

 

Setting up password recovery is crucial. If password recovery is not set up, there will not be an option to reset the password at the login screen. If you have been locked out and have not set up password recovery, it can only be reset by the email administrator. In this documentation, we’ll show you how to set up a password recovery and reset your password. To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/

Setting Up Password Recovery

  • Click the Open Webmail button in your email dashboard. Or go to https://mail.hostedemail.com/
  • Log in to Webmail (this login uses the email address and password that was created for the mailbox in the email dashboard).
  • Click Settings in the sidebar menu.
  • Select Password Recovery.
  • You will now set a recovery email address or SMS phone number. The process is very similar for both.
  • Enter your recovery email address or SMS phone number.
  • Enter your current password in the password field.
  • Click Save.
  • A token will be sent to the phone number or email you’ve entered. Copy the token and paste it into the Response Token field. This process is required in order to validate the provided phone number or email.
  • Click Save.
  • You will see a green success notification message in the bottom right corner, confirming that your password recovery has been updated.
  • You’ve now properly set up password recovery. If the wrong password is entered at Webmail login, an option to “Reset your password” will now appear. The recovery email or SMS phone number entered in the process above will be used in the password recovery.

Resetting a Password

If password recovery information has been saved as described above, a password reset option will be available at login if the password has been forgotten. To reset a password:

  • Ensure that the steps above in the “Setting Up a Password Recovery” have been completed.
  • Click the “Reset your password” link on the Webmail login screen.
  • Select your password recovery method: email or SMS. The option listed in this window will be the same as entered in the Password Recovery process above.
  • A recovery token will be sent to your email or SMS phone number.
  • Enter your recovery token, as well as a new password.

 

To learn more about email services, check out our complete email walkthrough and tutorial:

If you mainly use Gmail for email (personal or business), it may be handy to be able to send and receive email without ever leaving Gmail. We can accomplish this with the Send mail as option in Gmail’s settings.

In this document, we’ll show you how to send and receive your custom email from your Gmail account. This method will store messages in both places (your custom email and Gmail).

If you wish to receive your custom email in your separate Gmail inbox only (and not in your Webmail or configured mail client), you can setup email forwarding.

To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/

Connect Your Custom Email with Gmail to send mail (Send mail as):

  1. Log in to your Gmail account, then click the gear icon.
  2. Select “Settings”.
    mceclip1.png
  3. Go to the “Accounts and Import” tab.
  4. Click the “Add another email address” in the “Send mail as” section.mceclip3.png
  5. Enter your name in the “Name” field.
  6. Enter your custom email address in the “Email address:” field on the new pop-up window.
  7. Uncheck the “Treat as an alias” option.
  8. Click the “Next Step” button.mceclip2.png
  9. This will open another page. Enter these settings:
    • SMTP Server: mail.hostedemail.com
    • Port: 465
    • Username: your custom email address
    • Password: your password for your custom email
    • Secured connection using SSL (recommended)

  10. A new screen will load in the same pop-up window, instructing you to check your custom email where a confirmation code was sent to. You will need to open the email message from Gmail in your mailbox using webmail or wherever you have your email configured.
    mceclip8.png
  11. In your mail inbox, find the Gmail confirmation email title “Gmail Confirmation – Send Mail as name@yourdomain.com”. or similar.
  12. Click the confirmation link in the email.
  13. A new tab will open. Click “Confirm” to allow sending emails using your custom email address from within your Gmail account.mceclip9.png
  14. Once you see the “Confirmation Success!” message, you may close that tab and return to your Gmail settings. Verify that the custom email has been added by refreshing the Gmail settings page.
  15. The “Send mail as” settings should look like this:
  16. You may now begin sending emails from your custom email address by first clicking the “From” field. You should see two email addresses there: one is your Gmail and the other one is your custom email. Pick your custom email address before sending messages.

Connect Your Custom Email with Gmail to Receive Mail (Check mail from other accounts):

  1. Click on the “Accounts and Import” tab in your Gmail settings page.
  2. Click “Add a mail account” link in the “Check mail from other accounts” section.
  3. In the newly-loaded pop-up window, type your custom email in the “Email address” field.
  4. Click the “Next” button.
    mceclip13.png
  5. The pop-up window will reload, with these settings:mceclip14.png
  6. Click the “Next” button again.
  7. Enter the following mail server settings:
    • Username: your custom email ie name@yourdomain.com
    • Password: your custom email password
    • POP Server: mail.hostedemail.com
    • Port: 995

      Tips: We suggest ticking the following options:

      • Leave a copy of retrieved messages on the server: This allows you to keep a copy of your emails in your Webmail in case you were to lose access to your Gmail account.
      • Always use a secure connection (SSL) when retrieving mail: This ensures that your emails are secure.
      • Label Incoming messages name@yourdomain.com: This makes it easy to tell which emails came from your custom email and which ones were received directly through your actual Gmail email address.
  8. Once you’re done entering the settings, click “Add account”. If you encounter no errors, the pop-up window will close. Gmail will begin retrieving the email messages in your custom email inbox.

Email Forwarding:

If you only want to receive your emails in your Gmail inbox, you can setup email forwarding.

 

 

To learn more about email services, check out our complete email walkthrough and tutorial:

In this document, we’ll cover the process of adding a new mailbox. This process will create a new email account with its own mail services, like email address, inbox, etc.

 
Before adding mailboxes, you will need to add a domain. View our documentation for adding a domain here: https://app.wocode.com/docs/email-adding-a-new-domain/
 
To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/
 

Adding a New Mailbox

  • Select My Emails from the main menu (click the hamburger menu in the top right to access the main menu). This will bring you to your email dashboard.
  • On your email dashboard you will see your domains (active and inactive) along with any existing email accounts.
  • To add a new email account, click the “Add Mailbox” button.
  • Note: if you don’t see the Add Mailbox button, the section options for your domain may be collapsed. Click the expand button to expand the options for your domain. 
  • Fill out the form for the new mailbox, including the account name and password.
  • Select the mailbox type: Standard or Forward.
  • Click the Add Mailbox button at the bottom. Your new mailbox will be created and listed under your domain.
  • Repeat this process as needed for additional mail accounts.

Sending Access Details to Clients

  • After creating a new mailbox, you may need to send access details to your client. To do this, click on the gear icon next to the mailbox, and select “Send Access Details”.
  • A new window will appear with the content for an email message. Click the “Copy to Clipboard” button to copy the email content to your clipboard.
  • You may now create an email to your client and paste the content in your clipboard into your email. This information will allow your client to access the mailbox with webmail.

Accessing Webmail

  • To access webmail for a mailbox, click the “Open Webmail” button in the top menu of the email dashboard.
  • You will now need to sign into your webmail. The login information is the same as what was entered in Add Mailbox pop-up window in the section above.
  • Once logged in, you will see your email inbox.
  • Your webmail has similar capabilities that you would find with an email service such as Gmail, Yahoo or Hotmail.
  • There are extensive options and settings available for your mailbox. Click the Help button in the webmail sidebar menu to access the webmail documentation. 

Accessing Email with Mail Clients (Outlook, Mac Mail, iPhone, etc)

You or your client may want to access their mailbox using a mail client such as Outlook, Mac Mail, Windows Mail, iPhone, Android or Thunderbird. Our documentation for setting up Email Clients provides the configuration settings needed to set up mail clients, and also offers downloadable unbranded PDF guides for setting up a variety of mail apps and devices – great for sending to clients!

 

 

To learn more about email services, check out our complete email walkthrough and tutorial:

Your email account has limits for storage and the size of emails you can send. In this document we’ll discuss the limits and how they relate to sending email messages.

 
To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/

Storage Capacity

Mailboxes have a storage capacity of 5GB. This storage is available per mailbox. If your domain has 5 active mailboxes, there will be 25GB of total storage with a maximum of 5GB available per mailbox.

Email Message Size Limits

The maximum size for messages (text + attachments) is technically 35MB. However, when files are sent over the internet, they are encoded. Encoded file sizes are increased up to 25%. Therefore, we recommend that attachments do not exceed 25MB in total.

If you need to send larger files, we suggest using the Files feature in your webmail. Access this feature in the side menu of your webmail. To learn more about Files, click the help button in the webmail sidebar.

 

 

To learn more about email services, check out our complete email walkthrough and tutorial:

Autoresponders are useful if you’re going on vacation or when you’re away from the office for an extended period of time. When you set up an autoresponder, the email system will automatically reply to anyone who contacts you with a custom message.

In this doc, we will show the process of setting up an autoresponder.

To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/

Set Up an Autoresponder

  • Log in to your Webmail. If you use a mail client such as Outlook or Mac Mail, you will not be able to set up the autoresponder there.
  • Click “Settings” in the side menu.
  • Select “Autoresponder”.
  • Check the “Enabled” box to turn on your autoresponder.
  • Interval (optional): This sets the number of days before the same recipient will receive your auto-response message. The default value is one day.
  • End Date (optional): This sets the day when the autoresponder will stop.
  • Autoresponse Text: This is the text that will be sent in the autoresponse message.
  • Click “Save” when you’re done. The autoresponder will begin working.

 

 

To learn more about email services, check out our complete email walkthrough and tutorial:

Mail Forwarding allows you to forward incoming mail to other existing email addresses. In this doc, we’ll cover the process of setting up mail forwarding.

To view our complete library of email documentation, go here: https://app.wocode.com/categories/email/

Set up Mail Forwarding

  1. Log in to your Webmail account, and click on Settings in the sidebar menu.
  2. Click Mail Forwarding.
  3. Click on the Enabled toggle to turn on forwarding.
  4. Enable Keep Local Copy if you would like to store a copy of the forwarded email in your mailbox.
  5. Forwarding Recipients: Enter the email address which you’d like your emails to be forwarded to.Note: You can add multiple email address in the “Forwarding Recipients” field by hitting “Enter” after typing in another email per line.
  6. Click Save when you’re finished. Emails will then be forwarded to your forwarding recipients.

 

Did you know?

You can also setup your custom email to send and receive from Gmail: view documentation

 

 

To learn more about email services, check out our complete email walkthrough and tutorial:

Join Now