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:
User | RANK |
---|---|
2 | |
2 | |
2 | |
2 | |
1 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023