Getting Started:
You can include dynamic, up-to-date Digi product content with just one script and a div tag.
JS
Include this script at the bottom of your page. You only need to include the script once even if you're displaying multiple Digi Shadows on one page.
XML
The script above allows us to parse and format our central data.xml document, allowing us to use the data-format attributes to embed a pre-defined block of content.
HTML
The syntax for the Digi Shadow is simple. Use one of the predefined classes to determine the product you want to display. The data-format attribute will define the layout or type of information shown in your Digi Shadow. Use one of the predefined Data-Formats to select the contents of your Digi Shadow.
class value = determines the product we're showing
data-format value =determines the content and layout (see examples)
CSS
By default, the Digi Shadow will inherit your page's body styles, including fonts and text color. The Digi Shadows also include predefined 'parts' that allow you to style elements to fit your website's style. Check the list of parts to define your own styles or review the Digi Shadow with developer tools to see the parts yourself
<style>
#digi-core::part(product-name) { color: #94391d; font-family: 'TheMix'; font-size: 1.25rem; }
</style>
Reference
Product Embed Classes
- digi-EX50
- digi-EX12
- digi-IX10
Data-Format Values
- digi_ContactInfo
- digi_ProductName
- digi_MarketingName
- digi_ProductDescription
- digi_Gallery
- digi_Image_Hero
- digi_Image_Hero2
- digi_Image_Front
- digi_Image_Back
- digi_Image_Left
- digi_Image_Right
- digi_PartNumbers
- digi_Card
- digi_FeaturesList
- digi_FullDescription
- digi_SpecsTable
Shadow Parts for Styling
Use these Shadow Parts to target elements via CSS:
- ::part(product-container)
- ::part(product-image)
- ::part(product-content)
- ::part(product-name)
- ::part(product-description)
- ::part(features)
- ::part(overview)
- ::part(specs-table)
Layout Demos
digi_MarketingName
digi_Card
digi_Featureslist
Full Description Layout
Specs Table
All shadow DOM objects offer limited styling options with the use of the ::part() CSS selector. This allows hosting pages to target a specific element within the embedded shadowDOM object and customize it to fit the website's branding.