Shopware 5插入HTML/CSS代码元素致购物世界异常求助

Hey there! Let's break down why your custom HTML/CSS is messing up your Shopping World, and walk through fixes step by step:

1. Incomplete CSS Code #

Your snippet cuts off mid-declaration:

ul li#active a { border-bottom: 4px ...

This invalid CSS will break the entire stylesheet parsing, throwing off Shopware's default styling and your custom styles alike. First, finish this line with a valid value, e.g.:

ul li#active a { border-bottom: 4px solid #000; /* Add your desired color */ }

2. Fixed Positioning & Hardcoded Offsets #

Using position: fixed with a hardcoded left: 497px is a big culprit here:

• Fixed positioning pulls the element out of the normal document flow, so it can overlap Shopware's native UI elements (like the main navigation or cart icon).
• The hardcoded left value will only look correct on one screen size—on smaller or larger displays, it'll be completely misaligned.

Fix: Replace the hardcoded left offset with a responsive centering trick, and reconsider if fixed positioning is necessary:

ul {
  list-style: none;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 107px;
  left: 50%;
  transform: translateX(-50%); /* Centers the element regardless of screen size */
}

If you don't need the nav to stay fixed at the top, switch to position: relative instead to keep it within the Shopping World's container.

3. Global Style Pollution #

Your CSS uses generic selectors like ul, ul li, and ul a—these will override all list styles across your entire Shopware store, not just the ones in your Shopping World.

Fix: Add a unique class to your list to scope the styles:

Updated HTML: #

<ul class="custom-shopping-nav">
  <!-- Your list items here -->
</ul>

Updated CSS: #

.custom-shopping-nav {
  list-style: none;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 107px;
  left: 50%;
  transform: translateX(-50%);
}
.custom-shopping-nav li {
  float: left;
  padding-bottom: 0;
}
.custom-shopping-nav a {
  display: block;
  text-align: center;
  color: black;
  text-decoration: none;
  font-family: 'couture', serif;
  padding: 6px 23px;
  background: white;
  font-size: 12pt;
}
.custom-shopping-nav li#active a {
  border-bottom: 4px solid #000;
}

4. Duplicate HTML Structure #

You're inserting a full <html> and <head> tag set into the Shopping World—but Shopware already has its own root HTML/head structure. Duplicating these tags will corrupt the page's DOM hierarchy, leading to unpredictable layout breaks.

Fix: Remove the outer wrapper tags entirely. Only keep your custom list HTML, and place the CSS in Shopware's dedicated custom CSS areas:

• Either in your theme's "Custom CSS" settings (under Configuration > Theme Manager > Your Theme > Custom CSS)
• Or in the Shopping World element's inline CSS field (if available)

内容的提问来源于stack exchange，提问作者CleanerCo