<!DOCTYPE html>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" lang="en-us" xml:lang="en-us" class="_Skins_HTML5___Top_Navigation" data-mc-search-type="Stem" data-mc-help-system-file-name="Default.xml" data-mc-path-to-help-system="../../" data-mc-has-content-body="True" data-mc-conditions="Spryker.B2B" data-mc-target-type="WebHelp2" data-mc-runtime-file-type="Topic;Default" data-mc-preload-images="false" data-mc-in-preview-mode="false" data-mc-toc-path="User Guides|Administration Interface Guide|Products">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="msapplication-config" content="../../Skins/Favicons/browserconfig.xml" />
<meta name="description" content="This guide provides a set of instructions for shop administrators on how to create and manage products throughout their online shop in Admin UI." />
<link rel="apple-touch-icon" sizes="180x180" href="../../Skins/Favicons/apple-touch-icon.png" />
<link rel="shortcut icon" href="../../Skins/Favicons/favicon-32x32.png" />
<link rel="icon" sizes="96x96" href="../../Skins/Favicons/favicon-96x96.png" />
<link rel="icon" sizes="32x32" href="../../Skins/Favicons/favicon-32x32.png" />
<link rel="icon" sizes="16x16" href="../../Skins/Favicons/favicon-16x16.png" />
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" /><title>Products | Spryker</title>
<!-- Google Tag Manager -->
<script>/* <![CDATA[ */(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NP24S2');/* ]]> */</script>
<!-- End Google Tag Manager -->
<script>/* <![CDATA[ */
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://www.googletagmanager.com/gtag/js?id==UA-56589105-4";
document.getElementsByTagName('head').item(0).appendChild(s);
/* ]]> */</script>
<script>/* <![CDATA[ */
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-56589105-4');
/* ]]> */</script>
<link href="../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Tablet.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Mobile.css" rel="stylesheet" />
<link href="../../Skins/Fluid/stylesheets/foundation.6.2.3.css" rel="stylesheet" />
<link href="../../Skins/Fluid/stylesheets/styles.css" rel="stylesheet" />
<link href="../../Skins/Fluid/stylesheets/tablet.css" rel="stylesheet" />
<link href="../../Skins/Fluid/stylesheets/mobile.css" rel="stylesheet" />
<link href="../../resources/stylesheets/perfect-scrollbar.css" rel="stylesheet" />
<link href="../../resources/stylesheets/prism.css" rel="stylesheet" />
<style>/*<meta />*/
.button.previous-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-previous.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}
.button.next-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-next.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}
.button.print-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/printer.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}
.button.expand-all-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/expand.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}
.button.collapse-all-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/collapse.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}
.needs-pie
{
behavior: url('../../resources/scripts/PIE-no-motw.htc');
}
</style>
<link href="../../resources/stylesheets/mainstyles.css" rel="stylesheet" />
<link href="../../resources/tablestyles/patternedrows2.css" rel="stylesheet" />
<script src="../../resources/scripts/custom.modernizr.js">
</script>
<script src="../../resources/scripts/jquery.min.js">
</script>
<script src="../../resources/scripts/require.min.js">
</script>
<script src="../../resources/scripts/require.config.js">
</script>
<script src="../../resources/scripts/foundation.6.2.3_custom.js">
</script>
<script src="../../resources/scripts/plugins.min.js">
</script>
<script src="../../resources/scripts/MadCapAll.js">
</script>
</head>
<body>
<div class="foundation-wrap off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper="">
<aside class="off-canvas position-right" id="offCanvas" data-off-canvas="" data-position="right" data-mc-ignore="true">
<ul class="off-canvas-drilldown vertical menu off-canvas-list" data-drilldown="" data-mc-back-link="Back" data-mc-css-tree-node-expanded="is-drilldown-submenu-parent" data-mc-css-tree-node-collapsed="is-drilldown-submenu-parent" data-mc-css-sub-menu="vertical menu slide-in-right is-drilldown-submenu" data-mc-include-indicator="False" data-mc-include-icon="False" data-mc-include-parent-link="True" data-mc-include-back="True" data-mc-defer-expand-event="True" data-mc-expand-event="click.zf.drilldown" data-mc-toc="True">
</ul>
</aside>
<div class="off-canvas-content inner-wrap" data-off-canvas-content="">
<div data-sticky-container="" class="title-bar-container">
<nav class="title-bar tab-bar sticky" data-sticky="" data-options="marginTop:0" style="width:100%" data-sticky-on="small" data-mc-ignore="true">
<div class="middle title-bar-section outer-row clearfix">
<div class="menu-icon-container relative clearfix">
<button class="menu-icon" data-toggle="offCanvas"><span></span>
</button>
</div>
</div>
<div class="title-bar-layout outer-row">
<div class="logo-wrapper"><a class="logo" href="../../home.htm" alt="Logo"></a>
</div>
<div class="navigation-wrapper nocontent">
<ul class="navigation clearfix" data-mc-css-tree-node-has-children="has-children" data-mc-css-sub-menu="sub-menu" data-mc-expand-event="mouseenter" data-mc-top-nav-menu="True" data-mc-max-depth="3" data-mc-include-icon="False" data-mc-include-indicator="False" data-mc-include-children="True" data-mc-include-siblings="True" data-mc-include-parent="True" data-mc-toc="True">
<li class="placeholder" style="visibility:hidden"><a>placeholder</a>
</li>
</ul>
</div>
<div class="nav-search-wrapper">
<div class="nav-search row">
<form class="search" action="#">
<div class="search-bar search-bar-container needs-pie">
<input class="search-field needs-pie" type="search" placeholder="Search the Academy" />
<div class="search-filter-wrapper">
<div class="search-filter">
<div class="search-filter-content">
<ul>
<li>All Files</li>
</ul>
</div>
</div>
</div>
<div class="search-submit-wrapper" dir="ltr">
<div class="search-submit" title="Search">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</div>
<section class="main-section">
<div class="row outer-row sidenav-layout">
<div class="sidenav-wrapper">
<div class="sidenav-container">
<ul class="off-canvas-accordion vertical menu sidenav" data-accordion-menu="" data-mc-css-tree-node-expanded="is-accordion-submenu-parent" data-mc-css-tree-node-collapsed="is-accordion-submenu-parent" data-mc-css-sub-menu="vertical menu accordion-menu is-accordion-submenu nested" data-mc-include-indicator="False" data-mc-include-icon="False" data-mc-include-parent-link="False" data-mc-include-back="False" data-mc-defer-expand-event="True" data-mc-expand-event="click.zf.accordionMenu" data-mc-toc="True" data-mc-side-nav-menu="True">
</ul>
</div>
</div>
<div class="body-container" data-mc-content-body="True">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NP24S2" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="search-container">
<form class="search" action="#">
<div class="search-bar search-bar-container needs-pie _Skins_SearchTopics mc-component">
<input class="search-field needs-pie" type="search" placeholder="Search" />
<div class="search-filter-wrapper">
<div class="search-filter">
<div class="search-filter-content">
<ul>
<li>All Files</li>
</ul>
</div>
</div>
</div>
<div class="search-submit-wrapper" dir="ltr">
<div class="search-submit" title="Search">
</div>
</div>
</div>
</form>
</div>
<div class="row collapse">
<div class="top-bar">
<div class="breadcrumbs-block">
<div class="nocontent">
<div class="MCBreadcrumbsBox_0 breadcrumbs" data-mc-breadcrumbs-divider=" > " data-mc-breadcrumbs-count="3" data-mc-toc="True"><span class="MCBreadcrumbsPrefix">You are here: </span>
</div>
</div>
</div>
<div>
</div>
<form class="search" action="#">
<div class="search-bar search-bar-container needs-pie _Skins_SearchHome mc-component">
<input class="search-field needs-pie" type="search" placeholder="Search" />
<div class="search-filter-wrapper">
<div class="search-filter">
<div class="search-filter-content">
<ul>
<li>All Files</li>
</ul>
</div>
</div>
</div>
<div class="search-submit-wrapper" dir="ltr">
<div class="search-submit" title="Search">
</div>
</div>
</div>
</form>
</div>
<div class="topic-layout">
<div>
<div class="side-menu">
<div data-sticky-container="" id="b0kRDefZnUG8kjSYYyj83w">
<div class="sticky sticky-menu" style="width:100%" data-sticky="" data-top-anchor="b0kRDefZnUG8kjSYYyj83w:top" data-bottom-anchor="contentBody:bottom" data-sticky-on="small" data-scroll-container-on="small">
<ul class="nocontent menu _Skins_SideMenu mc-component" data-mc-is-context-sensitive="True" data-mc-linked-toc="Data/Tocs/master.js" data-mc-side-menu="True" data-mc-max-depth="1" data-mc-include-icon="False" data-mc-include-indicator="False" data-mc-include-children="True" data-mc-include-siblings="True" data-mc-include-parent="True" data-mc-toc="True">
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="side-menu">
<div class="toolbar-wrapper">
<div class="widget-github js-widget-github"><a class="widget-github-link js-widget-github-link" href="https://github.com/spryker/spryker-documentation" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M13.5 0C6.057 0 0 6.057 0 13.5c0 5.888 3.791 10.905 9.058 12.745a.463.463 0 0 0 .258.088c1.316.43 2.724.667 4.184.667C20.943 27 27 20.943 27 13.5S20.943 0 13.5 0zm0 .931c6.93 0 12.569 5.639 12.569 12.569 0 5.428-3.459 10.061-8.287 11.818a1.903 1.903 0 0 1-.092-.527v-2.446c0-.975-.477-2.037-.946-2.75 2.584-.436 5.537-1.776 5.537-6.779 0-1.37-.429-2.58-1.275-3.598.186-.611.415-1.9-.225-3.52a.47.47 0 0 0-.291-.272c-.13-.04-1.326-.35-3.806 1.277a12.921 12.921 0 0 0-6.36 0c-2.481-1.63-3.68-1.319-3.809-1.277a.47.47 0 0 0-.29.273C5.582 7.319 5.811 8.607 6 9.218c-.85 1.018-1.279 2.227-1.279 3.598 0 4.957 2.9 6.323 5.463 6.778-.322.407-.66.934-.81 1.47-.661.184-2.018.19-2.929-1.37-.032-.06-.829-1.475-2.4-1.584-.25.002-.882.042-1.035.525-.169.537.424.944.679 1.117l.058.034c.029.015.707.371 1.213 1.644.105.333 1.03 2.84 4.353 2.399.002.367 0 .552-.004.7v.26c0 .15-.045.378-.096.525C4.386 23.558.931 18.924.931 13.5.931 6.57 6.57.931 13.5.931zm6.51 5.375c.5 1.471.158 2.537.035 2.839a.468.468 0 0 0 .089.49c.805.883 1.214 1.952 1.214 3.181 0 4.72-2.796 5.666-5.535 5.97a.464.464 0 0 0-.253.815c.368.314 1.199 1.68 1.199 2.744v2.446c0 .009.001.414.134.809a12.513 12.513 0 0 1-6.792-.002c.135-.396.139-.802.139-.81l.001-.248c.002-.211.006-.497 0-1.266a.473.473 0 0 0-.174-.362.47.47 0 0 0-.391-.09c-3.126.681-3.802-1.576-3.828-1.67l-.016-.047c-.448-1.135-1.037-1.713-1.388-1.975.759.267 1.182 1.007 1.193 1.024 1.231 2.107 3.264 2.162 4.328 1.685a.463.463 0 0 0 .27-.36c.095-.665.826-1.545 1.196-1.87a.464.464 0 0 0 .136-.488.461.461 0 0 0-.39-.324c-2.73-.31-5.524-1.266-5.524-5.98 0-1.228.41-2.3 1.219-3.181a.464.464 0 0 0 .087-.491c-.124-.302-.467-1.364.031-2.837.396.013 1.362.182 2.988 1.286.112.076.256.1.387.063.973-.27 2.058-.416 3.135-.421 1.08.005 2.166.15 3.14.421.131.037.273.013.386-.063 1.635-1.11 2.6-1.275 2.984-1.288z" /></svg></a>
</div>
<div class="buttons popup-container clearfix topicToolbarProxy _Skins_TopicToolbar mc-component nocontent" style="mc-topic-toolbar-items: PreviousTopic NextTopic Print ExpandAll CollapseAll;">
<div class="button-group-container-left">
<button class="button needs-pie previous-topic-button" title="Navigate previous">
<img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="previous topic" />
</button>
<button class="button needs-pie next-topic-button" title="Navigate next">
<img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="next topic" />
</button>
<button class="button needs-pie print-button" title="Print">
<img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="print" />
</button>
<button class="button needs-pie expand-all-button" data-state1-class="expand-all-button" data-state2-class="collapse-all-button" data-state2-title="Collapse all" title="Expand all" data-state1-title="Expand all">
<img src="../../Skins/Default/Stylesheets/Images/transparent.gif" alt="expand all" />
</button>
</div>
</div>
</div>
<div class="js-anchorer main-content">
<h1>Products <img src="../../resources/images/shoptype/b2b_shop.png" /> </h1>
<p>To open this page, go to <b>Products -> Products.</b></p>
<p>This page is where you can create and manage products and their characteristics throughout your online shop.</p>
<p>Specifically, from this page you can:</p>
<ul>
<li value="1"><a href="#add-abstract-product">Add an abstract product</a>
</li>
<li value="2"><a href="#creating-variant">Create a concrete product (variant</a>)</li>
<li value="3"><a href="#add-abstract-product">Create a bundle product</a>
</li>
<li value="4"><a href="#managing-attributes">Add or remove attributes of an abstract product</a>
</li>
<li value="5"><a href="#editing-abstract-products">Manage abstract and concrete (variants) products</a>
</li>
<li value="6"><a href="#attributes-concrete-product">Manage attributes for variants</a>
</li>
</ul>
<h2>Graphic User Interface</h2>
<p>To access the <b>Product</b> page, from the Administration Interface's main menu (on the left), click <b>Products</b> and then <b>Products</b>.</p>
<img src="../../resources/images/products/produtsinterface.png" style="max-width: 60%;" />
<p class="info">Hover your mouse over the numbers to view their description.</p>
<div class="mapster-container">
<img class="mapster-image" src="../../resources/images/products/productpage.png" usemap="#Map" data-mapster-config="" />
<map class="mapster-map" name="Map" id="Map">
<area alt="" id="id1" href="#" shape="rect" coords="1373,61,1412,101" data-static-state="false" data-key="id1" data-tool-tip="Creates a new product." />
<area alt="" id="id2" href="#" shape="rect" coords="1527,63,1567,101" data-static-state="false" data-key="id2" data-tool-tip="Creates a new product bundle." />
<area alt="" id="id3" href="#" shape="rect" coords="6,157,45,197" data-static-state="false" data-key="id3" data-tool-tip="Here you can select how many items you want to see in the list of search preferences (10, 25, 50, 100)." />
<area alt="" id="id4" href="#" shape="rect" coords="6,235,44,273" data-static-state="false" data-key="id4" data-tool-tip="A unique product identifier." />
<area alt="" id="id5" href="#" shape="rect" coords="307,195,345,234" data-static-state="false" data-key="id5" data-tool-tip="Name of product." />
<area alt="" id="id6" href="#" shape="rect" coords="679,194,718,233" data-static-state="false" data-key="id6" data-tool-tip="SKU of product." />
<area alt="" id="id7" href="#" shape="rect" coords="761,195,801,233" data-static-state="false" data-key="id7" data-tool-tip="Tax set of product." />
<area alt="" id="id8" href="#" shape="rect" coords="867,191,905,229" data-static-state="false" data-key="id8" data-tool-tip="Shows the number of variants that product has." />
<area alt="" id="id9" href="#" shape="rect" coords="935,191,974,230" data-static-state="false" data-key="id9" data-tool-tip="Shows status of product: Active or Inactive." />
<area alt="" id="id10" href="#" shape="rect" coords="1021,194,1059,232" data-static-state="false" data-key="id10" data-tool-tip="Shows whether product contains bundles. Set to 'Yes' if at least one bundle exists or to 'No' if no bundles exist." />
<area alt="" id="id11" href="#" shape="rect" coords="1148,196,1188,234" data-static-state="false" data-key="id11" data-tool-tip="Type of product: Product or Product Bundle." />
<area alt="" id="id12" href="#" shape="rect" coords="1255,195,1295,234" data-static-state="false" data-key="id12" data-tool-tip="Shows what stores the product can be used in." />
<area alt="" id="id13" href="#" shape="rect" coords="1420,232,1459,271" data-static-state="false" data-key="id13" data-tool-tip="Shows all actions that can be performed with product." />
<area alt="" id="id14" href="#" shape="rect" coords="1367,156,1406,195" data-static-state="false" data-key="id14" data-tool-tip="Searches specific products. Start typing a product name or SKU to filter the results and display only products that suit the entered search attributes." />
<area alt="" id="id15" href="#" shape="rect" coords="231,758,270,796" data-static-state="false" data-key="id15" data-tool-tip="Shows how many entries ([number 1] to [number 2]) are displayed in the table. [number 2] depends on the value set in Show [number] entries (2), [number 3] represents total number of entries in the products table." />
<area alt="" id="id16" href="#" shape="rect" coords="1200,756,1239,795" data-static-state="false" data-key="id16" data-tool-tip="[page number] is the number of page you are currently on. Here you can switch to the previous page or to the next page." />
</map>
</div>
<div class="MCDropDown MCDropDown_Closed dropDown"><span class="MCDropDownHead dropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage"><img class="MCDropDown_Image_Icon" src="../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open" /><div class="drop-anchor">Adding a New Abstract Product</div></a></span>
<div class="MCDropDownBody dropDownBody">
<p>You can create an abstract and bundle product directly from the <b>Products</b> page.</p>
<h3>
<div class="drop-anchor">Creating an <a name="add-abstract-product"></a>Abstract Product</div>
</h3>
<p>To create an abstract product:</p>
<ol>
<li value="1">Click <b>+Create Product</b> in the upper right corner.<br /><p class="note">To create a bundle product, click <b>+Create Bundle Product</b> and follow the steps described below.</p><br /><img src="../../resources/images/products/create-product-button.png" /><p>This will take you to the <b>Create a Product</b> page.</p></li>
<div class="drop-anchor">
<li value="1">In the <b><a name="general-tab"></a>General</b> tab:
<ul><li value="1">In the <b>Store relation</b> section, select the store(s) your product should be available for.</li><li value="2">Enter a <b>SKU prefix</b>.</li><li value="3">Type the name(s) for your product.<br /></li><li value="4">Enter <b>New from</b> and <b>New to</b> dates if you want to specify when the product should go online in the web-shop. This step is optional.</li><li value="5">Click <b>Save</b>.</li><li value="6">Click <b>Next</b> to go to the next tab (<b>Price & Tax</b>) or select a necessary tab.</li></ul></li>
</div>
<li value="2">
<div class="drop-anchor">In the <b><a name="price"></a>Price & Tax</b> tab, you can set prices and taxes for products.
<ul><li value="1">You can define prices that will apply to all users, as well as set specific prices for individual <a href="http://documentation.spryker.com/capabilities/company_account/merchants_and_merchant_relations/merchants-and-merchant-relations-overview.htm">merchant relations</a>. See <a href="../merchants/merchant-relations.htm">Merchant Relations</a> to learn how to create a merchant relation, which can subsequently be assigned specific product prices.
<p>To set default prices for all users, select <b>Default prices</b> in the <b>Merchant Price Dimension</b> dropdown.</p><img src="../../resources/images/products/merchant-price-dimension.png" /><p>To define specific prices for an individual <a href="http://documentation.spryker.com/capabilities/company_account/merchants_and_merchant_relations/merchants-and-merchant-relations-overview.htm">merchant relation</a>, select the merchant relation in the <b>Merchant Price Dimension</b> dropdown.</p><img src="../../resources/images/products/merchant-relation-prices.png" /></li><p class="note">The merchant relation prices are inherited by <b>Product Variants</b> as well. <br />To check this, go to the <b>Variants</b> tab of the <b>Edit Product</b> page and click <b>Edit</b> in <i>Actions</i> column of the <b>Product variants</b> table. On the <b>Price & Stock</b> tab, select the merchant relation in the <b>Merchant Price Dimension</b> dropdown. The merchant relation prices of the concrete product will be the same as those of its abstract product.</p><li value="2">Enter Original and eventually Default prices for the product for <a href="http://documentation.spryker.com/capabilities/price/net-gross-price.htm">Gross and Net</a> price modes.
<p class="info"><b>Default</b><b>prices</b> are prices your customers will pay, whereas <b>original prices</b> are the "previous price" is case you want to display promotions. If you specify only a default price, it will be displayed just like a normal product price. However if both prices are specified, the original one will appear crossed out in the shop.</p></li><li value="3">Select a <a href="https://documentation.spryker.com/capabilities/tax/manage-tax-rates-sets.htm">Tax Set</a> from the drop-down menu.</li><li value="4">Click <b>Next</b> to go to the <b>Variants</b> tab or select a necessary tab.</li></ul></div>
</li>
<li value="3">In the <b>Variants</b> tab, select attributes and values that define the difference between your product variants.
<p class="important">It is required to create at least <b>one product variant</b> while creating a product to have a possibility to activate this product, or to add more product variants.</p></li>
<li value="4">In the <b>SEO</b> tab, enter meta information to describe page's content. This meta information appears only in the page’s code, not in its content. This step is optional.</li>
<li value="5">In the <b>Image</b> tab, add images for the product. This step is optional.</li>
</ol>
</div>
</div>
<p>5. In the <b>Image</b> tab, click <b>Add image set</b>. Enter an image set name into the <b>Image Set Name</b> field and set URLs for small and large versions.</p>
<p>
<img src="../../resources/images/products/name_and_urls.png" />
</p>
<p>Even though you can add several image sets, out of the box, there is no place in the back end and front end where several image sets can be displayed for a product. However, if you still do that, the image set going first or having the name <i>'default'</i> will be applied to the product.</p>
<p>
<img src="../../resources/images/products/image_set_name.png" />
</p>
<p>If you add several images to an active image set, specify the order in which they are to be shown in the front end and back end using <b>Sort Order</b> fields. The order of images is defined by the order of entered numbers where the image set with sort order "0" is the first to be shown.</p>
<p>
<img src="../../resources/images/products/sort_order.png" />
</p>
<p class="info">If there are several image sets with the same <b>Sort Order</b> field value, the order in which they have been added defines the order in which they are to be shown.</p>
<div class="MCDropDown MCDropDown_Closed dropDown"><span class="MCDropDownHead dropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage"><img class="MCDropDown_Image_Icon" src="../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open" /><div class="drop-anchor">Managing Abstract Products</div></a></span>
<div class="MCDropDownBody dropDownBody">
<div class="drop-anchor">
<p>The products can be managed by triggering certain actions in the <i>Actions</i> column in the <b>Products</b> table on the <b>Product</b> page. Specifically, you can <b>View</b>, <b>Edit</b> and <b>Manage</b> product attributes here.</p>
</div>
<img src="../../resources/images/products/actions-column.png" />
<h3><a name="viewing-abstract-products"></a>Viewing Products</h3>
<p>Clicking <b>View</b> in the <i>Actions</i> column will take you to the <b>View Product Abstract</b> page where you can see all product-related information: </p>
<img src="../../resources/images/products/view-products.png" />
<ul>
<li value="1"><b>General information</b>: Displays the locales for which the product is available, its SKU and type, as well as shows a product description.</li>
<li value="2"><b>Price&Taxes</b>: Contains prices and tax sets applied to a product.</li>
<li value="3"><b>Attributes</b>: Provides all the details about the product properties.</li>
<li value="4"><b>SEO</b>: Shows meta information.</li>
<li value="5"><b>Images Sets</b>: Displays an image and a name of the sets.</li>
<li value="6"><b>Variants</b>: Allows you to view, edit, and <a href="#editing-variant">manage product variants</a>.</li>
</ul>
<img src="../../resources/images/products/view-product-variants.png" />
<ul>
<li value="1"><b>Product groups</b>: Allows you to view what products belong to the group.<br /></li>
<li value="2"><b>Categories</b>: Displays the category the product is assigned, as well as allows you to manage categories. Clicking on the category will redirect you to the page where you can select products to be assigned.<br /><img src="../../resources/images/products/categories-view-page.png" /><br /></li>
</ul>
<h3><a name="editing-abstract-products"></a>Editing Products</h3>
<p>To edit products, go to <b>Content Management</b> → <b>Products</b> and click <b>Edit</b> for the product you want to edit in the <i>Actions</i> column of the table. The <b>Edit Product Abstract</b> page will open.</p>
<img src="../../resources/images/products/edit-button.png" />
<p>This allows you to perform the following actions with the product (abstract):</p>
<ul>
<li value="1">Specify a store for which the product will be available.</li>
<li value="2">Define the validity range for the product to be visible on the store website.</li>
<li value="3">Set default and original prices for the product.</li>
<li value="4">Specify merchant relations.</li>
<li value="5">Manage product variants.</li>
<li value="6">Edit meta details per a locale.</li>
</ul>
<p>Below you will find descriptions of the buttons displayed at the top of the <b>Edit Product</b> page:<br /><img src="../../resources/images/products/edit-product-menu.png" /></p>
<div class="u-is-scrollable">
<table style="mc-table-style: url('../../resources/tablestyles/patternedrows2.css');" class="TableStyle-PatternedRows2" cellspacing="0">
<col class="TableStyle-PatternedRows2-Column-Regular" />
<col style="width: 130px;" class="TableStyle-PatternedRows2-Column-Regular" />
<col class="TableStyle-PatternedRows2-Column-Regular" />
<thead>
<tr class="TableStyle-PatternedRows2-Head-Header1">
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">#</th>
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">Button</th>
<th class="TableStyle-PatternedRows2-HeadD-Regular-Header1">Description</th>
</tr>
</thead>
<tbody>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows">1</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows"><b>List Products</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-LightRows">Returns to the Product list page.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-DarkerRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows">2</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows"><b>+Create Product</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-DarkerRows">Opens the page where you can create a new abstract product. See <a href="#add-abstract-product"><a href="#creating">Create a new Abstract Product</a></a> for more details.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows">3</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows"><b>+Add Variant</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-LightRows">Opens the page where you can add a concrete product (variant) to an abstract product. See <a href="#creating-variant">Create New Product Variants for Abstract Products</a> to learn how to do this.<br /></td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-DarkerRows">
<td class="TableStyle-PatternedRows2-BodyB-Regular-DarkerRows">4</td>
<td class="TableStyle-PatternedRows2-BodyB-Regular-DarkerRows"><b>Manage Attributes</b>
</td>
<td class="TableStyle-PatternedRows2-BodyA-Regular-DarkerRows">Opens the page where you can add or remove product attributes. See <a href="#managing-attributes">Managing Attributes for an Abstract Product</a> for more details.</td>
</tr>
</tbody>
</table>
</div>
<h3><a name="managing-attributes"></a>Managing Attributes for an Abstract Product </h3>
<p>You can add or remove attributes of an abstract product.</p>
<p>To manage attributes, select <b>Products</b>under <b>Products</b> and click <b>Manage Attributes</b> for the product you want to edit in the <i>Actions</i> column of the table.</p>
<p>
<img src="../../resources/images/products/manage-attribute-btn.png" />
</p>
<p>The <b>Manage Attributes for Product Abstract [Product ID]</b> page will open.</p>
<p>To add an <i>existing</i> attribute to the product:</p>
<ol>
<li value="1">In the <b>Attribute</b> <b>key</b> field, start typing the key.</li>
<li value="2">Select the one matching your requirements from the suggestion list.</li>
<li value="3">Click <b>Add</b>. This will add an attribute key.<br /><img src="../../resources/images/products/attribute-key-add.png" /></li>
<li value="4">Set a pointer on the field and select the value from the drop-down.<br /><img src="../../resources/images/products/drop-down-attribute.png" /><p class="note">If you want to remove the existing attribute key of the abstract product, click <b>Remove</b>.</p></li>
<li value="5">Click <b>Save</b>.</li>
</ol>
<p>From this page, you can:</p>
<ul>
<li value="1">Return to the page where you can edit general information on the product (abstract), change its price and image. For this, click <b>Edit Product Abstract</b>.</li>
<li value="2">Return to a list of products. To do this, click <b>Back to Product List</b>.</li>
</ul>
</div>
</div>
<div class="MCDropDown MCDropDown_Closed dropDown"><span class="MCDropDownHead dropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage"><img class="MCDropDown_Image_Icon" src="../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open" /><div class="drop-anchor">Creating a New Product Variant</div></a></span>
<div class="MCDropDownBody dropDownBody">
<p class="note">Keep in mind that to create a new product variant, the abstract product should have a <i>super attribute</i>.</p>
<div class="drop-anchor"><a name="creating-variant"></a>
<p>To create a product variant for an abstract product:</p>
</div>
<ol>
<li value="1">On the left-side navigation bar, select <b>Products</b> under <b>Products</b>.</li>
<li value="2">Click <b>Edit</b> next to the product for which you want to create a new variant. This will take you to the <b>Edit Product Abstract</b> page.</li>
<li value="3">Click <b>+Add Variant</b> in the upper right corner. The concrete product (variant) editor will open.
<img src="../../resources/images/products/add-variant.png" /></li>
<li value="4">In the <b>General</b> tab:</li>
<ul>
<li value="1">Add SKU or select <b>Autogenerate SKU</b>.</li>
<li value="2">Select a <a href="http://documentation.spryker.com/capabilities/product_management/product/super-attributes.htm">super attribute.</a></li>
<li value="3">Add product name and description and select <b>Searchable</b> if you want your product to be searchable by its name in the shop application.</li>
<li value="4">Enter <b>Valid From</b> and <b>Valid To</b> dates to specify when the product should go online in the web-shop. This step is optional.<br /><img src="../../resources/images/products/variant-edit.png" /><br /></li>
</ul>
<li value="5">Go to the <b>Price & Stock</b> tab.</li>
<li value="6">
<p>In the <b>Price & Tax</b> tab, set prices and taxes for products:</p>
<ul>
<li value="1">To take the prices over from the abstract product, select <b>Use prices from abstract product</b>.
<br /><img src="../../resources/images/products/use-prices-from-abstract-product.png" />
Otherwise, enter <i>Original</i> and eventually <i>Default</i> prices for the product for <a href="http://documentation.spryker.com/capabilities/price/net-gross-price.htm">Gross and Net</a> price modes.
<p class="note"><b>Default</b> <b>prices</b> are prices your customers will pay, whereas <b>original prices</b> are the "previous price" is case you want to display promotions. If you specify only a default price, it will be displayed just like a normal product price. However if both prices are specified, the original one will appear crossed out in the shop.</p><img src="../../resources/images/products/price-and-stock-abstract.png" /></li>
</ul>
<ul>
<li value="1">You can define prices that will apply to all users, as well as set specific prices for individual <a href="http://documentation.spryker.com/capabilities/company_account/merchants_and_merchant_relations/merchants-and-merchant-relations-overview.htm">merchant relations</a>. See <a href="../merchants/merchant-relations.htm">Merchant Relations</a> to learn how to create a merchant relation, which can subsequently be assigned specific product prices.
<p>To set default prices for all users, select <b>Default prices</b> in the <b>Merchant Price Dimension</b> dropdown.</p><img src="../../resources/images/products/merchant-price-dimension.png" /><p>To define specific prices for an individual <a href="http://documentation.spryker.com/capabilities/company_account/merchants_and_merchant_relations/merchants-and-merchant-relations-overview.htm">merchant relation</a>, select the merchant relation in the <b>Merchant Price Dimension</b> dropdown.</p><img src="../../resources/images/products/merchant-relation-prices.png" /><p>The merchant relation prices are inherited by Product Variants as well. You can check this by going to the <i>Variants</i> tab of the <b>Edit Product</b> page and clicking <b>Edit</b> in the <i>Actions</i> column of the <b>Product variants</b> table. In the <b>Price & Stock</b> tab, select the merchant relation in the <b>Merchant Price Dimension</b> dropdown. The merchant relation prices of the concrete product will be the same as those of its abstract product.</p></li>
</ul>
<ul>
<li value="1">Select <b>Quantity</b> for the product and then select <b>Never out of stock</b> if you want the product to never go out of stock.</li>
<li value="2">Click <b>Save</b>.</li>
<li value="3">Click <b>Next</b> to go to the next tab (<b>Image</b>) or select a necessary tab.</li>
</ul>
</li>
<li value="7">In the <b>Image</b> tab, add images for the product and click <b>Save</b>. This step is optional.</li>
<li value="8">In the <b>Assign bundled product</b>, select the <a href="http://documentation.spryker.com/capabilities/product_management/product_bundle/product-bundle.htm">bundled products</a> to be sold together with the new product and click <b>Save</b>. This step is optional.<br /><img src="../../resources/images/products/assign-bundled-products.png" /><br /></li>
</ol>
</div>
</div>
<div class="MCDropDown MCDropDown_Closed dropDown"><span class="MCDropDownHead dropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage"><img class="MCDropDown_Image_Icon" src="../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open" /><div class="drop-anchor">Managing Concrete Products</div></a></span>
<div class="MCDropDownBody dropDownBody">
<div class="drop-anchor">
<p>You can manage concrete product details by clicking respective buttons in the <i>Actions</i> column of the <b>Variants</b> section from the <b>Product</b> menu.</p>
</div>
<p>To access the <b>Variants</b> section, click <b>View</b> or <b>Edit</b> in the <i>Actions</i> column next to the product abstract for which would like to manage product concrete.</p>
<p>If you click <b>View</b>, scroll down to the <b>Variants</b> section.</p>
<p>When you click <b>Edit</b>, go to the <b>Variants</b> tab.</p>
<p>
<img src="../../resources/images/products/manage-product-variant.png" />
</p>
<h3><a name="viewing-variant"></a>Viewing a Concrete Product </h3>
<p>Clicking <b>View</b> will take you to the <b>View Product Concrete</b> menu.</p>
<p>
<img src="../../resources/images/products/view-product-concrete.png" />
</p>
<p>The <b>General information</b> section displays the following information on the product: its SKU, product type, name, description, and validity period during which the product is available.</p>
<p>The <b>Price&Stock</b> section provides details on prices and taxes for products, as well as displays information on quantity and stock availability.</p>
<p>The <b>Attributes</b> and <b>Image set</b> sections displays information on product attributes and images assigned to products. </p>
<p>By clicking a respective button on the top menu, you can:</p>
<p>
<img src="../../resources/images/products/concrete-top-menu.png" />
</p>
<div class="u-is-scrollable">
<table style="mc-table-style: url('../../resources/tablestyles/patternedrows2.css');" class="TableStyle-PatternedRows2" cellspacing="0">
<col class="TableStyle-PatternedRows2-Column-Regular" />
<col style="width: 130px;" class="TableStyle-PatternedRows2-Column-Regular" />
<col class="TableStyle-PatternedRows2-Column-Regular" />
<thead>
<tr class="TableStyle-PatternedRows2-Head-Header1">
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">#</th>
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">Button</th>
<th class="TableStyle-PatternedRows2-HeadD-Regular-Header1">Description</th>
</tr>
</thead>
<tbody>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows">1</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows"><b>List Products</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-LightRows">Return to the Product list page.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-DarkerRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows">2</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows"><b>Edit</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-DarkerRows">Open the page where you can edit concrete product. See <a href="#creating-variant">Create a new Concrete Product</a> for more details.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyB-Regular-LightRows">3</td>
<td class="TableStyle-PatternedRows2-BodyB-Regular-LightRows"><b>Manage Attributes</b>
</td>
<td class="TableStyle-PatternedRows2-BodyA-Regular-LightRows">Open the page where you can add or remove product attributes for a concrete products. See <a href="#attributes-concrete-product">Managing Attributes for a Concrete Product</a> for more details.</td>
</tr>
</tbody>
</table>
</div>
<h3><a name="editing-variant"></a>Editing Concrete Products</h3>
<p>Clicking <b>Edit</b> will take you to the <b>Edit Concrete Product</b> page.</p>
<p>
<img src="../../resources/images/products/edit-concrete-product.png" />
</p>
<p>This page allows you to perform the following actions:</p>
<ul>
<li value="1">Change product name and description.</li>
<li value="2">Set if the product will be searchable by its name in the shop application.</li>
<li value="3">Specify the validity period during which the product will be visible on the shop website.</li>
<li value="4">Define a price and availability in stores.</li>
<li value="5">Add an image.</li>
<li value="6">Assign products to bundles to be sold together.</li>
</ul>
<p>From this page, you can:</p>
<ul>
<li value="1">Return to a list of products. For this, click <b>List Products</b> in the upper right corner of the page.</li>
<li value="2">Deactivate or activate the product by clicking <b>Deactivate</b> or <b>Activate</b>.</li>
<li value="3">Return to the page where you can manage attributes for a concrete product. To do this, click <b>Manage Attributes</b>.</li>
<li value="4">Go to the <b>Edit Product Abstract</b> page by clicking <b>Edit Product Abstract</b>.</li>
</ul>
<h3><a name="discontinued-product"></a>Marking Product as "Discontinued"</h3>
<p>To mark the product as <a href="https://documentation.spryker.com/capabilities/product_management/discontinued_products/discontinued-products-overview.htm">discontinued</a>, do the following:</p>
<ol>
<li value="1">On the <i style="font-weight: bold; font-style: normal;">Edit Concrete Product</i> page, switch to the <b>Discontinue</b> tab. By clicking on this tab, you can discontinue the concrete product.
<p class="info">When the product is discontinued, <b>Discontinued</b> is colored in red.</p></li>
<li value="2">Once <b>Discontinue</b> is selected, you need to add a note describing the reason why the product was discontinued.
<p>The date of the deactivation is also available for you on the <b>Discontinue</b> tab.</p><p><img src="../../resources/images/products/discontinued-note.png" /></p><p>Days left (<var>active_until</var>) value is set to 180 days by default. You can change it on project level.</p></li>
</ol>
<p>After the product is marked as discontinued, a corresponding label appears on the product detail page and search results in the shop application. </p>
<div class="important">The product with the <b>Discontinued</b> label cannot be added to cart.</div>
<p>
<img src="../../resources/images/products/discontinued-product.png" />
</p>
<p>If the product added to the shopping list or wishlist is marked as discontinued, the <i>Discontinued</i> status will appear in the list and the shopper will not be able to proceed to the checkout:</p>
<p>
<img src="../../resources/images/products/wishlist-discontinued.png" />
</p>
<h3><a name="product-alternative"></a>Setting Product Alternatives for a Concrete Product</h3>
<p>To set <a href="https://documentation.spryker.com/capabilities/product_management/alternative_products/alternative-products-overview.htm">product alternatives</a> for a product, do the following:</p>
<ol>
<li value="1">On the <b>Edit Concrete Product</b> page, switch to the <b>Product Alternatives</b> tab:
<br /><img src="../../resources/images/products/product-alternatives-tab.png" /></li>
<li value="2">To add product alternatives, enter <i>Product Name</i> or its <i>SKU</i> in the <b>Add Product Alternative by Name or SKU</b> field:
<br /><img src="../../resources/images/products/alt-product-sku.png" /></li>
<li value="3">Click <b>Save</b>.</li>
</ol>
<p>Below you can see how the shop visitors can view product alternatives on the product detail page:
</p>
<p>
<img src="../../resources/images/products/pdp-discontinued.png" />
</p>
<div class="drop-anchor"><a name="attributes-concrete-product"></a>
<h3>Managing Attributes for a Concrete Product</h3>
</div>
<p>Clicking <b>Manage Attributes</b> will take you to the <b>Manage Attributes for Product [Product ID]</b> page.</p>
<p>
<img src="../../resources/images/products/attributes-concrete.png" />
</p>
<p>On this page, you can perform the following actions:</p>
<div class="u-is-scrollable">
<table style="mc-table-style: url('../../resources/tablestyles/patternedrows2.css');" class="TableStyle-PatternedRows2" cellspacing="0">
<col class="TableStyle-PatternedRows2-Column-Regular" />
<col style="width: 130px;" class="TableStyle-PatternedRows2-Column-Regular" />
<col class="TableStyle-PatternedRows2-Column-Regular" />
<thead>
<tr class="TableStyle-PatternedRows2-Head-Header1">
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">#</th>
<th class="TableStyle-PatternedRows2-HeadE-Regular-Header1">Button</th>
<th class="TableStyle-PatternedRows2-HeadD-Regular-Header1">Description</th>
</tr>
</thead>
<tbody>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows">1</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows"><b>Edit Product</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-LightRows">Go to the page where you can edit this concrete product.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-DarkerRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows">2</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-DarkerRows"><b>Back to Product Abstract</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-DarkerRows">Go to the page where you can edit the abstract product to which this concrete product belong.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-LightRows">
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows">3</td>
<td class="TableStyle-PatternedRows2-BodyE-Regular-LightRows"><b>Add</b>
</td>
<td class="TableStyle-PatternedRows2-BodyD-Regular-LightRows">Add a new attribute to the product.</td>
</tr>
<tr class="TableStyle-PatternedRows2-Body-DarkerRows">
<td class="TableStyle-PatternedRows2-BodyB-Regular-DarkerRows">
<p>4</p>
</td>
<td class="TableStyle-PatternedRows2-BodyB-Regular-DarkerRows">
<p><b>Remove</b>
</p>
</td>
<td class="TableStyle-PatternedRows2-BodyA-Regular-DarkerRows">
<p>Remove an existing attribute.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="MCDropDown MCDropDown_Closed dropDown"><span class="MCDropDownHead dropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage"><img class="MCDropDown_Image_Icon" src="../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open" /><div class="drop-anchor">Activating an Abstract Product</div></a></span>
<div class="MCDropDownBody dropDownBody">
<div class="drop-anchor"><a name="activating-abstract-product"></a>
<p>Once the product has been created, it can be (de)activated. </p>
</div>
<p>To activate the product, click <b>Activate</b> in the top right corner of the page. </p>
<p>To deactivate the product, click <b>Deactivate</b> in the top right corner.</p>
<img src="../../resources/images/products/activate-abstract-product.png" />
</div>
</div>
<p> </p>
<p><i>Last review date: Feb 19, 2019 </i>
</p>
</div>
</div>
</div>
</div>
</div><a class="scroll-top js-scroll-top" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill="#FFF" fill-rule="nonzero" d="M11.82 5.22a.54.54 0 0 1 0 .806.636.636 0 0 1-.852 0L6.607 1.937v13.49a.587.587 0 0 1-.602.573c-.336 0-.611-.258-.611-.573V1.937L1.04 6.026a.647.647 0 0 1-.86 0 .54.54 0 0 1 0-.807L5.573.163a.636.636 0 0 1 .852 0L11.82 5.22z" /></svg></a>
<script>/* <![CDATA[ */
function createGithubUrl() {
var GITHUB_CONTENT_PATH = '/blob/master/public';
var link = document.querySelector('.js-widget-github-link');
var href =
link.getAttribute('href')
+ GITHUB_CONTENT_PATH
+ window.location.pathname;
link.setAttribute('href', href);
}
createGithubUrl();
/* ]]> */</script>
<script>/* <![CDATA[ */
requirejs.config({
appDir: '',
paths: {
'clipboard': ['https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min']
}
});
require(['clipboard'], function(Clipboard) {
console.log(Clipboard);
window.Clipboard = Clipboard;
});
/* ]]> */</script>
<script src="../../resources/scripts/perfect-scrollbar.js">
</script>
<script src="../../resources/scripts/imagemapster.js">
</script>
<script src="../../resources/scripts/script.js">
</script>
<script src="../../resources/scripts/prism.js">
</script>
</div>
</div>
</section><a data-close="true"></a>
</div>
</div>
<script>/* <![CDATA[ */$(document).foundation();/* ]]> */</script>
</div>
</body>
</html>