Overview
Treez Ecommerce is built using Prismic, a headless content management system (CMS) that enables us to offer retailers nearly limitless customization options for their website. Learn how Prismic enables you to easily create, edit, and publish content for your website:
Intro to Content Management Lingo for Treez Ecommerce & Prismic
Whether you're new to Treez Ecomm, to the Prismic CMS, or to website content management in general, here is an overview of key terms used when talking about content management for your website:
Content management system (CMS) — Software that helps users create, manage, and modify content on a website without the need for technical knowledge. A CMS lets you build a website without needing to write code from scratch (or even know how to code at all).
Prismic — The headless CMS that serves as the UI foundation for every Treez Ecommerce website.
Document — The various components of your site as built in Prismic. Includes Pages, Modules, and Theme.
Type — A document's category (e.g. Category, Blog, etc.)
Page — A webpage
Module — A section of content that populates to one or more webpages
Theme — The Prismic document in which styling such as colors, fonts, and backgrounds are managed for your entire website
Slices — Content blocks
Slice variations/variants — Specific styles of a slice that change its appearance without impacting function
Customization Options in Treez Ecommerce
Using Prismic, Treez Ecommerce customers can create, manage, and modify virtually every visible component of their website, including:
Page layouts
Website copy
Promotional banners
Alert banners
Menu navigation
Header & footer
Logo
Other images
Additional styling customizations are available to tailor the branding, look, and feel of each website. These options include brand colors, fonts, background colors, and more, which are configured using CSS in the Theme document in Prismic.
💡 Pro Tip: We are more than happy to make changes to your website's theme for you upon request. Contact us by chat or at [email protected] for assistance!
How to Edit a Page
Getting Started & Publishing Changes
All page edits start and end with the below steps:
Navigate to your Prismic instance and find the page document that you want to edit
Click on the page line item to open the page editor
From there, proceed with the edit(s) you want to make, referring to the instructions below for each type of edit
When you're done editing, click Save in the upper right corner
When you're ready to publish the changes to your website, click Publish
Note: Changes will remain unpublished and in draft mode until you click Publish. Drafts can be saved and edited further later prior to publishing, as needed.
Add a New Content Block
When you want to add a new content block to a given page, add a slice:
Open the page you wish to edit in Prismic
In the left sidebar, find where in the page you wish to add a new content block. Click on the "+" icon in that space to open the slice selector.
In the slice selector, find the slice type you want to add. You can do this most quickly by scrolling through the list in the lefthand sidebar
Once you've chosen your desired slice type, select the variant you wish to use. Click on it to add it to the page. (Note: Not all slice types have multiple variants.)
Configure your selected slice as desired.
When you're finished, proceed with saving and publishing as desired (see Getting Started & Publishing Changes above for more detail.)
Change an Existing Content Block
Open the page you wish to edit in Prismic
In the left sidebar, find the content block (aka slice) you wish to edit. Click the "..." button next to its name, then select Change Variation to open the slice selector.
If you want to choose a different variant of the same slice type, choose from the options shown when the slice selector opens. If you want to change to a different slice type altogether, find the slice type you want to add. You can do this most quickly by scrolling through the list in the lefthand sidebar.
Once you've chosen your desired slice type, select the variant you wish to use. Click on it to add it to the page. (Note: Not all slice types have multiple variants.)
Configure your selected slice variant as desired.
When you're finished, proceed with saving and publishing as desired (see Getting Started & Publishing Changes above for more detail.)
Store-Level Customizations for Multi-Store Operators
Treez Ecommerce allows MSOs to tailor certain customizations specific to individual stores, allowing multi-store retailers to display unique content for each store location.
Homepage Hero Banners
Showcase unique assets tailored to each location. If you manage multiple dispensaries with distinct products, promotions, or events, Hero slices allow you to highlight these offerings effectively.
How to Set Up Location-Specific Hero Banners
Log into Prismic
Navigate to your Homepage document in Prismic.Select a Hero Slice
Choose either the 'Banner' or 'Carousel' variation that aligns with your brand.Add a Repeatable Zone
Once the slice is added, configure the general settings.
Add a Repeatable Zone, where you’ll upload your assets.
Configure the 'Location Slug'
Within each Repeatable Zone, locate the 'location slug' field.
To find the location slug:
Go to the "Location" page in Prismic.
Copy the Location UID (e.g., cali-collective-demo).
Assign Location Slugs and Assets
Return to your Homepage document in Prismic.
Add the ‘Location Slug’ to the Repeatable Zone you created.
Continue to upload assets and assign a corresponding location slug for each location.
REQUIRED: Set a Default Hero Banner for Non-Location Visitors
Create a default hero banner for visitors who haven’t selected a location yet.
Add assets that are general to your brand (not location-specific) in the Repeatable Zone.
Leave the 'Location Slug' field blank for these assets.
Important Note: If a default hero banner is not created, visitors who have not selected a location will see a blank hero banner on your website. To provide a seamless customer experience, always ensure a default banner is in place as a fallback.
Location Specific Alert Banners
How to Set Up Location-Specific Alert Banners
Log into Prismic and navigate to your Alert Banner document. Click to open the document editor.
Click +Add Item in “location”
Populate the ‘Location Slug’
Populate the ‘Message’ with the message you want to display on the Alert banner for the location.
Toggle the banner to Active
Optional Settings
Configure ‘Day’ to display unique messaging on certain days of the week
Configure ‘Start Date’ & ‘End Date’ to display messaging for a certain time window.
Configure ‘CTA’ to make the banner a clickable link
Repeat this process for each unique location or unique messaging scenario you want to display to your customers.