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-imagenesscrolling.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 %}
{%- liquid
assign padding_horizontal = section.settings.padding_horizontal
assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
assign padding_top = section.settings.padding_top
assign padding_bottom = section.settings.padding_bottom
assign border_color = section.settings.border_color
assign border_thickness = section.settings.border_thickness
assign margin_top = section.settings.margin_top
assign margin_bottom = section.settings.margin_bottom
assign background_color = section.settings.background_color
assign background_gradient = section.settings.background_gradient
assign content_width = section.settings.content_width
assign full_width = section.settings.full_width
assign lazy = section.settings.lazy
assign heading = section.settings.heading
assign heading_size = section.settings.heading_size
assign heading_custom = section.settings.heading_custom
assign heading_color = section.settings.heading_color
assign heading_font = section.settings.heading_font
assign heading_height = section.settings.heading_height
assign heading_letter = section.settings.heading_letter
assign heading_mt = section.settings.heading_mt
assign heading_mb = section.settings.heading_mb
assign heading_align = section.settings.heading_align
assign image_height_desktop = section.settings.image_height_desktop
assign image_height_mobile = section.settings.image_height_mobile
assign image_radius = section.settings.image_radius
assign image_width_desktop = section.settings.image_width_desktop
assign image_width_mobile = section.settings.image_width_mobile
assign slider_speed = section.settings.slider_speed
assign slider_mt = section.settings.slider_mt
assign slider_direction = section.settings.slider_direction
assign pause_hover = section.settings.pause_hover
assign slider_gap_mobile = section.settings.slider_gap_mobile
assign slider_gap = section.settings.slider_gap
assign use_content = section.settings.use_content
assign use_shadow = section.settings.use_shadow
assign content_padding_vertical = section.settings.content_padding_vertical
assign content_padding_horizontal = section.settings.content_padding_horizontal
assign content_radius = section.settings.content_radius
assign content_distance = section.settings.content_distance
assign content_bg = section.settings.content_bg
assign content_max_width = section.settings.content_max_width
assign content_max_width_mobile = section.settings.content_max_width_mobile
assign content_position = section.settings.content_position
assign content_border_thickness = section.settings.content_border_thickness
assign content_border_color = section.settings.content_border_color
assign text = section.settings.text
assign text_custom = section.settings.text_custom
assign text_font = section.settings.text_font
assign text_size = section.settings.text_size
assign text_height = section.settings.text_height
assign text_color = section.settings.text_color
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ text_font | font_face: font_display: 'swap' }}
.section-{{ section.id }} {
border-top: solid {{ border_color }} {{ border_thickness }}px;
border-bottom: solid {{ border_color }} {{ border_thickness }}px;
margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-settings {
{% unless full_width %}
max-width: {{ content_width }}rem;
{% endunless %}
margin: 0 auto;
padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
padding-left: {{ padding_horizontal_mobile }}rem;
padding-right: {{ padding_horizontal_mobile }}rem;
position: relative;
}
.scrolling-image-heading-{{ section.id }} > * {
margin: 0;
font-size: {{ heading_size | times: 0.85 }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
text-transform: unset;
text-align: {{ heading_align }};
}
.scrolling-image-slider-{{ section.id }} {
margin-top: {{ slider_mt | times: 0.75 | round: 0 }}px;
}
.scrolling-image-slide-{{ section.id }} {
height: {{ image_height_mobile }}px;
width: 100%;
flex: 0 0 {{ image_width_mobile }}px;
}
.scrolling-image-slide-{{ section.id }} img,
.scrolling-image-slide-{{ section.id }} svg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: {{ image_radius }}px;
}
.scrolling-image-slide-{{ section.id }} svg {
background-color: #a0a0a0;
}
.scrolling-image-content-{{ section.id }} {
max-width: {{ content_max_width_mobile }}px;
margin-top: -{{ content_distance | times: 0.5 | round: 0 }}px;
padding: {{ content_padding_vertical | times: 0.75 | round: 0 }}px {{ content_padding_horizontal | times: 0.75 | round: 0 }}px;
border-radius: {{ content_radius }}px;
border: {{ content_border_thickness }}px solid {{ content_border_color }};
background-color: {{ content_bg }};
position: relative;
z-index: 3;
text-align: center;
{% if use_shadow %}
box-shadow: -3px 7px 9px -2px #a09c9c;
{% endif %}
}
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
margin: 0px;
font-size: {{ text_size | times: 0.85 }}px;
line-height: {{ text_height }}%;
color: {{ text_color }};
}
.marquee-horizontal-{{ section.id }} {
position: relative;
z-index: 2;
display: inline-flex;
overflow: hidden;
width: 100%;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
html[dir="rtl"] .marquee-horizontal-{{ section.id }} {
flex-direction: row-reverse;
}
.track-horizontal-{{section.id}} {
padding-left: {{ slider_gap_mobile }}px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-shrink: 0;
width: calc(({{ image_width_mobile }}px * {{ section.blocks.size }}) + ({{ slider_gap_mobile }}px * {{ section.blocks.size }}));
gap: {{ slider_gap_mobile }}px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee-horizontal-{{ slider_direction }} {{ slider_speed | times: 1000 | round: 0 }}ms linear infinite;
}
@keyframes marquee-horizontal-left {
0% {
transform: translateZ(0);
visibility: visible;
}
100% {
transform: translate3d(-100%,0,0);
}
}
@keyframes marquee-horizontal-right {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
100% {
transform: translateZ(0);
}
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
}
.section-{{ section.id }}-settings {
padding: 0 5rem;
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
padding-left: {{ padding_horizontal }}rem;
padding-right: {{ padding_horizontal }}rem;
}
.scrolling-image-heading-{{ section.id }} > * {
font-size: {{ heading_size }}px;
}
.scrolling-image-slider-{{ section.id }} {
margin-top: {{ slider_mt }}px;
}
.scrolling-image-slide-{{ section.id }} {
height: {{ image_height_desktop }}px;
flex: 0 0 {{ image_width_desktop }}px;
}
.scrolling-image-content-{{ section.id }} {
max-width: {{ content_max_width }}px;
margin-top: -{{ content_distance }}px;
padding: {{ content_padding_vertical }}px {{ content_padding_horizontal }}px;
}
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
font-size: {{ text_size }}px;
}
.track-horizontal-{{section.id}} {
padding-left: {{ slider_gap }}px;
width: calc(({{ image_width_desktop }}px * {{ section.blocks.size }}) + ({{ slider_gap }}px * {{ section.blocks.size }}));
gap: {{ slider_gap }}px;
}
{% if pause_hover %}
.marquee-horizontal-{{ section.id }}:hover .track-horizontal-{{section.id}} {
animation-play-state: paused
}
{% endif %}
}
{%- endstyle -%}
{% if heading_custom %}
<style>
.scrolling-image-heading-{{ section.id }} > * {
font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}
</style>
{% endif %}
{% if text_custom %}
<style>
.scrolling-image-content-{{ section.id }} p,
.scrolling-image-content-{{ section.id }} a,
.scrolling-image-content-{{ section.id }} li {
font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
</style>
{% endif %}
{% if content_position == "center" %}
<style>
.scrolling-image-content-{{ section.id }} {
margin-left: auto;
margin-right: auto;
}
</style>
{% elsif content_position == "right" %}
<style>
.scrolling-image-content-{{ section.id }} {
margin-left: auto;
}
</style>
{% endif %}
<div class="section-{{ section.id }} scrolling-image-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
<div class="section-{{ section.id }}-settings scrolling-image-body-{{ section.id }}">
{% if heading != blank %}
<div class="scrolling-image-heading-{{ section.id }}">
{{ heading }}
</div>
{% endif %}
<div class="scrolling-image-slider-{{ section.id }}">
<div class="marquee-horizontal-{{ section.id }}">
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
<div class="track-horizontal-{{section.id}}">
{% for block in section.blocks %}
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} class="scrolling-image-slide-{{ section.id }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
{% else %}
{{ 'image' | placeholder_svg_tag }}
{% endif %}
</{% if block.settings.url != blank %}a{% else %}div{% endif %}>
{% endfor %}
</div>
</div>
</div>
{% if use_content %}
<div class="scrolling-image-content-{{ section.id }}">
{{ text }}
</div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "PP - Imágenes Scrolling",
"settings": [
{
"type": "header",
"content": "Encabezado"
},
{
"type": "richtext",
"id": "heading",
"label": "Escribe tu encabezado",
"default": "<h2>+2000 Clientes Felices</h2>"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Usar fuente personalizada",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Familia Tipográfica del Encabezado",
"default": "josefin_sans_n4"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Tamaño del Encabezado",
"default": 40
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Altura de Línea Encabezado",
"default": 130
},
{
"type": "select",
"id": "heading_align",
"label": "Alineación de Encabezado",
"default": "center",
"options": [
{
"label": "Izq",
"value": "left"
},
{
"label": "Centro",
"value": "center"
},
{
"label": "Der",
"value": "right"
}
]
},
{
"type": "header",
"content": "Configuración del slider"
},
{
"type": "range",
"id": "slider_speed",
"min": 1,
"max": 40,
"step": 1,
"label": "Velocidad Slider",
"info": "⚡ <----------------> 🐌",
"default": 13
},
{
"type": "range",
"id": "slider_gap",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Espacio entre ítems del slider",
"default": 10
},
{
"type": "range",
"id": "slider_gap_mobile",
"min": 10,
"max": 100,
"step": 2,
"unit": "px",
"label": "Espacio entre ítems del slider - Móvil",
"default": 10
},
{
"type": "range",
"id": "slider_mt",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Margen superior del slider",
"default": 50
},
{
"type": "select",
"id": "slider_direction",
"label": "Dirección del slider",
"default": "left",
"options": [
{
"label": "Izquierda",
"value": "left"
},
{
"label": "Derecha",
"value": "right"
}
]
},
{
"type": "checkbox",
"id":"pause_hover",
"label": "Pausar al pasar el cursor",
"default": false
},
{
"type": "header",
"content": "Configuración de Imágenes"
},
{
"type": "range",
"id": "image_width_desktop",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"label": "Ancho de imagen en escritorio",
"default": 300
},
{
"type": "range",
"id": "image_width_mobile",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"label": "Ancho de imagen en móvil",
"default": 120
},
{
"type": "range",
"id": "image_height_desktop",
"min": 100,
"max": 600,
"step": 10,
"unit": "px",
"label": "Alto de imagen en escritorio",
"default": 400
},
{
"type": "range",
"id": "image_height_mobile",
"min": 50,
"max": 600,
"step": 10,
"unit": "px",
"label": "Alto de imagen en móvil",
"default": 200
},
{
"type": "range",
"id": "image_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Radio de borde de la imagen",
"default": 10
},
{
"type": "header",
"content": "Configuración de Contenido"
},
{
"type": "checkbox",
"id": "use_content",
"label": "Usar contenido",
"default": true
},
{
"type": "select",
"id": "content_position",
"options": [
{
"value": "left",
"label": "Izq"
},
{
"value": "center",
"label": "Centro"
},
{
"value": "right",
"label": "Der"
}
],
"default": "center",
"label": "Posición del contenido"
},
{
"type": "range",
"id": "content_max_width",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Ancho del contenido",
"default": 340
},
{
"type": "range",
"id": "content_max_width_mobile",
"min": 50,
"max": 800,
"step": 10,
"unit": "px",
"label": "Ancho del contenido - Móvil",
"default": 340
},
{
"type": "range",
"id": "content_padding_vertical",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding vertical del contenido",
"default": 30
},
{
"type": "range",
"id": "content_padding_horizontal",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Padding horizontal del contenido",
"default": 30
},
{
"type": "range",
"id": "content_distance",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Distancia del contenido desde el borde inferior",
"default": 60
},
{
"type": "range",
"id": "content_radius",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Radio de borde del contenido",
"default": 10
},
{
"type": "range",
"id": "content_border_thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Grosor del borde del contenido",
"default": 0
},
{
"type": "checkbox",
"id": "use_shadow",
"label": "Usar sombra en el contenido",
"default": true
},
{
"type": "header",
"content": "Configuración de Texto"
},
{
"type": "richtext",
"id": "text",
"label": "Texto",
"default": "<p>+29.000 personas aman nuestra marca</p>"
},
{
"type": "checkbox",
"id": "text_custom",
"label": "Usar fuente personalizada",
"default": false
},
{
"type": "font_picker",
"id": "text_font",
"label": "Familia tipográfica del texto",
"default": "assistant_n4"
},
{
"type": "range",
"id": "text_size",
"min": 0,
"max": 100,
"step": 2,
"unit": "px",
"label": "Tamaño del texto",
"default": 24
},
{
"type": "range",
"id": "text_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Altura de línea del texto",
"default": 130
},
{
"type": "header",
"content": "Colores de la Sección"
},
{
"type": "color",
"label": "Encabezado",
"id": "heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Fondo del contenido",
"id": "content_bg",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Borde del contenido",
"id": "content_border_color",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label":"Color del texto",
"default": "#000000"
},
{
"type": "color",
"label": "Fondo de la sección",
"id": "background_color",
"default": "#FFFFFF"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "Degradado de fondo de la sección"
},
{
"type": "color",
"label": "Borde",
"id": "border_color",
"default": "#000000"
},
{
"type": "header",
"content": "Margen de la Sección (exterior)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margen superior",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margen inferior",
"default": 0
},
{
"type": "header",
"content": "Padding de la Sección (interior)"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding superior",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding inferior",
"default": 36
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Padding lateral",
"default": 0
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Padding lateral - Móvil",
"default": 0
},
{
"type": "header",
"content": "Configuración de la Sección"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Ancho completo",
"default": true
},
{
"type": "range",
"id": "content_width",
"min": 0,
"max": 400,
"step": 10,
"unit": "rem",
"label": "Ancho del contenido de la sección",
"default": 120
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Grosor del borde",
"default": 0
},
{
"type": "checkbox",
"id": "lazy",
"label": "Carga diferida",
"info": "Carga diferida de imágenes para optimizar la velocidad",
"default": true
}
],
"blocks": [
{
"type": "image",
"name": "Imagen",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Imagen"
},
{
"type": "url",
"id": "url",
"label": "URL de Imagen",
"info": "Opcional"
}
]
}
],
"presets": [
{
"name": "PP - Imágenes Scrolling",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}