Con los siguientes pasos obtén la siguiente sección para tu tema, recuerda que el código se encuentra al final de todos los pasos y puedes copiar con un solo click.
Paso 1
Dirígete a Temas dentro de Tienda Online
Paso 2
Duplica tu tema Dawn por seguridad, en caso de que se generé un error tendrás un duplicado de respaldo.
Paso 3
Ya con tu tema duplicado, da click en más opciones (…) y selecciona Editar Código
Paso 4
En el editor de código que se abre, del lado izquierdo se tiene que hacer click en sections.
Paso 5
Ya con el menú desplegado, hay que dar click en nuevo archivo.
Paso 6
Escribe el nombre de la sección de la siguiente manera, recuerda al final colocar la extensión del archivo para que funcione .liquid
apc-threadshero.liquid
Paso 7
Copia y pega el siguiente código en el espacio correspondiente. (El código lo encuentras al final de todos los pasos)
Paso 8
Guarda el archivo una vez que ya tenga copiado el código.
Paso 9
Da click en el icono de Shopify del menú, y después en la opción de Customize theme.
Paso 10
Dentro de la edición del tema agrega una nueva sección y busca con las letras PP, ya puedes agregar tu nueva sección. Dentro de la sección encontrarás todas las opciones para configurar la sección.
En algunas ocasiones la sección no la ves hasta que guardas los cambios.
Paso 11
Recuerda que estás trabajando en una copia del tema, deberás publicar el tema con los cambios, para que sean visibles en tu web.
FIN DE LOS PASOS
Código
A continuación puedes copiar el código de la sección y copiarlo en tu tema de Shopify.
Si das click en el desplegable, podrás ver el código completo o da click en el botón para copiar rápidamente.
CLICK PARA VER CÓDIGO
{% comment %}
----------------------------------------------------------------
Derechos de autor © 2025 Ecommerce a Puerta Cerrada. Todos los derechos reservados.
Este código, y cualquier parte del mismo, es propiedad exclusiva de Ecommerce a Puerta Cerrada.
Se prohíbe estrictamente la copia, modificación, distribución o uso no autorizado.
Cualquier infracción será perseguida conforme a la legislación aplicable en México.
Para consultas o permisos, escribe a: ecommpuertacerrada@gmail.com
----------------------------------------------------------------
{% endcomment %}
{% capture section_content %}
{% assign font_size = section.settings.font_size %}
{% assign font_color = section.settings.font_color %}
<style>
.cs-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.cs-banner-image {
width: 100%;
object-fit: cover;
}
.cs-banner-image--desktop {
display: none;
}
@media screen and (min-width: 750px) {
.cs-banner-image--desktop {
display: block;
}
.cs-banner-image--mobile {
display: none;
}
}
.cs-banner-link {
position: absolute;
top: 30px;
left: 30px;
text-decoration: none;
color: black;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: calc(var(--font-size) * 0.75);
color: var(--font-color);
}
@media screen and (min-width: 750px) {
.cs-banner-link {
top: 45px;
left: 45px;
font-size: var(--font-size);
}
}
.cs-banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.arrow {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
</style>
<div
class="cs-banner"
style="
--font-size: {{ font_size }}px;
--font-color: {{ font_color }};
"
>
{% assign image = section.settings.image %}
<img
class="cs-banner-image cs-banner-image--desktop"
src="{{ image | img_url: '500x' }}"
srcset="
{{ image | img_url: '500x' }} 500w,
{{ image | img_url: '800x' }} 800w,
{{ image | img_url: '1200x' }} 1200w,
{{ image | img_url: '1600x' }} 1600w,
{{ image | img_url: '2000x' }} 2000w,
{{ image | img_url: 'master' }} 2400w
"
alt="{{ image.alt }}"
style="aspect-ratio: {{ image.aspect_ratio }};"
>
{% comment %} mobile: {% endcomment %}
{% if section.settings.image_mobile != blank %}
{% assign image = section.settings.image_mobile %}
{% endif %}
<img
class="cs-banner-image cs-banner-image--mobile"
src="{{ image | img_url: '500x' }}"
srcset="
{{ image | img_url: '400x' }} 400w,
{{ image | img_url: '500x' }} 500w,
{{ image | img_url: '800x' }} 800w,
{{ image | img_url: 'master' }} 1000w
"
alt="{{ image.alt }}"
style="aspect-ratio: {{ image.aspect_ratio }};"
>
{% comment %} Overlay: {% endcomment %}
<div
class="cs-banner-overlay"
style="background-color: rgba(0, 0, 0, {{ section.settings.overlay_opacity }}); display: block;"
></div>
<a class="cs-banner-link" href="{{ section.settings.link }}">
{{ section.settings.link_text }}
{% comment %} icon: {% endcomment %}
{% if section.settings.icon != blank %}
<img
style="width: 24px; height: 24px;"
src="{{ section.settings.icon | img_url: '30x' }}"
alt="{{ section.settings.icon.alt }}"
>
{% endif %}
<i class="arrow right"></i></a>
</div>
{% endcapture %}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div style="background-color:{{section.settings.background-color}};">
<div class="section-{{ section.id }}-padding">
<div>{{ section_content }}</div>
</div>
</div>
{% schema %}
{
"name": "PP - Threads Hero",
"class": "section",
"tag": "section",
"presets": [
{
"name": "PP - Threads Hero"
}
],
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Escritorio",
"info": "Medida Ideal: 2000x1160px"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile",
"info": "Medida Ideal: 786x1172px"
},
{
"type": "image_picker",
"id": "icon",
"label": "Icono",
"info": "Medida Ideal: 24x24px"
},
{
"type": "text",
"id": "link_text",
"label": "Texto del Link",
"default": "Comprar"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "range",
"id": "font_size",
"label": "Tamaño Fuente",
"min": 12,
"max": 40,
"step": 1,
"default": 20
},
{
"type": "color",
"id": "font_color",
"label": "Color Fuente",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacidad Overlay",
"min": 0,
"max": 1,
"step": 0.1,
"default": 0
},
{
"type": "header",
"content": "Color de Fondo"
},
{
"type": "color",
"label": "Color de la sección",
"id": "background-color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Relleno de Sección"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Superior",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Inferior",
"default": 36
}
]
}
{% endschema %}