edit this page

Components

The "Components" module is designed to create special pieces for product presentation to use in online shops, for example Amazon store.

Setting up components

For every product you can have multiple components with different templates.

Component Types

Before creating component you will need to set up a component type. Then you will need to select the attributes for this type. Component type has a template that defines how attributes of a component are shown. For example we can select an attribute of file type and and select it to show in the component as 1260:1260 square picture.

component_type

Component

For every component type you can create any number of components. Here you can select the values for the attributes that will b shown on all product that have this component linked. So, for the example above you can select here what exact picture will be shown. If you want a different picture for another product you will need to create another component of the same type. If a value of a component attribute is changed on a product page it will be changed for all the component not only for the current product.

Preview Template for components

Preview Templates are used to show how the components will look like in the shop. Our recommendation is to make them similar to the shop environment.

preview_templates

You can see all the components linked to product by clicking this button.

preview_templates

Examples

We will get in details on how you can create you own components in details with the couple examples.

Preview Template for example components

To see the components provided in the examples below we wil use this template:

<!DOCTYPE html>
<html>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       @media screen and (max-width: 1560px) {
            body {
              padding-left : 100px;
           }
        }
        body {
            padding-left : 20px;
           padding-right: 20px;
         }
        .image-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
            gap: 10px; /* Adjust spacing between images */
        }

        @media screen and (max-width: 1025px) {
            .image-container {
                grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet */
            }
        }

        @media screen and (max-width: 480px) {
            .image-container {
                grid-template-columns: 1fr; /* 1 column for phone */
            }
        }

.image-container p {
   text-align:center;
}
  .image-container img {
            height: 250px;
    width: 100%;
            max-width: 450px; 
        }
    </style>
</head>
<body>
    {% for component in product.components %}
     {% set component= component|prepareHtmlField %}
     {{ component.html |raw}}
    {% endfor %} 
</body>
</html>

Example 1 - An image with a link

This is a simple component consisting of a name, a link to some place and the image. For it we wil need 3 attributes: text attribute, url attribute and a file attribute. Lets link them to component type and then we will adjust their positions in HTM/CSS template. Here is how this template will look like:

{% set text  = "test text" %}
{% set cavImage = "test image" %}   
  {% for componentAttributeValue in  componentAttributeValues %}
        {% if componentAttributeValue.attributeType  == 'url' %}    
            {% set url = componentAttributeValue.value %}
        {% endif %}
        {% if componentAttributeValue.attributeType == 'text' %}
            {% set text= componentAttributeValue.value %}
        {% endif %}
       {% if componentAttributeValue.attributeType == 'file' %}
            {% set cavImage =componentAttributeValue.valuePathsData['download'] %}
        {% endif %}
  {% endfor %}

<div class="image-container">
        <p> {{ text }} </p>
        <p> {{ url }} </p>    
         <img src="{{cavImage}}" alt="{{cavImage.attributeName}}">
 </div>

<style>
       .image-container {
            display: flex;
           flex-direction: column;
            max-width: 400px;
        }
</style>

Next we will create a component from this component type and add values to attributes we linked to the component:

component

Now all we need to do is link this component to a product or products.

This is how the end result looks like:

component_previw

Example 2 - 4 images with text

This is a simple component consisting of 4 images with text beneath them they will be set in a square. For it we wil need 8 attributes: 4 text attributes and 4 file attributed. Lets link them to component type and then we will adjust their positions in HTM/CSS template. Here is how this template will look like:

{% set image5 = "" %}
{% set text5  = "" %}

{% set image2 = "" %}
{% set text2  = "" %}

{% set image3 = "" %}
{% set text3  = "" %}

{% set image4 = "" %}
{% set text4  = "" %}

  {% for componentAttributeValue in  componentAttributeValues %}
        {% if componentAttributeValue.attributeName  == 'Text 2' %}    
            {% set text2 = componentAttributeValue.value %}
        {% endif %}

        {% if componentAttributeValue.attributeName == 'Image 2' %}
            {% set image2  =componentAttributeValue.valuePathsData['download'] %}
        {% endif %}

        {% if componentAttributeValue.attributeName  == 'Text 3' %}    
            {% set text3 = componentAttributeValue.value %}
        {% endif %}

        {% if componentAttributeValue.attributeName == 'Image 3' %}
            {% set image3  =componentAttributeValue.valuePathsData['download'] %}
        {% endif %}

        {% if componentAttributeValue.attributeName  == 'Text 4' %}    
            {% set text4 = componentAttributeValue.value %}
        {% endif %}

        {% if componentAttributeValue.attributeName == 'Image 4' %}
            {% set image4  =componentAttributeValue.valuePathsData['download'] %}
        {% endif %}

        {% if componentAttributeValue.attributeName  == 'Text 5' %}    
            {% set text5 = componentAttributeValue.value %}
        {% endif %}

        {% if componentAttributeValue.attributeName == 'Image 5' %}
            {% set image5  =componentAttributeValue.valuePathsData['download'] %}
        {% endif %}

  {% endfor %}
<div class="row">

    <div class="image-container">
        <img src="{{image2}}" alt="">
        <p> {{ text2 }} </p>
    </div>
    <div class="image-container">
        <img src="{{image3}}" alt="">
        <p> {{ text3 }} </p>
    </div>
    </div>
</div>
<div class="row">

    <div class="image-container">
        <img src="{{image4}}" alt="">
        <p> {{ text4 }} </p>
    </div>
    <div class="image-container">
        <img src="{{image5}}" alt="">
        <p> {{ text5 }} </p>
    </div>
    </div>
</div>

<style>
       .row {
        display: flex;
       }
       .image-container {
            display: flex;
           flex-direction: column;
            max-width: 400px;
            margin-right: 40px;
        }
</style>