Create Your First Website Space & Website block

Website spaces are dynamic HTML / Liquid sections that you can drop anywhere in your Shopify store. For example, at the end of a Product Description, at the top of all Blog posts, or in the middle of your home page.

Website spaces will display Website blocks consisting of customized marketing content for your target audiences that you will design in Persona.

By including a Website space in your Persona campaigns, you can allow entire sections of your website to be edited on the fly so that they display a specific Website block depending on which of your audiences is viewing the page the website space has been embedded on!

Spaces can be put on any page of your Shopify store and pages can include more than one website space each with a unique assigned Website block.

Follow these steps to create your first Website Space and display a Website block in it.

Step 1 - Creating a Website Space

Go to Channels in the Relay Persona menu and click the Create New Website Space button on the upper right hand side.

This will open a menu where you can name your Website Space and copy the embed code you’ll need to add in your Shopify Theme.

Name your Website Space something memorable that reflects where you’ll place it - like Product Website space if you’ll be using it on a Product Page.

Step 2 - Embed Website space in your Shopify Theme

There are 2 methods available to embed a website space in your Shopify theme:

• To insert an extra section to your website, follow Method 1
• To have Persona replace an existing section of your website, follow Method 2.

Method 1 - Add the website space as a new section

In the Create Website Space panel, select "Type = Auto" and copy the HTML appearing under "Code".

Then, open your Shopify Theme editor in a different browser tab and place this code in a custom HTML section, or in a liquid composer. Refer to this article from Shopify for where and how to add the embed code to your theme: Add custom HTML or Liquid

• Select the type of page you’ll be embedding your Website space on from the top of the theme editor.
• Click Add Section from the menu on the left hand side and find the Custom Liquid section.
• Paste the code you copied into the Custom Liquid section.
• Drag the space to where you want your Website block content to appear.

Note: You won’t see any content in the Website space yet! Continue on to the next step to define the content that will appear.

In this demonstration video we create and name a Website space, copy the embed code then add it to a Custom Liquid section in a Shopify theme template.

Method 2 - Add the website space as a new section (advanced)

Alternatively, you can allow Persona to override any existing section of your website.

To do so, visit your website and use the inspect tool of your browser to locate the unique id matching the section that you want to replace.

For example in the screenshot below, the ID of the section is: shopify-section-template--16674781987057__1637990140cd15234a

Once located, copy the section unique ID of the element that you want to replace, and visit the Create Website Space panel in Persona. Select "Type = Manual CSS selector" and type "#" followed by the section ID that you just copied.

Note: Your section will not be replaced with any Persona content yet! Continue on to the next step to define the content that will appear.

Step 3 - Design a Website Block for your Website Space

Click on the Website Blocks Designs tab on the Channels dashboard then click the Create new Website Block Design button on the upper right hand side.

• Select Create From Scratch.
• Name your Website Block Design then open the Visual Editor.
• Design your Website Block content in then save your Website Block Design.

Step 4 - Add the Website Block to your Campaign

• Go to Workflows and select the campaign you want to add your new Website Space to by clicking "Editor" in this campaign's side panel.
• Inside of the campaign select Website Spaces at the top of the page.
• Click Add a Space and select the Website Space by name.
• Now that a website space is defined, click it to associate it with a website block.

As long as your Campaign is enabled, visitors existing in the segment associated with your campaign be able to view your Website block Space on any page the website space has been embedded in.

If you do not see it, reach out to our success team for help troubleshooting or review these instructions again.