Snippets / How to Use Section Code Snippet

How to Use Section
Code Snippet

Increase Conversions⚡with easy to implement
CSS and Liquid snippets for your Shopify Store

Abdo Ali 5/13/2025
Dificulty level: 1/10

Copy the snippet to your clipboard

{% schema %}
{
  "name": "How to Use",
  "tag": "section",
  "class": "shopify-section",
  "settings": [],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Step Image"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Step Description"
        }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [
    {
      "name": "How to Use",
      "category": "Custom",
      "blocks": [
        {
          "type": "step",
          "settings": {
            "image": "shopify://shop_images/2024-09-29_23-33-40_B_R8_S4_COFFEE_1x1_c4735316-d620-41d2-9038-b100a3faa3fa_1000x.jpg",
            "text": "1) scoop 8g of Rainbow Dust"
          }
        },
        {
          "type": "step",
          "settings": {
            "image": "shopify://shop_images/2024-09-29_23-41-27_B_R8_S4_H_1x1_93c184ee-1e1b-486b-8707-9ec7ad2005b9_1000x.jpg",
            "text": "2) mix with water or milk - hot or cold"
          }
        },
        {
          "type": "step",
          "settings": {
            "image": "shopify://shop_images/SCC00652_1x1_4df7434b-7dec-4d08-b6f2-6a3a81dc7957_1000x.jpg",
            "text": "3) use your frother to blend to perfection"
          }
        },
        {
          "type": "step",
          "settings": {
            "image": "shopify://shop_images/SCC00911_1x1_1e333543-e0ff-4060-9e21-ee6cecd1bb47_1000x.jpg",
            "text": "4) drink & enjoy focus - energy - calm"
          }
        }
      ]
    }
  ]
}
{% endschema %}

<div class="section_holder">
    <div class="section_holder_wrapper">
      <div class="section_title">How to use -</div>
      <div class="section_items">
        {% for block in section.blocks %}
          <div class="section_item">
            <div class="item_image">
              {% if block.settings.image != blank %}
                <img src="{{ block.settings.image | image_url: width: 1000 }}" alt="Step image">
              {% endif %}
            </div>
            <div class="item_text">
              {{ block.settings.text }}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

Pricing

It's time to put your store on Steroids

Landing Page

Effective, Data-Driven

$2500

Turn cold clicks into warm, recurring customers.
Irresistible offer creation
Sales magnet copywriting
Aesthetic, beautiful branding
Pixel perfect development
Unlimited revisions & 48h turnaround
Smooth workflow through client portal
Squeez every advertising dollar

Book a call with Abdo

If you don't like, you don't pay

CRO Unlocked

Fast, Frictionless, Reliable

$4500/mo

Your on-demand CRO team, without the overhead.
Ongoing design, dev & CRO support.
- Landing pages
- A/B Testing
- Install upsells
- Develop functionalities & apps
- Product Descriptions
- Hooking banners and irresistable offers
- 0 to 100 roadmaps
One request at a time
Clear timelines and milestone deliverables
Strategy call every 2 weeks
48h Turnaround
Smooth workflow through client portal
Pause or cancel any time

Book a call with Abdo

30 day money back gurantee

Free

Put your store on Steroids For Free!

Conversion FocusedBanner

Effective, Data-Driven

FREE

Hooking banner
Highly converting headline
Designed in a Figma file
With assets included
48h average delivery
Sent by Email
One time per store

Get Conversion Focused Banner

Conversion FocusedAudit

Detailed, Checklisted, Easy to implement

FREE

Home page, Product page detailed audit
Written as a checklist
With loom videos and screenshots
48h average delivery
Sent by Email
One time per store

Get Free Audit

Resources

More Free Stuff

Wanna do it yourself? i will help you every step of the way through resources that i use daily for my paying clients

Blog

How to Use Liquid Section

Abdo Ali 11/22/2024 Reading Est: 3 Minutes

Snippet

Add To Cart Button Effect

Abdo Ali 11/27/2024 Dificulty Level: 1/10

Social media

Book A Call

Made with

How to Use Section
Code Snippet