Add new section from Dawn Theme to Motion Theme

[itsmebob]

Hello, I would like to take a Dawn Section to my Motion Theme Section, but I don't understand why it's not working, I'm creating a new section template and doing it with chatgpt, but it's not working, if someone could help me out, would be appreciated, here's the code I would like to use:

<div id="shopify-section-template--18406068879671__58cee07b-ef4a-431a-bf08-60cd3ab07e15" class="shopify-section potential"><div class="page-width">
<div class="potential-wrapper">
<div class="potential__container">

<div>
<video playsinline="" controls="" class="potential__video" poster="PASTE_URL_HERE>
<source src="SOURCE_URL_HERE">
Your browser does not support the video tag.
</video>
</div>

<div>
<h3 class="potential__title">PASTE_HEADLINE_HERE</h3>
<div class="progress-container">
<div class="progress progress--one">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">95</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress-content">
<p class="progress-text">PASTE_PARAGRAPH_HERE</p>
</div>
</div>
<div class="progress-container">
<div class="progress progress--two">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">93</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress-content">
<p class="progress-text">PASTE_PARAGRAPH_HERE</p>
</div>
</div>

<div class="img-container">
<img loading="lazy" src="PASTE_IMG_HERE">
</div>

</div>
</div>
</div>
</div>

</div>

[itsmebob]

Could you maybe help me with that?

I've got something like this out of chatgpt:

{% schema %}
{
"name": "Custom Potential Section",
"class": "index-section",
"settings": [
],
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "text",
"id": "poster_url",
"label": "Poster URL",
"default": "image_url" },
{
"type": "url",
"id": "mp4_url",
"label": "MP4 URL"
}
]
},
{
"type": "text",
"name": "Title",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "text_here"
}
]
},
{
"type": "custom progress bar",
"name": " Progress Bar 1",
"settings": [
{
"type": "text",
"id": "percentage_1",
"label": "Percentage",
"default": "95"
},
{
"type": "text",
"id": "text_1",
"label": "Text",
"default": "text_here"
}
]
},
{
"type": "progress_bar",
"name": "Progress Bar 2",
"settings": [
{
"type": "text",
"id": "percentage_2",
"label": "Percentage",
"default": "93"
},
{
"type": "text",
"id": "text_2",
"label": "Text",
"default": "text_here"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "url",
"id": "image_url",
"label": "Image URL",
"default": "image_url"
}
]
}
],
"presets": [
{
"name": "Custom Potential Section",
"category": "Custom",
"blocks": [
{
"type": "video",
"data": {
"poster_url": "{{ settings.poster_url }}",
"mp4_url": "{{ settings.mp4_url }}"
}
},
{
"type": "text",
"data": {
"title": "{{ settings.title }}"
}
},
{
"type": "progress_bar",
"data": {
"percentage": "{{ settings.percentage_1 }}",
"text": "{{ settings.text_1 }}"
}
},
{
"type": "progress_bar",
"data": {
"percentage": "{{ settings.percentage_2 }}",
"text": "{{ settings.text_2 }}"
}
},
{
"type": "image",
"data": {
"image_url": "{{ settings.image_url }}"
}
}
]
}
]
}
{% endschema %}

<div id="shopify-section-template--18406068879671__58cee07b-ef4a-431a-bf08-60cd3ab07e15" class="shopify-section potential">
<div class="page-width">
<div class="potential-wrapper">
<div class="potential__container">
<div>
<video playsinline="" controls="" class="potential__video" poster="video_here">
<source src="source_here" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div>
<h3 class="potential__title">text_here</h3>
<div class="progress-container">
<div class="progress progress--one">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">95</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress-content">
<p class="progress-text">text_here</p>
</div>
</div>
<div class="progress-container">
<div class="progress progress--two">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">93</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress-content">
<p class="progress-text">text_here</p>
</div>
</div>
<div class="img-container">
<img loading="lazy" src="image_here?v=1675967059" class="potential__img">
</div>
</div>
</div>
</div>
</div>
</div>

[Jack_Khan_Baba]

it is not working because the lot of difference in every theme if you want to add a section you have need to create your own one instead of copiyng from another theme.
you can only transfer those section that you create not those one that theme provide . hope you get it

[BSS-Commerce]

Hi @itsmebob 

We're not sure what section you're going to add to the Motion Theme, but there are three things you should keep in mind:

+ Because each theme has a different layout and class structure, it is not possible to simply copy a section from one theme to another.

+ Each section will usually come with a CSS file or style directly in that file to display the interface. So if you add a new section, you need to style that section.

+ You need to specify exactly where you want to add and check if the added section affects the original sections of the theme.

In your case, we suggest you can find a Shopify expert to best assist you.