{"id":9076,"date":"2021-10-04T12:01:02","date_gmt":"2021-10-04T12:01:02","guid":{"rendered":"https:\/\/www.bay20.com\/?p=9076"},"modified":"2025-05-21T16:08:14","modified_gmt":"2025-05-21T10:23:14","slug":"wie-erstelle-ich-deine-eigene-detail-ansichtsseite-in-shopware-5","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-erstelle-ich-deine-eigene-detail-ansichtsseite-in-shopware-5\/","title":{"rendered":"Wie kann man in Shopware 5 eine eigene Seite mit einer Detailansicht erstellen?"},"content":{"rendered":"\n<p>Als erstes m\u00fcssen Sie ein benutzerdefiniertes Thema erstellen. Um ein benutzerdefiniertes Thema zu erstellen, klicken Sie auf diesen Link<\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-bay-20\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"LVOfQwMGiw\"><a href=\"https:\/\/www.bay20.com\/different-ways-of-creating-shopware-5-theme\/\">Different ways of creating shopware 5 theme ?<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Different ways of creating shopware 5 theme ?&#8221; &#8212; Bay20 Software\" src=\"https:\/\/www.bay20.com\/different-ways-of-creating-shopware-5-theme\/embed\/#?secret=EEZbLaohKS#?secret=LVOfQwMGiw\" data-secret=\"LVOfQwMGiw\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Um Ihre eigene Detailansicht in <a href=\"https:\/\/www.bay20.com\/de\/shopware-entwicklungsunternehmen\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/www.bay20.com\/shopware-development\/\">shopware 5<\/a> zu erstellen, gehen Sie wie folgt vor:-<\/p>\n\n\n\n<p>Unsere detaillierte Seite sieht wie folgt aus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/image-10-980x451.png\" alt=\"Create your own detailed view page in Shopware 5\" class=\"wp-image-9079\" width=\"757\" height=\"347\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10-980x451.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10-300x138.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10-800x368.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10-768x353.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10-1000x460.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/image-10.png 1261w\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" \/><\/figure>\n\n\n\n<p><strong>Hinweis: <\/strong>Wir werden die Eltern tpl-Dateien in unser benutzerdefiniertes Thema erweitern. Benutzerdefinierte Verzeichnis ist Thema, das ich bereits erstellt.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/05\/Screenshot_6-980x449.png\" alt=\"\" class=\"wp-image-8493\" width=\"773\" height=\"353\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6-980x449.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6-300x137.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6-800x366.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6-768x352.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6-1000x458.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/05\/Screenshot_6.png 1365w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 1:<\/strong> Zuerst definieren wir unser eigenes Layout im Backend. Dazu gehen wir in die <strong>Konfiguration&gt;Grundeinstellungen<\/strong> und das <strong>Frontend<\/strong>. Dort w\u00e4hlen wir <strong>Warenkorb\/Artikeldetails<\/strong> aus und f\u00fcgen unter <strong>\u201eVerf\u00fcgbare Vorlagen f\u00fcr Detailseite\u201c<\/strong>: unsere so ein:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-980x449.png\" alt=\"\" class=\"wp-image-9080\" width=\"787\" height=\"360\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-980x449.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-300x138.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-800x367.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-768x352.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7-1000x459.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_2-7.png 1365w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-980x440.png\" alt=\"\" class=\"wp-image-9081\" width=\"794\" height=\"356\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-980x440.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-300x135.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-800x359.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-768x345.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5-1000x449.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_3-5.png 1092w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_5-5.png\" alt=\"\" class=\"wp-image-9082\" width=\"777\" height=\"71\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_5-5.png 784w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_5-5-300x28.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_5-5-768x71.png 768w\" sizes=\"auto, (max-width: 777px) 100vw, 777px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>:Standard;bay20.tpl:emzFullpic;<\/code><\/pre>\n\n\n\n<p><strong>Schritt 2: <\/strong>Wir m\u00fcssen die Vorlagendatei <strong>bay20Fullpic.tpl<\/strong> in diesem Verzeichnis <strong>erstellen:&#8220;themes\/Frontend\/Custom\/ frontend\/detail\/index.tpl&#8220;<\/strong><\/p>\n\n\n\n<p><strong>und leiten Sie zun\u00e4chst von der urspr\u00fcnglichen index.tpl ab<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{extends file='parent:frontend\/detail\/index.tpl'}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"534\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_6-3.png\" alt=\"\" class=\"wp-image-9083\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_6-3.png 295w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_6-3-166x300.png 166w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 3: <\/strong>Schreiben Sie diesen Code in die <strong>Datei index.tpl.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{extends file='parent:frontend\/detail\/index.tpl'}\n\n{* Main content *}\n{block name='frontend_index_content'}\n    &lt;div class=\"bay20--detail-fullpic\"&gt;\n        &lt;div class=\"content product--details\" itemscope itemtype=\"http:\/\/schema.org\/Product\"{if !{config name=disableArticleNavigation}} data-product-navigation=\"{url module=\"widgets\" controller=\"listing\" action=\"productNavigation\"}\" data-category-id=\"{$sArticle.categoryID}\" data-main-ordernumber=\"{$sArticle.mainVariantNumber}\"{\/if} data-ajax-wishlist=\"true\" data-compare-ajax=\"true\"{if $theme.ajaxVariantSwitch} data-ajax-variants-container=\"true\"{\/if}&gt;\n\n            {* The configurator selection is checked at this early point\n            to use it in different included files in the detail template. *}\n            {block name='frontend_detail_index_configurator_settings'}\n\n                {* Variable for tracking active user variant selection *}\n                {$activeConfiguratorSelection = true}\n\n                {if $sArticle.sConfigurator &amp;&amp; ($sArticle.sConfiguratorSettings.type == 1 || $sArticle.sConfiguratorSettings.type == 2)}\n                    {* If user has no selection in this group set it to false *}\n                    {foreach $sArticle.sConfigurator as $configuratorGroup}\n                        {if !$configuratorGroup.selected_value}\n                            {$activeConfiguratorSelection = false}\n                        {\/if}\n                    {\/foreach}\n                {\/if}\n            {\/block}\n\n            &lt;div class=\"product--detail-upper block-group\"&gt;\n                {* Product image *}\n                {block name='frontend_detail_index_image_container'}\n                    &lt;div class=\"product--image-container image-slider{if $sArticle.image &amp;&amp; {config name=sUSEZOOMPLUS}} product--image-zoom{\/if}\"\n                        {if $sArticle.image}\n                        data-image-slider=\"true\"\n                        data-image-gallery=\"true\"\n                        data-maxZoom=\"{$theme.lightboxZoomFactor}\"\n                        data-thumbnails=\".image--thumbnails\"\n                        {\/if}&gt;\n                        {include file=\"frontend\/detail\/image.tpl\"}\n                    &lt;\/div&gt;\n                {\/block}\n\n                {* \"Buy now\" box container *}\n                {block name='frontend_detail_index_buy_container'}\n                    &lt;div class=\"product--buybox block{if $sArticle.sConfigurator &amp;&amp; $sArticle.sConfiguratorSettings.type==2} is--wide{\/if}\"&gt;\n\n                        {block name=\"frontend_detail_rich_snippets_brand\"}\n                            &lt;meta itemprop=\"brand\" content=\"{$sArticle.supplierName|escape}\"\/&gt;\n                        {\/block}\n\n                        {block name=\"frontend_detail_rich_snippets_weight\"}\n                            {if $sArticle.weight}\n                                &lt;meta itemprop=\"weight\" content=\"{$sArticle.weight} kg\"\/&gt;\n                            {\/if}\n                        {\/block}\n\n                        {block name=\"frontend_detail_rich_snippets_height\"}\n                            {if $sArticle.height}\n                                &lt;meta itemprop=\"height\" content=\"{$sArticle.height} cm\"\/&gt;\n                            {\/if}\n                        {\/block}\n\n                        {block name=\"frontend_detail_rich_snippets_width\"}\n                            {if $sArticle.width}\n                                &lt;meta itemprop=\"width\" content=\"{$sArticle.width} cm\"\/&gt;\n                            {\/if}\n                        {\/block}\n\n                        {block name=\"frontend_detail_rich_snippets_depth\"}\n                            {if $sArticle.length}\n                                &lt;meta itemprop=\"depth\" content=\"{$sArticle.length} cm\"\/&gt;\n                            {\/if}\n                        {\/block}\n\n                        {block name=\"frontend_detail_rich_snippets_release_date\"}\n                            {if $sArticle.sReleasedate}\n                                &lt;meta itemprop=\"releaseDate\" content=\"{$sArticle.sReleasedate}\"\/&gt;\n                            {\/if}\n                        {\/block}\n\n                        {block name='frontend_detail_buy_laststock'}\n                            {if !$sArticle.isAvailable &amp;&amp; ($sArticle.isSelectionSpecified || !$sArticle.sConfigurator)}\n                                {include file=\"frontend\/_includes\/messages.tpl\" type=\"error\" content=\"{s name='DetailBuyInfoNotAvailable' namespace='frontend\/detail\/buy'}{\/s}\"}\n                            {\/if}\n                        {\/block}\n\n                        {* Product email notification *}\n                        {block name=\"frontend_detail_index_notification\"}\n                            {if $sArticle.notification &amp;&amp; $sArticle.instock &lt;= 0 &amp;&amp; $ShowNotification}\n                                {include file=\"frontend\/plugins\/notification\/index.tpl\"}\n                            {\/if}\n                        {\/block}\n\n                        {* Product data *}\n                        {block name='frontend_detail_index_buy_container_inner'}\n                            &lt;div itemprop=\"offers\" itemscope itemtype=\"{if $sArticle.sBlockPrices}http:\/\/schema.org\/AggregateOffer{else}http:\/\/schema.org\/Offer{\/if}\" class=\"buybox--inner\"&gt;\n\n                                {block name='frontend_detail_index_data'}\n                                    {if $sArticle.sBlockPrices}\n                                        {$lowestPrice=false}\n                                        {$highestPrice=false}\n                                        {foreach $sArticle.sBlockPrices as $blockPrice}\n                                            {if $lowestPrice === false || $blockPrice.price &lt; $lowestPrice}\n                                                {$lowestPrice=$blockPrice.price}\n                                            {\/if}\n                                            {if $highestPrice === false || $blockPrice.price &gt; $highestPrice}\n                                                {$highestPrice=$blockPrice.price}\n                                            {\/if}\n                                        {\/foreach}\n\n                                        &lt;meta itemprop=\"lowPrice\" content=\"{$lowestPrice}\" \/&gt;\n                                        &lt;meta itemprop=\"highPrice\" content=\"{$highestPrice}\" \/&gt;\n                                        &lt;meta itemprop=\"offerCount\" content=\"{$sArticle.sBlockPrices|count}\" \/&gt;\n                                    {else}\n                                        &lt;meta itemprop=\"priceCurrency\" content=\"{$Shop-&gt;getCurrency()-&gt;getCurrency()}\"\/&gt;\n                                    {\/if}\n                                    {include file=\"frontend\/detail\/data.tpl\" sArticle=$sArticle sView=1}\n                                {\/block}\n\n                                {block name='frontend_detail_index_after_data'}{\/block}\n\n                                {* Configurator drop down menu's *}\n                                {block name=\"frontend_detail_index_configurator\"}\n                                    &lt;div class=\"product--configurator\"&gt;\n                                        {if $sArticle.sConfigurator}\n                                            {if $sArticle.sConfiguratorSettings.type == 1}\n                                                {include file=\"frontend\/detail\/config_step.tpl\"}\n                                            {elseif $sArticle.sConfiguratorSettings.type == 2}\n                                                {include file=\"frontend\/detail\/config_variant.tpl\"}\n                                            {else}\n                                                {include file=\"frontend\/detail\/config_upprice.tpl\"}\n                                            {\/if}\n                                        {\/if}\n                                    &lt;\/div&gt;\n                                {\/block}\n\n                                {* Include buy button and quantity box *}\n                                {block name=\"frontend_detail_index_buybox\"}\n                                    {include file=\"frontend\/detail\/buy.tpl\"}\n                                {\/block}\n\n                                {* Product actions *}\n                                {block name=\"frontend_detail_index_actions\"}\n                                    &lt;nav class=\"product--actions\"&gt;\n                                        {include file=\"frontend\/detail\/actions.tpl\"}\n                                    &lt;\/nav&gt;\n                                {\/block}\n                            &lt;\/div&gt;\n                        {\/block}\n\n                        {* Product - Base information *}\n                        {block name='frontend_detail_index_buy_container_base_info'}\n                            &lt;ul class=\"product--base-info list--unstyled\"&gt;\n\n                                {* Product SKU *}\n                                {block name='frontend_detail_data_ordernumber'}\n                                    &lt;li class=\"base-info--entry entry--sku\"&gt;\n\n                                        {* Product SKU - Label *}\n                                        {block name='frontend_detail_data_ordernumber_label'}\n                                            &lt;strong class=\"entry--label\"&gt;\n                                                {s name=\"DetailDataId\" namespace=\"frontend\/detail\/data\"}{\/s}\n                                            &lt;\/strong&gt;\n                                        {\/block}\n\n                                        {* Product SKU - Content *}\n                                        {block name='frontend_detail_data_ordernumber_content'}\n                                            &lt;meta itemprop=\"productID\" content=\"{$sArticle.articleDetailsID}\"\/&gt;\n                                            &lt;span class=\"entry--content\" itemprop=\"sku\"&gt;\n                                                {$sArticle.ordernumber}\n                                            &lt;\/span&gt;\n                                        {\/block}\n                                    &lt;\/li&gt;\n                                {\/block}\n\n                                {* Product attributes fields *}\n                                {block name='frontend_detail_data_attributes'}\n\n                                    {* Product attribute 1 *}\n                                    {block name='frontend_detail_data_attributes_attr1'}\n                                        {if $sArticle.attr1}\n                                            &lt;li class=\"base-info--entry entry-attribute\"&gt;\n                                                &lt;strong class=\"entry--label\"&gt;\n                                                    {s namespace=\"frontend\/detail\/index\" name=\"DetailAttributeField1Label\"}{\/s}:\n                                                &lt;\/strong&gt;\n\n                                                &lt;span class=\"entry--content\"&gt;\n                                                    {$sArticle.attr1|escape}\n                                                &lt;\/span&gt;\n                                            &lt;\/li&gt;\n                                        {\/if}\n                                    {\/block}\n\n                                    {* Product attribute 2 *}\n                                    {block name='frontend_detail_data_attributes_attr2'}\n                                        {if $sArticle.attr2}\n                                            &lt;li class=\"base-info--entry entry-attribute\"&gt;\n                                                &lt;strong class=\"entry--label\"&gt;\n                                                    {s namespace=\"frontend\/detail\/index\" name=\"DetailAttributeField2Label\"}{\/s}:\n                                                &lt;\/strong&gt;\n\n                                                &lt;span class=\"entry--content\"&gt;\n                                                    {$sArticle.attr2|escape}\n                                                &lt;\/span&gt;\n                                            &lt;\/li&gt;\n                                        {\/if}\n                                    {\/block}\n                                {\/block}\n                            &lt;\/ul&gt;\n                        {\/block}\n                    &lt;\/div&gt;\n                {\/block}\n            &lt;\/div&gt;\n\n            {* Product bundle hook point *}\n            {block name=\"frontend_detail_index_bundle\"}{\/block}\n\n            {block name=\"frontend_detail_index_detail\"}\n\n                {* Tab navigation *}\n                {block name=\"frontend_detail_index_tabs\"}\n                    {include file=\"frontend\/detail\/tabs.tpl\"}\n                {\/block}\n            {\/block}\n\n            {* Crossselling tab panel *}\n            {block name=\"frontend_detail_index_tabs_cross_selling\"}\n\n                {$showAlsoViewed = {config name=similarViewedShow}}\n                {$showAlsoBought = {config name=alsoBoughtShow}}\n\n                &lt;div class=\"tab-menu--cross-selling\"{if $sArticle.relatedProductStreams} data-scrollable=\"true\"{\/if}&gt;\n\n                    {* Tab navigation *}\n                    {block name=\"frontend_detail_index_tabs_navigation\"}\n                        &lt;div class=\"tab--navigation\"&gt;\n                            {block name=\"frontend_detail_index_tabs_navigation_inner\"}\n                                {block name=\"frontend_detail_index_related_similiar_tabs\"}\n\n                                    {* Tab navigation - Accessory products *}\n                                    {block name=\"frontend_detail_tabs_entry_related\"}\n                                        {if $sArticle.sRelatedArticles &amp;&amp; !$sArticle.crossbundlelook}\n                                            &lt;a href=\"#content--related-products\" title=\"{s namespace=\"frontend\/detail\/tabs\" name='DetailTabsAccessories'}{\/s}\" class=\"tab--link\"&gt;\n                                                {s namespace=\"frontend\/detail\/tabs\" name='DetailTabsAccessories'}{\/s}\n                                                &lt;span class=\"product--rating-count-wrapper\"&gt;\n                                                    &lt;span class=\"product--rating-count\"&gt;{$sArticle.sRelatedArticles|@count}&lt;\/span&gt;\n                                                &lt;\/span&gt;\n                                            &lt;\/a&gt;\n                                        {\/if}\n                                    {\/block}\n\n                                    {* Similar products *}\n                                    {block name=\"frontend_detail_index_recommendation_tabs_entry_similar_products\"}\n                                        {if count($sArticle.sSimilarArticles) &gt; 0}\n                                            &lt;a href=\"#content--similar-products\" title=\"{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationSimilarLabel\"}{\/s}\" class=\"tab--link\"&gt;{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationSimilarLabel\"}{\/s}&lt;\/a&gt;\n                                        {\/if}\n                                    {\/block}\n                                {\/block}\n\n                                {* Customer also bought *}\n                                {block name=\"frontend_detail_index_tabs_entry_also_bought\"}\n                                    {if $showAlsoBought}\n                                        &lt;a href=\"#content--also-bought\" title=\"{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationAlsoBoughtLabel\"}{\/s}\" class=\"tab--link\"&gt;{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationAlsoBoughtLabel\"}{\/s}&lt;\/a&gt;\n                                    {\/if}\n                                {\/block}\n\n                                {* Customer also viewed *}\n                                {block name=\"frontend_detail_index_tabs_entry_also_viewed\"}\n                                    {if $showAlsoViewed}\n                                        &lt;a href=\"#content--customer-viewed\" title=\"{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationAlsoViewedLabel\"}{\/s}\" class=\"tab--link\"&gt;{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationAlsoViewedLabel\"}{\/s}&lt;\/a&gt;\n                                    {\/if}\n                                {\/block}\n\n                                {* Related product streams *}\n                                {block name=\"frontend_detail_index_tabs_entry_related_product_streams\"}\n                                    {foreach $sArticle.relatedProductStreams as $key =&gt; $relatedProductStream}\n                                        &lt;a href=\"#content--related-product-streams-{$key}\" title=\"{$relatedProductStream.name}\" class=\"tab--link\"&gt;{$relatedProductStream.name}&lt;\/a&gt;\n                                    {\/foreach}\n                                {\/block}\n                            {\/block}\n                        &lt;\/div&gt;\n                    {\/block}\n\n                    {* Tab content container *}\n                    {block name=\"frontend_detail_index_outer_tabs\"}\n                        &lt;div class=\"tab--container-list\"&gt;\n                            {block name=\"frontend_detail_index_inner_tabs\"}\n                                {block name='frontend_detail_index_before_tabs'}{\/block}\n\n                                {* Accessory articles *}\n                                {block name=\"frontend_detail_index_tabs_related\"}\n                                    {if $sArticle.sRelatedArticles &amp;&amp; !$sArticle.crossbundlelook}\n                                        &lt;div class=\"tab--container\"&gt;\n                                            {block name=\"frontend_detail_index_tabs_related_inner\"}\n                                                &lt;div class=\"tab--header\"&gt;\n                                                    &lt;a href=\"#\" class=\"tab--title\" title=\"{s namespace=\"frontend\/detail\/tabs\" name='DetailTabsAccessories'}{\/s}\"&gt;\n                                                        {s namespace=\"frontend\/detail\/tabs\" name='DetailTabsAccessories'}{\/s}\n                                                        &lt;span class=\"product--rating-count-wrapper\"&gt;\n                                                            &lt;span class=\"product--rating-count\"&gt;{$sArticle.sRelatedArticles|@count}&lt;\/span&gt;\n                                                        &lt;\/span&gt;\n                                                    &lt;\/a&gt;\n                                                &lt;\/div&gt;\n                                                &lt;div class=\"tab--content content--related\"&gt;{include file=\"frontend\/detail\/tabs\/related.tpl\"}&lt;\/div&gt;\n                                            {\/block}\n                                        &lt;\/div&gt;\n                                    {\/if}\n                                {\/block}\n\n                                {* Similar products slider *}\n                                {if $sArticle.sSimilarArticles}\n                                    {block name=\"frontend_detail_index_tabs_similar\"}\n                                        &lt;div class=\"tab--container\"&gt;\n                                            {block name=\"frontend_detail_index_tabs_similar_inner\"}\n                                                &lt;div class=\"tab--header\"&gt;\n                                                    &lt;a href=\"#\" class=\"tab--title\" title=\"{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationSimilarLabel\"}{\/s}\"&gt;{s namespace=\"frontend\/detail\/index\" name=\"DetailRecommendationSimilarLabel\"}{\/s}&lt;\/a&gt;\n                                                &lt;\/div&gt;\n                                                &lt;div class=\"tab--content content--similar\"&gt;{include file='frontend\/detail\/tabs\/similar.tpl'}&lt;\/div&gt;\n                                            {\/block}\n                                        &lt;\/div&gt;\n                                    {\/block}\n                                {\/if}\n\n                                {* \"Customers bought also\" slider *}\n                                {if $showAlsoBought}\n                                    {block name=\"frontend_detail_index_tabs_also_bought\"}\n                                        &lt;div class=\"tab--container\"&gt;\n                                            {block name=\"frontend_detail_index_tabs_also_bought_inner\"}\n                                                &lt;div class=\"tab--header\"&gt;\n                                                    &lt;a href=\"#\" class=\"tab--title\" title=\"{s namespace=\"frontend\/detail\/index\" name='DetailRecommendationAlsoBoughtLabel'}{\/s}\"&gt;{s namespace=\"frontend\/detail\/index\" name='DetailRecommendationAlsoBoughtLabel'}{\/s}&lt;\/a&gt;\n                                                &lt;\/div&gt;\n                                                &lt;div class=\"tab--content content--also-bought\"&gt;{action module=widgets controller=recommendation action=bought articleId=$sArticle.articleID}&lt;\/div&gt;\n                                            {\/block}\n                                        &lt;\/div&gt;\n                                    {\/block}\n                                {\/if}\n\n                                {* \"Customers similar viewed\" slider *}\n                                {if $showAlsoViewed}\n                                    {block name=\"frontend_detail_index_tabs_also_viewed\"}\n                                        &lt;div class=\"tab--container\"&gt;\n                                            {block name=\"frontend_detail_index_tabs_also_viewed_inner\"}\n                                                &lt;div class=\"tab--header\"&gt;\n                                                    &lt;a href=\"#\" class=\"tab--title\" title=\"{s namespace=\"frontend\/detail\/index\" name='DetailRecommendationAlsoViewedLabel'}{\/s}\"&gt;{s namespace=\"frontend\/detail\/index\" name='DetailRecommendationAlsoViewedLabel'}{\/s}&lt;\/a&gt;\n                                                &lt;\/div&gt;\n                                                &lt;div class=\"tab--content content--also-viewed\"&gt;{action module=widgets controller=recommendation action=viewed articleId=$sArticle.articleID}&lt;\/div&gt;\n                                            {\/block}\n                                        &lt;\/div&gt;\n                                    {\/block}\n                                {\/if}\n\n                                {* Related product streams *}\n                                {foreach $sArticle.relatedProductStreams as $key =&gt; $relatedProductStream}\n                                    {block name=\"frontend_detail_index_tabs_related_product_streams\"}\n                                        &lt;div class=\"tab--container\" data-tab-id=\"productStreamSliderId-{$relatedProductStream.id}\"&gt;\n                                            {block name=\"frontend_detail_index_tabs_related_product_streams_inner\"}\n                                                &lt;div class=\"tab--header\"&gt;\n                                                    &lt;a href=\"#\" class=\"tab--title\" title=\"{$relatedProductStream.name}\"&gt;{$relatedProductStream.name}&lt;\/a&gt;\n                                                &lt;\/div&gt;\n                                                &lt;div class=\"tab--content content--related-product-streams-{$key}\"&gt;\n                                                    {include file='frontend\/detail\/tabs\/product_streams.tpl'}\n                                                &lt;\/div&gt;\n                                            {\/block}\n                                        &lt;\/div&gt;\n                                    {\/block}\n                                {\/foreach}\n\n                                {block name='frontend_detail_index_after_tabs'}{\/block}\n                            {\/block}\n                        &lt;\/div&gt;\n                    {\/block}\n                &lt;\/div&gt;\n            {\/block}\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n{\/block}\n<\/code><\/pre>\n\n\n\n<p><strong>Schritt 4: <\/strong>Erstellen Sie die Datei <strong>image.tpl<\/strong> im Detailverzeichnis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"510\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_7-3.png\" alt=\"\" class=\"wp-image-9084\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_7-3.png 297w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_7-3-175x300.png 175w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>Schreiben Sie diesen Code in die Datei <strong>image.tpl<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{extends file='parent:frontend\/detail\/image.tpl'}\n\n{block name=\"frontend_detail_image\"}\n  {if $sArticle.template == \"bay20Fullpic.tpl\"}\n      {* Product image - Gallery *}\n      {block name=\"frontend_detail_image_box\"}\n          {strip}\n          &lt;div class=\"image-slider--container{if !$sArticle.image} no--image{\/if}{if !count($sArticle.images)} no--thumbnails{\/if}\"&gt;\n              &lt;div class=\"image-slider--slide\"&gt;\n\n                  {block name='frontend_detail_image_default_image_slider_item'}\n                      &lt;div class=\"image--box image-slider--item\"&gt;\n\n                          {block name='frontend_detail_image_default_image_element'}\n\n                              {$alt = $sArticle.articleName|escape}\n\n                              {if $sArticle.image.description}\n                                  {$alt = $sArticle.image.description|escape}\n                              {\/if}\n\n                              &lt;span class=\"image--element\"\n                                    {if $sArticle.image}\n                                    data-img-large=\"{$sArticle.image.thumbnails&#91;2].source}\"\n                                    data-img-small=\"{$sArticle.image.thumbnails&#91;0].source}\"\n                                    data-img-original=\"{$sArticle.image.source}\"\n                                    {\/if}\n                                    data-alt=\"{$alt}\"&gt;\n\n                                  {block name='frontend_detail_image_default_image_media'}\n                                      &lt;span class=\"image--media\"&gt;\n                                          {if isset($sArticle.image.thumbnails)}\n                                              {block name='frontend_detail_image_default_picture_element'}\n                                                  &lt;img srcset=\"{$sArticle.image.thumbnails&#91;1].sourceSet}\" alt=\"{$alt}\" itemprop=\"image\" \/&gt;\n                                              {\/block}\n                                          {else}\n                                              {block name='frontend_detail_image_fallback'}\n                                                  &lt;img src=\"{link file='frontend\/_public\/src\/img\/no-picture.jpg'}\" alt=\"{$alt}\" itemprop=\"image\" \/&gt;\n                                              {\/block}\n                                          {\/if}\n                                      &lt;\/span&gt;\n                                  {\/block}\n                              &lt;\/span&gt;\n                          {\/block}\n                      &lt;\/div&gt;\n                  {\/block}\n\n                  {foreach $sArticle.images as $image}\n                      {block name='frontend_detail_images_image_slider_item'}\n                          &lt;div class=\"image--box image-slider--item\"&gt;\n\n                              {block name='frontend_detail_images_image_element'}\n\n                                  {$alt = $sArticle.articleName|escape}\n\n                                  {if $image.description}\n                                      {$alt = $image.description|escape}\n                                  {\/if}\n\n                                  &lt;span class=\"image--element\"\n                                        data-img-large=\"{$image.thumbnails&#91;2].source}\"\n                                        data-img-small=\"{$image.thumbnails&#91;0].source}\"\n                                        data-img-original=\"{$image.source}\"\n                                        data-alt=\"{$alt}\"&gt;\n\n                                      {block name='frontend_detail_images_image_media'}\n                                          &lt;span class=\"image--media\"&gt;\n                                              {if isset($image.thumbnails)}\n                                                  {block name='frontend_detail_images_picture_element'}\n                                                      &lt;img srcset=\"{$image.thumbnails&#91;1].sourceSet}\" alt=\"{$alt}\" itemprop=\"image\" \/&gt;\n                                                  {\/block}\n                                              {else}\n                                                  {block name='frontend_detail_images_fallback'}\n                                                      &lt;img src=\"{link file='frontend\/_public\/src\/img\/no-picture.jpg'}\" alt=\"{$alt}\" itemprop=\"image\" \/&gt;\n                                                  {\/block}\n                                              {\/if}\n                                          &lt;\/span&gt;\n                                      {\/block}\n                                  &lt;\/span&gt;\n                              {\/block}\n                          &lt;\/div&gt;\n                      {\/block}\n                  {\/foreach}\n              &lt;\/div&gt;\n          &lt;\/div&gt;\n          {\/strip}\n      {\/block}\n\n      {* Product image - Dot navigation *}\n      {block name='frontend_detail_image_box_dots'}\n          {if $sArticle.images}\n              &lt;div class=\"image--dots image-slider--dots panel--dot-nav\"&gt;\n                  &lt;a href=\"#\" class=\"dot--link\"&gt; &lt;\/a&gt;\n                  {foreach $sArticle.images as $image}\n                      &lt;a href=\"#\" class=\"dot--link\"&gt; &lt;\/a&gt;\n                  {\/foreach}\n              &lt;\/div&gt;\n          {\/if}\n      {\/block}\n\n      {* Product image - Thumbnails *}\n      {block name='frontend_detail_image_thumbs'}\n          {include file=\"frontend\/detail\/images.tpl\"}\n      {\/block}\n\n  {else}\n  {$smarty.block.parent}\n  {\/if}\n{\/block}<\/code><\/pre>\n\n\n\n<p><strong>Schritt 5: <\/strong>Erstellen Sie die Datei<strong> detail.less<\/strong> im Verzeichnis<strong> less&gt;_modules.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_8-3.png\" alt=\"\" class=\"wp-image-9085\" width=\"315\" height=\"448\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_8-3.png 298w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_8-3-211x300.png 211w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><\/figure>\n\n\n\n<p>Schreiben Sie diesen Code in die Datei <strong>detail.less<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   .bay20--detail-fullpic{\n    .product--detail-upper.block-group{\n      text-align: -webkit-center;\n      .product--image-container.image-slider.product--image-zoom{\n        width: 100%;\n        margin:4%;\n        margin-left: 0;\n\n        .js--img-zoom--flyout{\n          display: none !important;\n        }\n        .js--img-zoom--lens{\n          display: none !important;\n        }\n\n        .image--thumbnails.image-slider--thumbnails{\n          width: 100%;\n          height: 70px;\n          margin: 10px;\n          text-align: -webkit-center;\n\n          .image-slider--thumbnails-slide{\n            right: 0px;\n            height: 70px;\n            .thumbnail--link{\n              margin-right: 20px;\n              margin-bottom: 0;\n              display: inline-block;\n            }\n          }\n        }\n\n        .image-slider--slide{\n          .image--element{\n            span img{\n              height: 100%;\n            }\n          }\n        }\n\n        .image--dots.image-slider--dots.panel--dot-nav{\n          padding: 0;\n          margin-top: 10px;\n        }\n\n        .image-slider--container{\n          width: 100%;\n\n        }\n      }\n\n      .product--buybox.block{\n          float: inherit;\n\n          .product--price.price--unit{\n            display: none;\n          }\n          .product--tax{\n            display: none;\n          }\n          .product--delivery{\n            display: none;\n          }\n          .product--actions{\n            text-align: -webkit-center;\n            .action--form{\n              float:none;\n              display: inline-block;\n            }\n          }\n\n          .base-info--entry{\n            text-align: -webkit-center;\n            &amp;.entry--sku{\n              left: -5%;\n              position: relative;\n            }\n          }\n\n      }\n    }\n  }<\/code><\/pre>\n\n\n\n<p><strong>Schritt 6: <\/strong>Importieren Sie die Datei<strong> detail.less <\/strong>in die Datei <strong>all.less.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"420\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_9-2.png\" alt=\"\" class=\"wp-image-9086\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_9-2.png 291w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_9-2-208x300.png 208w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure>\n\n\n\n<p>Schreiben Sie dies in <strong>all.less<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import \"_modules\/detail\";<\/code><\/pre>\n\n\n\n<p><strong>Hinweis:<\/strong> Speichern Sie die <strong>Codes<\/strong>, l\u00f6schen Sie den Cache, kompilieren Sie das Theme und schon k\u00f6nnen wir unser neues Design betrachten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-980x531.png\" alt=\"\" class=\"wp-image-9087\" width=\"701\" height=\"380\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-980x531.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-300x163.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-800x433.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-768x416.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5-1000x542.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/07\/Screenshot_4-5.png 1015w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n\n\n\n<p><strong>Bitte kontaktieren Sie uns unter <strong><a href=\"mailto:manish@bay20.com\">manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter <a href=\"https:\/\/api.whatsapp.com\/send?phone=+918800519180&amp;text=Hi,%20I%20contacted%20you%20through%20your%20website.\" target=\"_blank\" rel=\"noreferrer noopener\">+91-8800519180<\/a> an, wenn Sie Unterst\u00fctzung in Bezug auf Shopware 5 und Shopware 6 ben\u00f6tigen. Sie k\u00f6nnen auch die <strong><a href=\"https:\/\/www.bay20.com\/shopware-development\/\">Shopware 5<\/a><a href=\"https:\/\/www.bay20.com\/de\/shopware-entwicklungsunternehmen\/\"> <\/a><a href=\"https:\/\/www.bay20.com\/shopware-development\/\"><strong>Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als erstes m\u00fcssen Sie ein benutzerdefiniertes Thema erstellen. Um ein benutzerdefiniertes Thema zu erstellen, klicken Sie auf diesen Link Um Ihre eigene Detailansicht in shopware 5 zu erstellen, gehen Sie wie folgt vor:- Unsere detaillierte Seite sieht wie folgt aus. Hinweis: Wir werden die Eltern tpl-Dateien in unser benutzerdefiniertes Thema erweitern. Benutzerdefinierte Verzeichnis ist Thema, [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":9077,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,116],"tags":[],"class_list":["post-9076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=9076"}],"version-history":[{"count":14,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9076\/revisions"}],"predecessor-version":[{"id":17272,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9076\/revisions\/17272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/9077"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=9076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=9076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=9076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}