About the Design Editor

The Design Editor is where you will design the layout of your Product Recommendations assets in APSIS One.

Certain browser extensions may interfere with the Design Editor. In that case, disable your browser extensions and refresh the page.

Click on an item on the left navigation to jump to a specific part of the Product Recommendations Design Editor!

Editor8_02.jpg

 


 

About the Design Elements

The design elements are the foundation of your Product Recommendations asset.

They represent all the product information that is displayed in the assets you create with the Product Recommendations tool. In the Design Editor, you will pick and choose which ones to display as well as they general styling.

Similarly to the Email Editor, Product Recommendations' Design Editor opens up a panel in the right side where you can modify the styling of your elements once you click one on the left.

Continue reading to learn more about the general features of the Design Editor, or click on an item on the left navigation to jump to a section of this article!

Editor9.jpg

 

Read more about the general features of the Design Editor:

Click on an item below to expand.

Element Visibility

Adjust the visibility of an asset's element by clicking on the eye icon. This will hide or display the elements from your asset.

Editor3.jpg

 

Depending on whether you choose to display or hide a specific element, the canvas will be updated accordingly.

The Background, Image and Title elements cannot be hidden.

Editor4.jpg

 

Regular / On Sale

Click on the asset to switch between the regular and the sale version of your products.

When products are shown in your Product Recommendations asset, you get to choose a different styling for each of them.

If you wish to display only regular items or only sale items, make sure to set it up in the Filters step of Creating a Product Recommendation. Choose a category filter and select the filter that corresponds.

Editor8.jpg

 

 


 

Headline

The headline is only shown in those assets created for Web with the Product Recommendations tool.

Click Headline to see all the options available.

Element1_02.jpg

 

Click on an item below to expand: 

Headline Text

Click the headline to edit the headline text directly in the canvas.

Editor10_01.jpg

 

Headline Options

In Headline Options you can change the style of your Product Recommendation asset headline.

Headline1.jpg

 

Click on a tab below to read more:

SizeColourFontStyleAlignMargins

How to Change the Headline's Font Size

Slide the bar to adjust the size of your headline's text.

Headline2_02.jpg

 

 

 


 

Background 

Your Product Recommendations asset's container is fully customizable. 

Click Background to see all the options available.

Element2_02.jpg

 

Click on an item below to expand: 

Background Options

In Background Options you can change the size of the asset, the background colour and style the asset's border.

Back1.jpg

 

Click on a tab below to read more:

SizeBackgroundBorder

How to Change the Asset's Size

Under size, you can adjust your asset's width.

Drag the Width slider left or right to decrease or increase your asset's width.

Back2_02.jpg

 

 


 

Image

Customise the way the product image is displayed in your Product Recommendations asset.

Click Image to see all the options available.

 Element3_02.jpg

 

Click on an item below to expand:

Image Options

In Image Options you can adjust the width, height and margins of your product's image in your Product Recommendations Asset.

Make sure that your product images are of good quality and consistent in height and width to ensure optimal results.

Image1.jpg

 

Click on a tab below to read more:

SizeMargins

How to Change the Image's Size

Drag the Width and Height sliders left or right to adjust the image's size.

Image2_01.jpg

 

 


 

Title

Your Product Recommendations assets will display as a title what is captured as a product name.

Click Title to see all the options available. 

Element4_02.jpg 

 

Click on an item below to expand: 

Title Options

In Title Options you can change the style of your Product Recommendation asset product name.

Title1.jpg

 

Click on a tab below to read more:

SizeColourFontStyleAlignMargins

How to Change the Title's Font Size

Slide the bar to adjust the size of your title.

Headline2_02.jpg

 

 

 


 

Price

Customise the way the product price is displayed in your Product Recommendations asset.

Click Price to see all the options available.

Element5_02.jpg

 

Click on an item below to expand: 

Price Options

In Price Options you can customise the font, size, colour and style of your asset's price.

Price1.jpg

 

Click on a tab below to read more:

SizeColourFontStyle

How to Change the Size of the Asset's Price

Slide the bar to adjust the font size of your price.

Price2_02.jpg

 

 


 

Button

Customise the button in your Product Recommendations asset.

Click Button to see all the options available.

Element6_02.jpg

 

Click on an item below to expand: 

Button Text

Click the button to edit the button's text directly in the canvas.

You can customise the button text for regular products:

Button2.jpg

 

And have a different button text for your sale items:

Button3.jpg

 

Button Options

In Button Options you can style the button of your Product Recommendations asset to match your website.

Button1.jpg

 

Click on a tab below to read more:

Font Size & ColourFont StyleButtonBorderPlacement

How to Change the Button's Font Size and Colour

Slide the bar to adjust the font size of your button's text.

Price2_02.jpg

 

Click on the colour button to open the colour picker.

Headling6_02.jpg

 

Use the colour picker to choose the right colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer.

button14.jpg

 

 


 

 

Was this article helpful?