How to add a video section with text box on product page?

[VisarK]

Hello everyone,in homepage i have a section called large video with text box,so in product page doesnt have this section.How can i add there i need it in product page?

 

 

 

[mageplaza-cs]

Hi @VisarK ,

I am from Mageplaza - Shopify solution expert.

You can follow these steps to create a new section as desired:

1. Create a New Section for the Video and Text
    - In your Shopify admin, go to Online Store > Themes.
    - Find your Dawn theme and click Edit Code.
    - In the Sections folder, click Add a new section.
    - Name it: video-text-section
    - Replace the default code with the following:

{% schema %}
{
  "name": "Video with Text",
  "settings": [
    {
      "type": "video_url",
      "id": "video_url",
      "label": "Video URL",
      "accept": ["youtube", "vimeo"]
    },
    {
      "type": "textarea",
      "id": "text_content",
      "label": "Text Content",
      "default": "Enter your text here..."
    }
  ],
  "presets": [
    {
      "name": "Video with Text"
    }
  ]
}
{% endschema %}

<div class="video-text-section">
  <div class="video-container">
    {% if section.settings.video_url != blank %}
      <iframe 
        src="{{ section.settings.video_url | replace: 'watch?v=', 'embed/' }}" 
        frameborder="0" 
        allowfullscreen>
      </iframe>
    {% endif %}
  </div>
  <div class="text-box">
    <p>{{ section.settings.text_content }}</p>
  </div>
</div>

<style>
.video-text-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.video-container iframe {
  width: 100%;
  max-width: 800px;
  height: 450px;
}
.text-box {
  margin-top: 15px;
  font-size: 16px;
}
</style>

2. Add the Section to the Product Page
    - In Online Store > Themes, click Customize.
    - Navigate to the Product page template.
    - Click Add Section and find the Video with Text section.
    - Add it, enter a YouTube or Vimeo link, and edit the text.
    - Save the changes.

Please let me know if it works as expected!

Best regards

[VisarK]

Hello @mageplaza-cs  im using impulse theme.Can i use this code also for my theme and does it looks like the section i send the image before?