Register

Edit style settings of a product item

Avatar
Moosend Support Team

One of the ways you can customize and change the look of your product item is by adjusting the style settings. You can use available styling options to style titles, descriptions, prices, and buttons as you want them to appear in your newsletter. This section provides procedures to edit the following : 

A. Change the Title styles 

To change the title style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Title Styles drop-down menu to display the style settings. You can set the following:
    • Padding: enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Font Color: select a font color for your product title.
    • Font Family: select a font for your product title.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your product title.
    • Alignment: select Center, Left, or Right alignment for the product title.

B. Change the Description styles 

To change the description style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Description Styles drop-down menu to display the style settings. You can set the following:
    • Padding: enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Font Color: select a font color for your product description.
    • Font Family: select a font for your product description.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your product description.
    • Alignment: select Center, Left, or Right alignment for the product description.

C. Change the Price styles 

To change the price style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Price Styles drop-down menu to display the style settings. You can set the following:
    • Padding: enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Font Color: select a font color for your product price.
    • Font Family: select a font for your product price.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your product price.
    • Alignment: select Center, Left, or Right alignment for the product price.

 

D. Change the Old Price styles 

To change the old price style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Old Price Styles drop-down menu to display the style settings. You can set the following:
    • Padding: enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Font Color: select a font color for your old product price.
    • Font Family: select a font for your old product price.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your old product price.
    • Alignment: select Center, Left, or Right alignment for the old product price.

E. Change the Code / SKU styles 

To change the code/SKU style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Code / SKU Styles drop-down menu to display the style settings. You can set the following:
    • Padding: enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Font Color: select a font color for your code/SKU style.
    • Font Family: select a font for your code/SKU style.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your code/SKU style.
    • Alignment: select Center, Left, or Right alignment for the code/SKU style.

F. Change the Button styles 

To change the button style:

  1. In the editing area, click the product item to display the Product settings in the editor’s right pane.
  2. Scroll down and click the Button Styles drop-down menu to display the style settings. You can set the following:
    • Button Color: select a button color from the color palette.
    • Label Color: select a button label color from the color palette.
    • Border Color: select a button border color from the color palette.
    • Font Family: select a font for your button's label.
    • Font Size: enter the size or use the up and down arrows to edit the font size for your button's label.
    • Decorations: select whether your button's label is in Italics, Bold, or Underlined (or all three).
    • Alignment: select Left, Middle, or Right alignment for the button.
    • Button Width: select Fit to Text, Full Width, or Custom for the button width. When you select Custom, you can enter values for Button Width and Button Height.
      Note:       If you selected Full Width, the button spans the entire width of the product field. If you selected Fit to Text, the button width changes according to the text.
    • Padding: click the lock icon to display these options: Padding Top, Padding Bottom, Padding Left and Padding Right, then enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
    • Margin: If you selected Full Width, enter the margin or use the up and down arrows to edit how far 'in' (with regard to the product's code) you want your button to start. 
    • Border Width: enter the width or use the up and down arrows to edit the button's border width.
    • Corner Radius: enter the radius or use the up and down arrows to edit the button shape between a rectangle and a circle.