Solved

What is the correct way to change image order in Shopify sections and blocks?

Gokurinko
Shopify Partner
3 0 0

Hello guys, I just got started about 2 weeks learning shopify, and i have a question a bout sections and blocks:

Basicly I wanted to crate a simple section where you can further describe a product with images and descriptions

For the schema I did a block with this "settings":[
{
"type": "textarea",
"id": "name",
"label": "Description"
},
{
"type": "image_picker",
"id": "image",
"label": "Photo"
},
{
"type" : "number",
"id" : "position",
"label" : "Picture second"
}]}] My questions is about the last settings I want to use it to change the position of the image in my block it goes like this 

{% for block in section.blocks %}
{%- style -%}
.cardImg {
order : {{ block.settings.position }} ;
}
{%- endstyle -%}
{% endfor %}

cardImg refering to : <div class = "cardImg" >
<img class="img" src="{{ block.settings.image | img_url }}"></img>
</div>

The problems is I don't know how to select just the image for a block, when changing the order of the div it changes it for all the blocks.

Accepted Solution (1)

MarinaPetrovic
Shopify Partner
552 124 178

This is an accepted solution.

Hi @Gokurinko , you need to have a specific identifier for each block. Like this:

<div class = "cardImg{{block.id}}" >
<img class="img" src="{{ block.settings.image | img_url }}"></img>
</div>

 

And change style like this:

.cardImg{{block.id}} {
order : {{ block.settings.position }} ;
}

 

Hope this helps 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 2 (2)

MarinaPetrovic
Shopify Partner
552 124 178

This is an accepted solution.

Hi @Gokurinko , you need to have a specific identifier for each block. Like this:

<div class = "cardImg{{block.id}}" >
<img class="img" src="{{ block.settings.image | img_url }}"></img>
</div>

 

And change style like this:

.cardImg{{block.id}} {
order : {{ block.settings.position }} ;
}

 

Hope this helps 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Gokurinko
Shopify Partner
3 0 0

Thanks a lot @MarinaPetrovic it solved the problem.