MENU
HomeWebsite Personalizations

Website Personalizations

Summary

Growmatik’s Website personalization feature helps you show each visitor their own version of your website based on their stage, attributes and preferences.

How to access website personalizer

You can access the website personalizer tool by clicking on the Website Personalizations on the main navigation.

✍️ Note

Personalizer does not affect original web pages. Modifying the page content through the Website Personalizer tool does not affect the original content of the page. The personalizer creates a copy of the page in the Growmatik dashboard and applies your changes only to that instance.

Create a new personalization

1. In the Website Personalizations page click on the + New Personalization button and select a page you’d like to personalize, or enter its URL.
2. On the next page, choose the audience for the personalization. You may choose:

  • All visitors
  • Non-logged-in users
  • Logged-in users
  • Custom filter

Click on Start Editing. The page will open in a new tab and you can apply the modifications.
Once you applied the desired modifications, click on the Save and Close button.

Personalizing a web page

Using Growmatik personalization tool, you can add and remove new elements and edit and duplicate existing elements.

Selecting content on a web page

Hover over different elements on the page to see the pink border around them. To select an element, simply click on it. The selected element will appear as selected with a thicker pink border.

✍️ Note

The Website Personalizer follows the same wrapper structure as the original page. You may need to play around with the cursor to locate the wrapper that includes the element(s) you want to select.

Adding content to a web page

Select an element on the page and click on the plus icon to open the elements list, then select an element.

Removing content from a web page

To remove an item from the page, select the item and click on the trash icon.

Editing existing text on your website

In order to edit existing text on the page, first select it and then double-click on it. You can also directly double-click on the text to go to edit mode.

Once you are done editing the text, click on the checkmark icon to approve the edits or click the X icon to undo the changes.

✍️ Note

While in editing mode, you won’t be able to edit any items other than the selected item on the page. You need to approve or cancel your changes before editing other content on the page.

Editing content added by the Website Personalizer tool

To edit the content or customize the appearance of an added element, click on it to select it, then click on the gear icon to open the element’s settings panel. You can also double-click on an element to open its settings panel.

Duplicating content added by the Website Personalizer tool

To duplicate the content of an added Growmatik element, click on it to select it, then click on the duplicate icon. A copy of that element will appear below the selected element.

✍️ Note

Only elements that were added by Growmatik can be duplicated.

Elements in the Website Personalizer tool

The following elements are available to be added to your personalized page:

  • Text
  • Blog
  • Product
  • Button
  • Image
  • Video
  • Social

In order to customize the style of each Growmatik element, click on the element and select the gear icon to see the available options.

Text element

Text element allows you to insert texts to your personalized page. The following options are available for further customization:

  • Applying Bold or italic style on text
  • Editing font color
  • Inserting hyperlink to selected text
  • Changing the alignment of the text
  • Personalizing content with dynamic keywords. Dynamic keywords can be based on personalized details (i.e. first name), Shopping activity (i.e. total order value), referral (i.e. UTMs), miscellaneous (i.e. current year), and custom attributes.
✍️ Note

The miscellaneous > daytime dynamic keyword will be replaced with a text according to the time of day:

  • From 00:00 until 11:59, the text will be Good morning.
  • From 12:00 until 16:59, the text will be Good afternoon.
  • From 17:00 until 23:59, the text will be Good evening.
✍️ Note

The UTM dynamic keywords will extract the UTM contents of a URL when a user enters your site. The UTM data will then be available throughout the session. For example, when a user enters your site through the following URL: https://yoursite.com/?utm_source=google, the word google will be stored as the utm_source throughout that user’s session. This means that, if you insert the utm_source dynamic keyword in any page through the Website Personalizer tool, the tag will be replaced with the word google. Of course, the text replacement will only occur if the personalization is associated with Growmatik automations rule.

Blog element

Blog element allows you to display your blog posts in a personalized page. The following settings are available for further customization of the Blog element:

  • Content: selects the types of blog loops:
    • Recent shows the most recent blog posts.
    • Related shows related blog posts according to each user’s post visits.
    • Popular shows the most popular blog posts on your site.
    • Posts by ID shows related blog posts according to the blog’s IDs.
    • Category shows related blog posts according to the blog’s categories.
  • Quantity: to set the number of posts to display in the blog loop (up to 6).
  • Columns: defines the number of columns (up to 3).
  • Image: shows/hides the post’s image.
  • Button shows/hides the View Post button.
  • Title and Button sections customize the formatting and appearance of the title and View Post button.

Note: Related blog posts are dynamic content, meaning they appear differently for each individual user. Additionally, the content of this element appears as empty for users who have not visited any blog posts.

Product element

Product element allows you to display products in a personalized page. The following options are available for further customization of the Product element:

  • Filter: defines which products to display, you can select All Products, Product ID – Name, Category, Products in cart, Discounted products as well as following categories:
    • Customer’s past orders: based on most recent and frequent orders.
    • Related: based on products in page, visited products, cart, all past orders, and the last order.
    • Cross-sells (Linked Products): based on products in product page, cart, previously visited, and the last order.
    • Upsell: based on products in product page, cart, previously visited, and the last order.
  • Fallback filter: Define alternate products in case the first filter doesn’t return any result.
  • Sort: display products based on particular orders based on the most popular, price, and newest products.
  • Quantity: sets the number of products to display in the product loop (up to 6).
  • Columns: defines the number of columns (up to 3).
  • Image, Description, Price show/hide the image, description and price of products.

Title, Description, Price, Button sections customize the formatting and appearance of the title, description, price and View Product button.

Button element

Button element allows you to insert a button with a custom link on your pages. You can change the label, font and style of the button as well as the style of them while hovering a mouse.

Image element

Image element allows you to add an image to your pages. Click on the gear icon and click Replace Image button to select an image from the media library.

Video element

Video element allows you to insert a video from YouTube or Vimeo on your page. Click on the gear icon and enter the video URL in its input and click on the Add button to insert the video.

Social element

Social element allows you to display social icons and link them to your social accounts on your personalized page.

Preview your personalization

Once you’ve finished your website content customization, click on the Preview button to check your page.

Saving your personalization

Once you’re done with your personalization, click on the Save and Close button, which will take you back to the created personalization.

Publish personalization

Once you created your personalization, you can click on the Publish Changes button to make the personalization live on your website.

Edit personalization

To edit an existing personalized page click on the Website Personalizations page from the sidebar, then click on the three-dot menu of the desired personalization, and select Edit. On the opened page, click on Start Editing.

Duplicate and remove personalization

To duplicate or remove an existing personalization, from the Website Personalizations page, click on the three-dot menu of the desired personalization, then select Duplicate or Remove.

Was this article helpful?YesNo