Personalized checkout and custom promotions with Shopify Scripts
Hello, I'm new to Shopify and I need some advise. I could not figure how to avoid divs.
Here's my code:
<div class="carousel-container shimmer">
<ul class="carousel product-carousel">
{%- for productImage in product.images -%}
<li>
<img
class="lazy"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-color="{{ productImage.variants[0][color_property] }}"
data-slide="{{ forloop.index0 }}"
data-src="{{
productImage
| img_url: '500x500'
| remove: 'https:'
| split: '?v'
| first
}}"
alt="Image {{ forloop.index }}"
draggable="false"
width="500"
height="500"
/>
</li>
{%- endfor -%}
</ul>
<div class="carousel-nav carousel-nav--vertical">
<span class="carousel-btn prev-img nav-btn"><i class="fa fa-1-5x fa-chevron-up" aria-hidden="true">
</i></span>
<ul class="carousel-nav-list">
{%- for productImage in product.images -%}
<li class="carousel-nav-item" data-slide="{{ forloop.index0 }}">
<img
class="lazy"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-color="{{ productImage.variants[0][color_property] }}"
data-src="{{
productImage
| img_url: '70x70'
| remove: 'https:'
| split: '?v'
| first
}}"
alt="Image {{ forloop.index }}"
draggable="false"
width="70"
height="70"
/>
</li>
{%- endfor -%}
</ul>
<span class="carousel-btn next-img nav-btn"
><i class="fa fa-1-5x fa-chevron-down" aria-hidden="true"></i
></span>
</div>
<div style="clear: both"></div>
</div>
And this is my Goal:
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025