Configure a Single Product Layout

The single product layout feature allows a merchant to showcase all of the important information about a product. Using the single product layout allows a merchant to display the product name, product short description, price, thumbnail image, plus an add to cart button. The benefit of the Single Product Layout is that the merchant can generate one snippet of code an fully manage the attributes of the product from their merchant control panel. Continue reading to learn how to configure the Single Product Layout.

1. Navigate to the Add-A-Store section of your merchant control panel.
2. Click the Single Product Layout option.

1. Select whether you wish to create or modify a product layout.
   1. If you wish to create a Single Product Layout from the start, select the Layout Style option.
   2. If you wish to modify an existing Single Product Layout, select Update Single Product Layout Settings.
2. Select the desired layout, positioning the thumbnail above, to the left, or to the right of the product name, description and pricing.

1. On the next screen you will be presented with configuration options:
   1. Display Options – Options that will determine the background color and borders
      1. Display Borders – Determine if borders are or are not displayed around the product
      2. Layout Background Color – Select the background color in HEX or from the color palette
   2. Text Options – Customize the look of the fonts used in the product information
      1. Product Name
         1. Font Family – Choose the font style of the Product Name.
         2. Font Size – The Font Size in pixels (px), points (pt), Em (em), or percentage (%) of the Product Name.
         3. Font Style – Normal, Bold, Italic, Underlined, Strikethrough, Bold Italic, or Bold Underline of the Product Name.
         4. Font Color – The font color in HEX or can be selected from the color palette of the Product Name.
      2. Product Description
         1. Font Family – Choose the font style of the Product Description.
         2. Font Size – The Font Size in pixels (px), points (pt), Em (em), or percentage (%) of the Product Description.
         3. Font Style – Normal, Bold, Italic, Underlined, Strikethrough, Bold Italic, or Bold Underline of the Product Description.
         4. Font Color – The font color in HEX or can be selected from the color palette of the Product Description.
      3. Price
         1. Font Family – Choose the font style of the Product Description.
         2. Font Size – The Font Size in pixels (px), points (pt), Em (em), or percentage (%) of the Price.
         3. Font Style – Normal, Bold, Italic, Underlined, Strikethrough, Bold Italic, or Bold Underline of the Price.
         4. Font Color – The font color in HEX or can be selected from the color palette of the Price.
      4. Button Options
         1. Text on the link – The text being used in the button.
         2. Font Family – Choose the font style of the text in the button.
         3. Font Size – The Font Size in pixels (px), points (pt), Em (em), or percentage (%) of the button.
         4. Font Style – Choose whether to make the text Normal, Bold, Italic, Underlined, Strikethrough, Bold Italic, or Bold Underline in the button.
         5. Font Color – The font color in HEX or can be selected from the color palette of the text in the button.
         6. Background Color – The color of the button.
      5. Border Options:
         1. Display Borders: Display the black border or hide
         2. Rounder Corners: Display sharp corners or round them off.
      6. Button Alignment – Determine if the button is aligned right, left or center of the Product Layout

   

   1. View your configured button in the Preview screen at the right.
   2. Next click, “Continue” to save the button style.
   3. Search for the product by Product Name or Short Description.
   4. Click the Copy Code button next to the Product to save the needed HTML to your clipboard.

   

   1. Upon clicking the Copy Code button, you will be prompted when the copy was successful.
      1. You can also manually copy the code below in the dialogue box.
   2. The final step requires you to take the code to your website and place the HTML in the appropriate place on your existing website.