Styling the Product Page

Tutorial

You can customize the style of your product page to match your site. You can change the layout, colors, spacing and many more settings from the Style Product Page pop-up window.

To style the product page:

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

3. The Style Product Page window will open. From the Style Product Page, you can change the Layout, Image mode, add Social icons, customize the Ribbon and change the spacing of the product page elements.

4. From Style Product Page, you can also choose to show a confirmation message when a product is added to cart. You can customize the confirmation message by clicking Style Confirmation Message and changing the settings from the pop-up window. For detailed instructions on these settings, please see this tutorial.

5. You can customize individual elements on your product pages by clicking on an element and from the customization window that opens, choose your style options.

Each element that you click will have different customization options. To learn how to add product options, click here

  • Clicking the image of your product or your sales ribbon will open a Change Style window. 
  • Clicking text will open a Customize Fonts window. From the top of Customize Fonts, you can check the box next to Override text styles to choose a color and format for your text that is different from the text on the rest of your site.
  • Clicking the Add to Cart button will open an Advanced Styles window.

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

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

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