You can easily add Maker to any eCommerce page with our embeds. There are currently two kinds of embeds - a story embed (ideal for PDPs, landing pages, etc) or a grid embed (a collection of Maker stories, ideal for a UGC campaign).
In this guide, we will go over how to add story embeds to Peak Design PDPs in two simply steps:
Copy the embed code for a story
Paste that code to the desired container on peakdesign.com PDPs.
You can find and customize a single story embed code easily from two places in Maker - the Maker Editor and Stories Manager.
1. 1 Copy Embed Code from the Editor (for published stories only)
If you want to copy the embed code of an already published story, you can do it right from the Maker Story Editor:
Click on the Share button
(OPTIONAL) Select Options to configure exactly what will appear on your page from your Maker story
Select Copy Embed Code once you're done configuring your embed
View Images 1-3 above to see how to copy a Maker Story embed code for a published story.
1. 2 Copy Embed Code from the Stories Manager(for draft and published stories)
Draft Story Embed Code
If your team has a workflow where you'd like to see a work-in-progress story on your page first before pushing the Post button on Maker, you should embed a draft story.
With the Stories Manager, you have the added benefit of copying the embed code of a draft story.
With this draft story code, you can easily try out any work-in-progress story on your page without your customers seeing it (but do remember that you must be logged in to Maker and have edit privileges to see it on your site).
The best part is when you're ready to publish the story, you don't have to change the embed code and the story will appear immediately on your site when you post it.
To copy the embed code of a draft or an already published story, you can do it from the Maker Stories Manager using these easy steps:
Select a Story you'd like to embed and click on More in the right-hand panel.
(OPTIONAL) Select Options to configure exactly what will appear on your page from your story.
Select Copy Embed Code once you're done configuring your embed.
View Images1-3 above to see how to copy a Maker Story embed code for a published story.
2. Adding Maker Embed Code to your CMS
Once you're done copying the Embed Code from one of the two places, now it's time to add it to your PDP or landing page on your CMS.
Decide which content container on your page you'd like to enhance with the Maker Story, e.g. on your PDP's, the product details / description container.
Pastethe Maker embed code and Savethe edited PDP page.
Here's an example of adding the embed code to a Magento PDP description container.
Note:During the pilot you'll be adding Maker content to only a specific number of pages. Once we move to a site-wide implementation, we'll provide you details on adding a one-time, generic Maker CMS embed code to your master page template(s).
Done! Test Drive Time
Once you've pasted the embed code - go to your PDP, category or landing page to check it out. Here's an example of a before and after page of how it will look:
You should now see the Maker Story on your PDP!
Inline editing: If you're logged into Maker and have edit privileges to a story, you will see an Edit Story button right in the story embed, like this:
The Maker Story Editor will pop-up there on your site with all the great features you know and love on Maker. Edit away and close the modal to see the changes take place instantly!
As always, if you have any issues or questions during the implementation process, please do not hesitate to contact us at [email protected]