Shopify自定义文生图API集成页面：局部元素居中布局修复请求（不影响全局样式）

我太懂你这种头疼了——在Shopify里改自定义页面样式，稍不注意就把全局的logo、导航都搞乱，Flexbox一不小心就“接管”整个页面，完全不是想要的效果！我帮你调整了代码，完美实现你要的需求：标题和描述居中堆叠、输入框/结果框下方均匀居中，而且绝对不会影响原来的页面头部样式。

核心需求回顾 #

• 标题「AI design generator」和描述「type your design ideas here to have AI bring them to life!」居中堆叠，位置在导航下方
• 输入容器和图片结果容器在标题下方居中，保持均匀间距
• 完全不改动原有页面的logo、导航栏样式

修复后的完整代码 #

<!-- 把所有自定义内容套在独立的wrapper里，隔离全局样式 -->
<div class="ai-generator-wrapper">
  <div class="header">
    <h1 class="title">AI design generator</h1>
    <p class="description">type your design ideas here to have AI bring them to life!</p>
  </div>

  <div class="container">
    <div class="input-container">
      <textarea id="designInput" placeholder="Describe your design idea here... (Shift+Enter for new lines)" rows="6"></textarea>
      <button class="generate-btn" onclick="generateImage()">✨ Generate Design</button>
    </div>
    <div class="output-container">
      <div id="imageFrame" class="image-frame">
        <div class="placeholder-content">
          <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="#662d91" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14,2 14,8 20,8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
            <polyline points="10,9 9,9 8,9"/>
          </svg>
          <p class="placeholder-text">Enter a design idea and click Generate!</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* 只对wrapper内部的元素生效，完全隔离全局样式 */
.ai-generator-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0; /* 顶部留间距，和导航栏分开 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center;
  margin-bottom: 50px;
  width: 100%;
}

.title {
  font-size: 4.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #662d91, #8e4ec6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 25px;
  letter-spacing: -2px;
}

.description {
  font-size: 1.6rem;
  color: #555;
  font-weight: 700;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#designInput {
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1.1rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s ease;
}

#designInput:focus {
  outline: none;
  border-color: #662d91;
  box-shadow: 0 0 0 3px rgba(102, 45, 145, 0.1);
}

.generate-btn {
  padding: 14px 32px;
  background: linear-gradient(135deg, #662d91, #8e4ec6);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 45, 145, 0.3);
}

.generate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.image-frame {
  width: 100%;
  min-height: 400px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.placeholder-content {
  text-align: center;
  padding: 40px;
}

.placeholder-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.placeholder-text {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.5;
}

.loading {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #662d91;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 全局样式重置只作用于wrapper内部，避免影响全局 */
.ai-generator-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<script>
async function generateImage() {
  const input = document.getElementById('designInput');
  const frame = document.getElementById('imageFrame');
  const btn = document.querySelector('.generate-btn');
  const prompt = input.value.trim();

  if (!prompt) {
    alert('Please enter a design description first!');
    return;
  }

  // Update button state
  btn.innerHTML = 'Generating...';
  btn.disabled = true;

  // Show loading state
  frame.innerHTML = `
    <div class="placeholder-content">
      <div class="loading"></div>
      <p class="placeholder-text">Creating your design...</p>
    </div>
  `;

  try {
    // TODO: Replace this with actual Google Gemini 2.5 API call
    // This is a placeholder for the API integration
    // Simulate API call delay
    await new Promise(resolve => setTimeout(resolve, 3000));

    // For now, show a placeholder message
    frame.innerHTML = `
      <div class="placeholder-content">
        <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="#662d91" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14,2 14,8 20,8"/>
          <line x1="16" y1="13" x2="8" y2="13"/>
          <line x1="16" y1="17" x2="8" y2="17"/>
          <polyline points="10,9 9,9 8,9"/>
        </svg>
        <p class="placeholder-text">Ready for Google Gemini 2.5 API integration<br/>
        <small style="color: #999; font-size: 0.9rem;">Your prompt: "${prompt}"</small></p>
      </div>
    `;

    /* // Uncomment and modify this section when integrating with Google Gemini 2.5 API
    const response = await fetch('/api/generate-image', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt: prompt })
    });

    if (response.ok) {
      const data = await response.json();
      frame.innerHTML = `<img src="${data.imageUrl}" alt="Generated design" class="generated-image">`;
    } else {
      throw new Error('Failed to generate image');
    }
    */
  } catch (error) {
    frame.innerHTML = `
      <div class="placeholder-content">
        <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="#ff6b6b" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <line x1="15" y1="9" x2="9" y2="15"/>
          <line x1="9" y1="9" x2="15" y2="15"/>
        </svg>
        <p class="placeholder-text">Failed to generate design. Please try again.</p>
      </div>
    `;
    console.error('Error generating image:', error);
  } finally {
    // Reset button state
    btn.innerHTML = '✨ Generate Design';
    btn.disabled = false;
  }
}

// Allow Enter key to generate (with Shift+Enter for new lines)
document.getElementById('designInput').addEventListener('keydown', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    generateImage();
  }
});
</script>

关键修改说明 #

1. 隔离局部样式：所有自定义内容都放在.ai-generator-wrapper容器里，所有布局样式只作用于这个容器内部，完全不会影响Shopify的全局header、导航栏。
2. 移除全局Flex污染：删掉了原来给body加的Flexbox设置，改成只在wrapper内部用Flex做局部居中布局。
3. 优化标题/描述布局：.header设置text-align: center，确保标题和描述自动堆叠居中，不需要额外的Flex设置。
4. 稳定的Grid布局：.container的Grid布局现在只在wrapper内部生效，两个输入/结果框会在1200px的最大宽度内均匀分布，自动适配不同屏幕。
5. 修复转义标签：把原来代码里的<转义字符改回正常的<>，确保HTML元素能正确渲染。

这样设置后，你把代码放到Shopify的自定义页面里，就能完美实现你要的效果啦！

内容来源于stack exchange