1. Knowledge Base
  2. >
  3. Edit Your Product Page

Edit Your Product Page

This content only applies to Gator Website Builder hosting plans which are accessible by going to app.gator.com.

For more articles, check out the HostGator Gator Website Builder category
or directly access the Gator Knowledge Base.

Setting up an online store is one awesome undertaking made simple by Gator and the tools available in your account. After you have added an eCommerce Store to your account, you can edit the design of the pages that display when someone clicks on a product.

In this article, we will learn how to access the store's Product Page as well as How to Change the Design and How to Use Element Settings.

Pro Tip: The most important thing to remember about your Product Page is that the products in your store will be inserted into this page when someone clicks on it. Changing this page will change the design for every product in your store to display with these settings.


Accessing the Product Page:

You can edit the design of your product page at any time by selecting Product Page within the Pages drop-down menu at the top of your main design dashboard. 
  1. Click the drop-down and select the Product Page beneath the Store Page.
    User-added image
  2. Once your Product Page loads, you will see Stock/Placeholder information that gives you an idea of how this page will display on your live site.
    User-added image

Section Settings and Changing Images:

  1. If you select the Change Style option from the Advanced Section menu, a detailed menu will appear that has all the same settings as any other element.
    User-added image
  2. In this area, you can change the Backgrounds, Colors, Animations, Position, and Size.
    User-added image
  3. To change the look of your overall page, select the Change Design option from the Section menu.
    User-added image
  4. A menu will appear on the left with some samples of the different page looks. Pro Tip: Scroll through them, selecting one at a time to see the page to the right-hand side change to display that selection's design elements.
    User-added image
  5. Once you land on a design you like, click Apply at the top right-hand corner to save this selection and continue.
    User-added image

Editing Product Page Elements:

  1. Begin on your site’s Product page.
    User-added image
  2. Use the Elements tab from the left to add any new elements you wish to add to this page. To read more about adding elements check out Design with Elements.
    User-added image
  3. In addition to adding Elements you can select specific pre-existing elements to see which ones you can and cannot edit. These options will vary depending on the design selected. Pro Tip: Some elements on the page cannot be edited because the information being shown is actually a part of the Product Details you added when you first uploaded the product. Keep an eye out for a pop-up message that says Product Field Element: This element cannot be edited... To edit the information that appears, navigate to the Manage Products and Orders page.
    User-added image
  4. You can then move Elements around the page or completely change the look as desired.
    User-added image
  5. Once you have made your changes click Save and Publish to make your changes live.
    User-added image