• Overview

    Two elements make up the Online Store: the Product Gallery and the Shopping Cart. In addition, you can add a View Cart button to the pages of your site so that your buyers can see the total price of their items or the number of items in their cart. You can customize each element separately as well as the pieces that make up each element (i.e. click on an image in the product gallery to customize the images or click on the text to customize the text) and create a look and feel for your store that caters to your specific needs.

  • Customizing Your Product Gallery Settings

    To update your product gallery settings:

    1. Click a product gallery.
    2. From the pop-up, click Settings.

    3. Under Choose Layout, click a layout option to select it.
    4. Customize the Alignment, Rows, Columns, Margins, Image mode and Ribbon style of your Product Gallery.
    5. Click Style Product Page to customize the product page.

    Each product gallery layout has a different set of customization options.

    Your product gallery changes.

  • Customizing Your Product Gallery Style

    To customize your product gallery style:

    1. Click a product gallery.
    2. From the pop-up, click Gallery Style.

    3. Under Change Skin, click a skin.
    4. Under the Change Skin section, customize the skin. Click OK.

    Your product gallery's style changes.

  • Customizing Your Product Image Style

    To customize your product image style:

    1. Click an image in the product gallery.
    2. From the pop-up, click Image Style.

    3. From Change Style, click a style.
    4. Click Edit Style to customize the style.
    5. From Advanced Style, under Change Skin, click a skin.
    6. Under the Change Skin section, customize the skin. Click OK.

    The style of your product images changes.

  • Customizing Your Product Gallery Text Style

    To customize your product gallery text style:

    1. Click a textual element in the product gallery.
    2. From the pop-up, click Customize Fonts.
    3. Click a font style.

    Click Customize next to the font style for further customization options.

    The textual style of your product gallery changes.

  • Customizing Your Shopping Cart Style

    To customize your shopping cart style:

    1. Click your shopping cart.
    2. From the pop-up, click Settings.
    3. Click Preview Shopping Cart.
    4. Under Buyers checkout, select in the same window or in a popup window from the drop-down menu to set how the payment page will open for your buyers.
    5. Customize your cart's spacing, texts, alignment and margin.
    6. Click an element of your shopping cart.
    7. From the pop-up, click Customize Fonts, List Style or Box Style to customize the element.

    Your shopping cart's style changes.

  • Customizing Your View Cart Settings

    To update your view cart settings:

    1. Click your view cart button.
    2. From the pop-up, click Settings.
    3. From View Cart, under Select Total, click the drop-down menu to set the number that the view cart button should show: Total Items or Total Price.
    4. Under View Cart Text, edit your view cart button text in the field.
    5. Under Text Alignment, click left, center or right alignment to set how the button text will appear within the view cart button.
    6. Under Margins, drag the handle to set the spacing between the text and the button border.


     

    Your view cart button settings change.

  • Customizing Your View Cart Button Style

    To customize your view cart button style:

    1. Click your view cart button.
    2. From the pop-up, click Button Style.

    3. From Change Style, click a style.
    4. Click Edit Style to customize the style.
    5. From Advanced Style, under Change Skin, click a skin.
    6. Under the Change Skin section, customize the skin. Click OK.

    The style of your view cart button changes.

  • Styling the Product Page

    You can change the style of your product page by clicking the product gallery and then clicking Style Product Page.

    To design the product page:

    1. Click the product gallery to select it.
    2. From the pop-up that opens, click Style Product Page.

    3. From the Product Page that opens, click an element on the product page.

    Each element that you click will have different customization options. Clicking the image of your product or your sales ribbon will open a Change Style window. Clicking text will open a Customize Fonts window and clicking the Add to Cart button will open an Advanced Styles window.

    4. From the customization window that opens, update your style options.

    From the top of Customize Fonts, you can check the box next to Override text style color to choose a color for your text that is separate from the colors of the text on the rest of your site.

    From Style Product Page, click the left or right arrows to scroll through your products. Changes that you make to elements within your product page will affect all of the product pages throughout all of the product galleries in your site, however, some elements may only be visible in certain product pages. For example, if you have added a Ribbon to only one of your products, you will have to scroll to that product's page to customize the Ribbon.

    5. From Style Product Page, change your Image mode, add social icons and change the spacing and position of the different product page elements.

    6. From the top right of Style Product Page, click the X to exit the Product Page settings and go back to your normal Editor.

    Your product page is updated.

    Changes that you make to one product gallery will affect all of the product galleries on your site.

    From Style Product Page, click the left or right arrows to scroll through your products. Changes that you make to elements within your product page will affect all of the product pages throughout all of the product galleries in your site, however, some elements may only be visible in certain product pages. For example, if you have added a Ribbon to only one of your products, you will have to scroll to that product's page to customize the Ribbon.