1. Knowledge Base
  2. >
  3. Results
  4. >
  5. Website Builder - E-Commerce

Website Builder - E-Commerce

HostGator Website Builder's Business Plan includes a store feature for running your e-commerce business. It is the perfect tool for getting your products online quickly and easily.

This guide will walk you through the following ways to manage your store:


Click the links marked with a below to expand directions for further information.

  1. Log into your Customer Portal.
  2. Click Hosting in the menu, select the hosting package your domain is installed on under the Hosting Packages menu, then click Manage.

    Hostgator Customer Portal Hosting Menu Option

  3. From the Overview Dashborad, click on Manage on the Website Builder card.

    Hostgator Customer Portal Website Builder Card with Manage Button

  4. From the Website Builder's Your Websites, click the Edit Website to access the Website Builder for your domain.

    Hostgator Customer Portal Website Builder Card with Manage Button

  5. From the left-hand menu within the Website Builder, click Store and then select CREATE A STORE.

    Steps to create store within the Hostgator website builder

  6. The new store dashboard will load and state, "Let's start adding your first product".

    Hostgator website builder store bashboard welcoming installation page

  7. To make your new store successful, you will want to add product(s), review the store settings, and publish the store to your website. See the different sections below for more information about products and store settings.
  1. Log into your Customer Portal.
  2. Click Hosting in the menu, select the hosting package your domain is installed on under the Hosting Packages menu, then click Manage.

    Hostgator Customer Portal Hosting Menu Option

  3. From the Overview Dashborad, click on Manage on the Website Builder card.

    Hostgator Customer Portal Website Builder Card with Manage Button

  4. From the Website Builder's Your Websites, click the Edit Website to access the Website Builder for your domain.

    Hostgator Customer Portal Website Builder Card with Manage Button

  5. Click Store from the left-hand side menu.

    Hostgator Customer Portal Website Builder Card with Manage Button

  6. Click MANAGE PRODUCTS AND ORDERS.

    HostGator Website Builder Menu pop-out for store with Manage Products and Orders button

  7. You will then return to the store dashboard page. The phrase on this page will change as you work through setting up your store.

    Hostgator website builder store dashboard

  1. Navigate to your store dashboard using the directions above in "Access Your Store Dashboard."
  2. On the store dashboard page, click the Let's do it button.

    Hostgator website builder store dashboard adding first product walk through

  3. You will be prompted through a few questions to get your first product configured.
    • "What do you want to sell?" Select either physical products, digital download, or services, and click Continue.

      Hostgator website builder store adding first product type

    • Add your product information.

      Hostgator website builder store adding first product description

    • Add a product photo as more consumers are apt to purchase a product or service when it has a picture.

      Hostgator website builder store adding first product picture

    • Choose how your customers are charged for shipping on this product and click Finish

      Hostgator website builder store adding first product shipping

    • Follow the instructions in the Manage Products section for adding additional products or services to the store.
  4. Click the Let's do it button on Let's add your store information page to configure your store information. This information will be used on invoices, taxes, and customer cummunications in addition to being available to website visitors.

    Hostgator website builder store dashboard review store settings

  5. You will be prompted through various questions to configure the store information settings.
    • Provide your business address.

      Hostgator website builder store settings review of business address

    • The Automatically calculate and charge taxes to your customers screen will appear. You may click on Set up taxes later or Continue with the next store question.

      Hostgator website builder store setting review tax options

  6. Click the Let's do it button on Let's set up your payment method page.

    Hostgator Website Builder Payment Method Configuration

  7. You will be prompted to setup a payment gateway for your online store.
    • Select the payment gateway (the company that processes the customer's payment) to use for the store. The options include Paypal, Stripe, and cash upon delivery.
      Note: You may opt to configure one of these payment gateways now and then choose to configure the others later. It's up to you how many payment methods you want to provide to your customers when they checkout of your online store.

      Hostgator website builder store settings review of business address

    • The Payment Set Up page will show PayPal as an option to configure as your payment gateway. Click Sounds good! Set up Paypal to proceed or Skip for now. I'll add it later.

      Hostgator website builder store setting review payment method

  8. After setting up your payment gateway, you will be redirect you back to the Store dashboard with the message, "Nice Work!"
  9. You can continue to add additional products by clicking Products in the sidebar, click the Add icon, and follow the steps to add a new product.
  10. To make the store live on your website, you will want to click the Publish button.
  11. To continue to edit your Website Builder site, click BACK TO EDITOR to return to the main site editor.

To add a product to your store:

  1. Navigate to your store dashboard using the directions above.
  2. Click Products in the side menu or Add button.
  3. To add a new product, click the + button located in the lower right-hand corner.
    Note: Hovering over the + button will provide a bulk product import option.

    Hostgator website builder products page

  4. From this page, you may configure the following product features.

    Hostgator website builder individual product settings and features

    PRODUCT INFORMATION
    • Product Type: Select physical or digital product.
    • Basic Details:
      • Name: Set a name for the product.
      • Price: The price to charge for the item.
      • Excerpt: A brief summary of the product.
      • Description: Enter a description of the product.
      • Visible: Set whether or not the product is visible in the store.
    • Manage product images: Click here to upload an image(s) for your product.

    Hostgator website builder advanced settings for product

    ADVANCED SETTINGS
    • Discount: Enter a percentage of a discount on a product.
    • Banner: This will add text above the product as a banner.
    • SKU: Use this to add an SKU for your product if you use SKUs for item tracking.
    • Weight: Enter the product weight to configure shipping costs.
    • Track Stock: Use this toggle to set how much inventory you have to sell.
    • Shippable: Toggle shipping options for the product.
    • Taxable: Toggle tax calculation for the product.
    • Product Category: This space may be used to assign and change categories. (Note: Product categories must be enabled through Advanced Features in the side menu to be able to assign categories to individual products.)
  5. After filling out the product Settings, you may also click on the VARIANTS tab to set additional options.

    Hostgator website builder product variants

  6. Click Add a variant button to show the popup to configure the product variations.

    Hostgator website builder add a variant to single product

    • Use Your variant name drop-down to select from the global variants options such as color, size, and style.
    • The Variant type will automatically fill in based upon the set global variants.
    • Additional variant choices can be added to the product. Just type in an additional option, click enter or Enter. To remove a variant, click the X next to the variant option.
    • Click SAVE to add the variant to the product.
    • You will be redirected back to the variants tab.
  7. Under the Product variants combinations section, you can set an additional charge, use a different SKU, enable stock to manage individual variations and set if that variant is visible within the store.

    Hostgator website builder product variants combinations

  8. Adding another product variant will create a combination with any current variant.

    Hostgator website builder list of all product variants

  9. When you are finished configuring your new product, click either Publish or click the back arrow to return to the product management page.

To delete an item from your store:

  1. Open your store dashboard using the directions above.
  2. Click the to the right of the product.
  3. Select Delete from the drop-down.

    Hostgator website builder deleting product

  4. Click Yes to confirm the deletion.

    Hostgator website builder confirm product deletion

To manage your categories:

  1. Navigate to your store dashboard using the directions above.
  2. Click Advanced Features in the left-side menu of your store dashboard.
  3. From the features listed, click the toggle to the right of Product Categories to enable it.
  4. Click Products in the left-side menu of your store dashboard.
  5. On the Products page, you will see a right-hand column for categories and text stating Create a category if none exist.

    Hostgator website builder advanced feature for product categories

  6. Click the Add a category button.
  7. In the popup, enter a name for the category that your products will be displayed under.

    Hostgator website builder adding new product category

  8. There is an option to set a Parent category. This allows you to create levels of categories for your store.
    For example, you may have Electronics as the parent category. Nested under Electronics is TVs, Audio, and Computers.
  9. You can toggle the visibility of the new category.
  10. Click Continue to add the new category to your store.

To add new parent categories:

Note: Categories can also be dragged and dropped into a category or removed from a category using the bar on the left-hand side of the name of the category.

  1. Navigate to your store dashboard using the directions above.
  2. Click Products in the left-hand menu.
  3. Click + Add category to the right of Category in the right-hand column.
  4. Enter a name for the category that your products will be displayed under.
  5. Use the drop-down to select an existing category to be the parent of the new category. For example, the main parent category is Clothing. Under Clothing, you may have categories for Men, Women, and Children. Under Men, you could have categories for Shirts, Pants, Shoes, and Accessories.

    Hostgator website builder new parent category

  6. Click Continue to add the new category to your store.
  7. The new category will be displayed under the parent category.

    Hostgator website builder category order


To manage categories:

  1. Navigate to your store dashboard using the directions above.
  2. Click on Products in the left-hand menu.
  3. Hover over the category on the right-hand side of the page to display the following options:
    • Edit (Pencil icon) - Change the name of the category.
    • Delete (Trashcan icon) - Remove the category completely.
    • Visibility (Eye icon) - Hide the category from the storefront.
    • Collapse (Plus or Minus icon) - For parent categories to expand or collapse a top level category.

    Hostgator website builder category order


To change the categories for an item:

Note: You can change the product category by dragging and dropping the product into the category on the right-hand side from the main listing of products in the store dashboard.

  1. Navigate to your store dashboard using the directions above.
  2. Click Products on the left-hand side of the page.
  3. Click on the name of the item you want to change.
  4. In the Advanced settings section, look for the Product category label and click the line to get a drop-down selection of categories.
  5. Use the drop-down to select which categories to have the product listed under.
  6. Click PUBLISH to save your changes and return to the product page.

Shippo is an integrated software company that helps e-commerce businesses incorporate shipping with multiple carriers through an API and web application. Website Builder users will now be able to utilize weight based shipping with priorities like Next Day, 2 Day, or Standard Shipping within their online store. Follow the instructions below on how to set up integrated shipping with Shippo.


To enable or disable integrated shipping:

  1. Navigate to your store dashboard using the directions above.
  2. Click Advanced Features in the left-hand menu.
  3. Click the toggle to the right of Integrated Shipping to activate or deactivate this advanced feature.
  4. When activated, the section to configure integrated shipping will appear within the store Settings under the Advanced tab. If it is deactivated, you will only see a Shipping section with the option to enter the Shipping address within the store Settings.

To configure integrated shipping:

If you do not see the Integrated shipping listed, use the directions above in the "To enable or disable integrated shipping" to enable Integrated Shipping.
  1. Navigate to your store dashboard using the directions above.
  2. Click Settings on the left-hand side menu.
  3. Click the Advanced tab at the top of the page.
  4. Scroll down to the section titled Integrated shipping.

    Hostgator website builder advanced feature for integrated shipping

  5. Within the Integrated shipping section, confirm that the Shipping address listed is correct. If not, click Edit to update the address and phone number.
  6. To set up integrated shipping on your website, you will need to create a Shippo account.
  7. Click the Set up with Shippo button to start the setup process in the Shippo UI.

    Hostgator website builder integrated shipping set up with Shippo

  8. Enter the details needed to create a Shippo account and click the Sign up button to continue.

    Hostgator website builder Shippo account creation

  9. Provide your billing information and click Continue.

    Hostgator website builder shippo payment configuration

  10. Click the Allow Access button to add the shipping integration to your store.

    Hostgator website builder Shippo grant access screen

  11. Now that you have created an account with Shippo, you will want to select and set up the shipping carriers to use with your online store.
  12. Within your Shippo Account, click the Add carrier account button in the upper left-hand corner.

    Hostgator website builder Shippo configure shipping carriers add new

  13. You can Add New or enter an existing account (i.e. FedEx, UPS, or DHL).

    Hostgator website builder Shippo configure shipping carriers

  14. After adding carriers, you will navigate back to your Website Builder store dashboard to setup default package sizes.
  15. Enter a default package size that is most common for your products to fit within. You may opt to manually enter a box size or select a standard package size from the drop-down menu.

    Hostgator website builder Shippo set default package size

  16. Click Save.
  17. For the store to use the integrated shipping, you must provide the product weight.
    • How to add weight to products already within the store:
      • Click Products in the left-hand menu of the store dashboard.
      • Click on the name of the product to edit.
      • Go to the Advanced settings section and find the Weight.
      • Enter in the amount of weight for that product.

        Hostgator website builder add weight to existing product

      • Make sure to pay attention to the weight unit listed so that the entered amount is an accurate weight for the product.
      • Click Publish.
    • How to add weight when adding a new product:
      • See the directions above about adding a new product.
      • When adding the product information, go to the Advanced settings section and find the Weight.
      • Enter in the amount of weight for that product.

        Hostgator website builder add weight to existing product

      • Make sure to pay attention to the weight unit listed so that the entered amount is an accurate weight for the product.
      • Click Publish.

To add a new discount for your store:

  1. Navigate to your store dashboard using the directions above.
  2. Click Advanced Features in the left-hand menu.
  3. Click the toggle to activate Discounts for the store.
  4. When activated, you should see Discounts appear in the left-hand menu options of the store dashboard.

    Hostgator website builder create new discount

  5. Click Discounts on the left-hand side menu, then CREATE A DISCOUNT CODE button.

    Hostgator website builder create new discount

  6. On the next page, select the Coupon type.
  7. Pending upon your selection, you will then fill out the Price amount or Percentage amount.
  8. Then fill out the remaining fields for the coupon name, coupon code, and the duration that the code will be valid.

    Hostgator website builder configure new discount

    • Price or Discount Amount - Enter an amount that will be discounted from an order.
    • Active - Use the toggle to enable or disable if the code can be used.
    • Name - Enter a name for the discount code.
    • Code - Enter a unique code for the customer to enter in during checkout.
    • Valid from - Set a date that the discount will start working.
    • Valid to - Set a date for when the discount will stop working.
  9. Click Publish.

To manage discount codes:

  1. Navigate to your store dashboard using the directions above.
  2. Click Discounts on the left-hand side menu.
  3. From here you can see all of the discount codes that have been created. Using the eye icon that is found under the Active header column, you can toggle on and off the discount code.

    Hostgator website builder list of all discounts

    • Note: Clicking on the three vertical lines in the upper right-hand corner will display options for which columns are used to display details of the discount codes.

      Hostgator website builder edit columns to show information for discounts


To delete a discount code:

  1. Navigate to your store dashboard using the directions above.
  2. Click Discounts on the left-hand side menu. Then click the to the right of the code.
  3. Select Delete from the drop-down.

    Hostgator website builder list of discounts with option to delete discount

  4. Click Yes to confirm the deletion.

    Hostgator website builder confirmation to delete discount

To set up a new payment method:

  1. Navigate to your store dashboard using the directions above.
  2. Click Settings on the left-hand side menu.
  3. Find the section for Payment providers and click Edit.

    Hostgator website builder edit payment options

  4. On this page, you will have the option to set up your PayPal account, Stripe account, or Cash on Delivery to accept payments. Click the Activate button next to the payment provider to add that payment method to your store.

    Hostgator website builder list of payment options

To enable or disable global variants:

  1. Navigate to your store dashboard using the directions above.
  2. Click Advanced Features in the left-hand menu.
  3. Click the toggle to the right of Global Variants to activate or deactivate this advanced feature.
  4. When activated, Global Variants will appear in the menu.
  5. When deactivated, Global Variants will be removed from the left-hand menu in the store dashboard.

To add a new global variant:

  1. Navigate to your store dashboard using the directions above.
  2. If you do not see Global Variants listed in the left-hand menu, use the directions above to enable Global Variables.
  3. Click Global Variants on the left-hand side menu.
  4. Click the + button in the lower right-hand corner.
  5. Enter a Name for the global variant.
  6. Next, select the type of Variant type:
    • Size: Will provide a list type choice.
    • Color: Will provide a color picker with predefined colors or a color scale.
    • Other: Will provide a list type choice.
  7. Depending on the variant type selected, you will use the color picker to set the various colors or type in the name for each different choice of the product.
  8. Click Publish to save your changes and return to the global variant page.

    Hostgator website builder list of gloabl variants


To edit a global variant:

  1. Navigate to your store dashboard using the directions above.
  2. If you do not see Global Variants listed in the left-hand menu, use the directions above to enable Global Variables.
  3. Click the Global Variants on the left-hand side menu.
  4. Click on the name of the item you want to change.
  5. Make any changes to the variant, then click Publish to save your changes and return to the global variants page.