Shopify Narrative主题滚动视差效果实现及自定义区块技术问询

Hey Caroline, let’s break down how to fix your Shopify parallax issues and build that custom contact form block— I’ve walked through these exact steps for several store owners, so let’s get started!

Most Shopify themes let you tweak the header via the header.liquid section or theme.liquid file. Here’s a straightforward approach:

Step 1: Update Your Header Container #

First, locate the main header wrapper in your theme’s code (usually something like <header class="site-header">). Add a custom class to target it for parallax styling:

<header class="site-header parallax-header">
  <!-- Existing header content -->
</header>

Step 2: Add Parallax CSS #

Add this CSS to your theme’s theme.css file, or use the Custom CSS field in your theme’s customizer:

.parallax-header {
  background-image: url('{{ section.settings.header_bg_image | img_url: 'master' }}'); /* Pulls image from theme settings (we’ll add this next) */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 80px 0; /* Adjust padding to fit your header content */
}

/* Disable fixed background on mobile (avoids compatibility bugs) */
@media (max-width: 767px) {
  .parallax-header {
    background-attachment: scroll;
  }
}

Step 3: Add a Background Image Setting (Optional but Recommended) #

To let you easily swap the header image from the Shopify admin, add this schema to your header.liquid section:

{% schema %}
{
  "settings": [
    {
      "type": "image_picker",
      "id": "header_bg_image",
      "label": "Header Parallax Background Image"
    }
  ]
}
{% endschema %}

Now you can upload/change the parallax image directly from Online Store > Themes > Customize > Header.

Let’s build a reusable section you can add to any page in your theme:

Step 1: Create a New Section File #

In your Shopify theme editor, add a new section named parallax-contact-form.liquid and paste this code:

<div class="parallax-contact-section">
  <!-- Parallax Background Layer -->
  <div class="parallax-bg"></div>
  
  <!-- Contact Form Container (foreground) -->
  <div class="contact-form-wrapper">
    {% form 'contact' %}
      {% if form.posted_successfully? %}
        <div class="form-alert success">
          {{ 'general.contact.form.success' | t }}
        </div>
      {% endif %}
      {% if form.errors %}
        <div class="form-alert error">
          {{ 'general.contact.form.error' | t }}
        </div>
      {% endif %}

      <div class="form-field">
        <label for="contact-name">{{ 'general.contact.form.name' | t }}</label>
        <input type="text" id="contact-name" name="contact[Name]" required>
      </div>
      <div class="form-field">
        <label for="contact-email">{{ 'general.contact.form.email' | t }}</label>
        <input type="email" id="contact-email" name="contact[Email]" required>
      </div>
      <div class="form-field">
        <label for="contact-message">{{ 'general.contact.form.message' | t }}</label>
        <textarea id="contact-message" name="contact[Body]" rows="5" required></textarea>
      </div>
      <button type="submit" class="form-submit-btn">{{ 'general.contact.form.submit' | t }}</button>
    {% endform %}
  </div>
</div>

{% schema %}
{
  "name": "Parallax Contact Form",
  "settings": [
    {
      "type": "image_picker",
      "id": "parallax_bg",
      "label": "Parallax Background Image"
    },
    {
      "type": "range",
      "id": "bg_overlay",
      "label": "Background Overlay Opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "default": 0.6
    }
  ]
}
{% endschema %}

{% stylesheet %}
.parallax-contact-section {
  position: relative;
  height: 80vh; /* Adjust height to fit your layout */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%; /* Makes parallax scroll effect more noticeable */
  background-image: url('{{ section.settings.parallax_bg | img_url: 'master' }}');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  opacity: {{ section.settings.bg_overlay }};
  z-index: 0;
}

.contact-form-wrapper {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent background for readability */
  padding: 40px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 16px;
}

.form-submit-btn {
  background: #222;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.form-submit-btn:hover {
  background: #000;
}

.form-alert {
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.form-alert.success {
  background: #e8f5e9;
  color: #2e7d32;
}

.form-alert.error {
  background: #ffebee;
  color: #c62828;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .parallax-bg {
    background-attachment: scroll;
  }
  .contact-form-wrapper {
    padding: 25px;
  }
}
{% endstylesheet %}

Step 2: Add the Block to Your Page #

Go to Online Store > Themes > Customize, navigate to the page where you want the form, click Add section, and select "Parallax Contact Form" from the list. You’ll be able to upload a background image and adjust the overlay opacity right from the customizer.

Quick Tips for Success #

• Use optimized images (compress them first!) to avoid slowing down your store.
• Test the parallax effect on mobile—some older browsers don’t support background-attachment: fixed, which is why we added a mobile fallback.
• If your theme uses a framework like Slate or has strict CSS rules, you might need to tweak selectors to match your theme’s styling.

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