0


I have an attribute named "Special"
For each selection of this attribute I want to show some icons-images in the frontend of the product.
For this specific product I want to have a "Bio Product" icon, a "Gluten free" icon and a "Salt free" icon
Any ideas?

enter image description here

Improve this question

1 Answer 1

Reset to default
0

While displaying those selected attribute values. Arrange them as separate span sections and give the class name same as selected value. Write css for each individual class and assign background image. To be more clear. For the screenshot you attached generate span like below.

<span class='bio'></span>

<span class='gluten-free'></span>

<span class='salt-free'></span>

Write CSS as below but for all possible values for the attribute.

.bio{background-image:......}
.gluten-free{background-image:......}
.salt-free{background-image:......}

Please note that you cannot apply this as it is. This will help you to understand the approach. Use it as per your requirement with required changes.

Improve this answer
2
  • Hello and thanks for the response. <br>This must be automated in every product, when I select a Special on the backened
    – Costas Saloubardos
    Commented Jan 24, 2018 at 11:16
  • Hi, once you add background images for all possible attribute values in CSS, icons will display automatically . Once it is set, it will work always for any set of selected special attribute values. can you please clarify what you mean by automate?
    – Kalyan Chakravarthi V
    Commented Jan 24, 2018 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.