Add new section from Dawn Theme to Motion Theme

itsmebob
Excursionist
21 0 7

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>

Replies 3 (3)
itsmebob
Excursionist
21 0 7

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
Shopify Partner
90 8 14

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

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.

BSS-Commerce
Shopify Expert
3477 462 523

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development