1. Knowledge Base
  2. >
  3. Design Tools
  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 Billing Portal.
  2. Click the Hosting tab, select the hosting package your domain is installed on from the dropdown menu, then click the Website Builder.

    Hostgator top menu bar with hosting, hosting account, and website builder

  3. From the editor page, click the Edit Website button.
  4. From the left-hand menu, click Store and then select CREATE A STORE.

    Steps to create store within the Hostgator website builder

  5. The new store dashboard will load and state, "Welcome, let's get building!"

    Hostgator website builder store bashboard welcoming installation page

  6. 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 Billing Portal.
  2. Click the Hosting tab, select the hosting package your domain is installed on from the dropdown menu, then click the Website Builder:

    Hostgator top menu bar with hosting, hosting account, and website builder

  3. From the editor page, click the Edit Website button.
  4. Click Store from the left-hand side menu.

    Hostgator website builder side menu

  5. Click MANAGE PRODUCTS AND ORDERS.

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

  6. 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 Add your first product 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 or services and click Next.

      Hostgator website builder store adding first product type

    • Add your product information.

      Hostgator website builder store adding first product description

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

      Hostgator website builder store adding first product picture

    • Next, you will see an overview of the product or service you just added. Click All Set to return to the store dashboard and configure the store settings.
    • Follow the instructions in the "Manage Products" section for adding additional products or services to the store.
  4. Click Review store settings button in step 2 to configure the information and settings for the store.

    Hostgator website builder store dashboard review store settings

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

      Hostgator website builder store settings review of business address

    • 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.
    • To see all the payment providers and other payment methods, click Edit payment provider.

      Hostgator website builder store setting review payment method

    • Select ACTIVATE or Edit to modify the payment providers for the store.

      Hostgator website builder store payment method options

    • Click Sounds good to continue to the next question.
    • The store will automatically calculate and charge taxes. If you want to change or review the tax settings, click Edit tax settings. If not, click Sounds good.

      Hostgator website builder store settings for taxes

    • It will redirect you back to the Store dashboard with the message, "Congratulations, you did it!"

      Hostgator website builder store dashboard after settings configured

    • You can continue to add additional products by clicking Products in the sidebar, click GO TO EDITOR AND PUBLISH to make the store live on your website, or click BACK TO EDITOR to return to the main website builder 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 a product 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.
    • Name: Set a name for the product
    • Description: Enter a description of the product.
    • Price: The price to charge for the item.
    • 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.
    • 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.)
    • Taxable: Toggle tax calculation for the product.
    • Shippable: Toggle shipping options for the product.
    • Track Stock: Use this toggle to set how much inventory you have to sell.
    • Weight: Enter the product weight to configure shipping costs.
  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 ADD. 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 Save and Publish Changes 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 manage categories


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 SAVE AND PUBLISH CHANGES 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

    Hostgator website builder set default package with preset standard sizes

  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 SAVE AND PUBLISH CHANGES.
    • 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 new product

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

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.
  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.

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 SAVE AND PUBLISH CHANGES 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 SAVE AND PUBLISH CHANGES to save your changes and return to the global variants page.