How I add new attributes in Front from Shopify

Through Shopify in the Front-End section, we can use different attributes that are available from themes, but in most cases, the client’s request is more interesting and beyond the attributes the themes carry.

Shopify through its code enables the creation of several different attributes which facilitate the use of personal e-commerce projects for the client. Some of the attributes I can create are text, richtext, image picker, URL, among others.

Below I provided an example for Image Picker also for Text.

Step 1: Go to the Themes section.

Step 2: Click on Actions.

Step 3: Edit Code.

Step 4: Create in Section.

Example how to create an attribute with (image_picker):

Type: indicates the function that the attribute performs.

ID: is required for the display and stylization of the part where the photo is placed.

Label: The name to understand the function it performs in each language.

Later on, the Front should seem like this:

Furthermore, we need to add the code in the part which we have allocated for this attribute to declare the display of the picture.

After creating and linking this attribute we need to be able to connect to the rest of the attributes.

Foremost, specify the name with which you want to display it in the attributes section, and second make the category choices. After this step, you can see that the new attribute has been created.

The other part that can be seen in the picture is the text on the right, afterwards, the text is divided into two parts (title and description).

The title part is created first:

Then we need to add the code in the part that we have allocated for this attribute to declare the display of the Title, which is enabled by this code:
 {% if section.settings.title != blank %}
{{ section.settings.title | escape }}
{% endif %}

The title part will appear below the image picker, being the second attribute created.

And then the title appears on the right side of the photo:

If you want to know more about e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in ecommerce.

Related blogs