Learn how to use the Designer Embed solution for your custom website
The new Designer can now be embedded into any page on your custom website! Follow these steps to learn how:
Step 1:Head to the Global Navigation Drawer and click on Designer Embeds.
Step 2:Click on the CREATE EMBED button.
Note: You can watch the "Designer Embed Overview" video on this page if you like!
Step 3: Give your Designer a name and click CREATE.
Step 4: After entering your Designer Name, you can then choose to enter the Domain name for your website, and click SAVE & PUBLISH. This isoptional.
Note: If you are entering a domain name in the "Domain" field, it may need to be filled out in a specific way depending on the custom website platform used. See below for special instructions:
Embedding on WordPress Sites
When embedding the Designer in a WordPress custom website, you should be able to simply enter your domain name in the "Domain" field normally, without the need for a special listing.
However, if you have embedded the Designer and it does not display in your WordPress page, please make sure to reach out to WordPress directly so they can troubleshoot this with you. When adding the embed code into the WordPress editor, certain code is being removed from the embed code when published on the site. There may be a special theme applied to your website, or some other component or functionality that is causing this, and the code will not display.
Step 5: Review all of the Designer Settings, and make sure to configure your Designer appropriately so it behaves the way you need it to on your site:
- Contact Info- Information customers will see and use to reach out to you.
- Branding- Upload a logo for your Designer, change the default button and accent colors in your Designer, and customize your Designer by uploading a custom CSS file.
- Display Settings- Choose what Blank Products, Designs, and Clip art are assigned. Choose how the Designer will display and function for your customers:
Add Art to the Designer in Bulk
Now you can add Design Ideas and Clipart to your Designer Embed in bulk! The new "ADD" feature will let you easily add artwork from another Designer and store, or another Designer Embed you already have. Watch the video below to learn more!
Finish Setting up the rest of the Designer Settings:
- Email Notifications- Choose who gets notified when orders are placed, shipped, or when customers contact you.
- Policies & Messaging- Set up your Designer policies and other messaging.
- Shipping Methods- Choose what shipping methods customers have available in your Designer.
- Pickup Methods- Choose what pickup options customers have available in your Designer.
- Checkout Settings- Set up the checkout experience for your shoppers.
- Custom Order Fields- Capture more information from the customer at the time of checkout if needed.
Step 6: Once you've gone through all of the settings, head back to the Domain Settings.
Step 7: Click COPY TO CLIPBOARD - the embed code for your configured Designer will be copied, and you can now paste the code on any of the webpages of your custom site!
Note: You can edit the embed code for your Designer to change the height if needed. For Desktop pages, the container you are embedding this into should have a pixel size greater or, equal to 1024 pixels. For mobile, it needs to be greater or, equal to 375 pixels.
Customers will now be able to decorate and checkout right from the Designer in your site! Please reach out to our Support team if you have any questions or need any help with your Designer Embed.
To exit the settings for your current Designer Embed, click the back arrow in the top-left corner of the page. You will see your first Designer Embed here:
Click on the 3-dot menu to continue working on that Designer Embed:
To create another Designer Embed, click the "+ EMBED" button in the top-right part of the page. This will let you configure a different Designer with different products, artwork and settings that you can embed on another website you may have: