To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Sections and blocks

Solved
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)

Accepted Solutions
MarinaPetrovic
Shopify Partner
497 112 156

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
497 112 156

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.