How to create an items badge in Shopware 5?

Shopware, Shopware 5

To create an article badge in shopware 5 follow the following steps:

Step 1: Create a new free text field in the backend to select the new badges of each item. Go to the Configuration>Free text field to create a new text field.

Step 2: Click on the Add item to create a new one and make sure your table name should be selected for articles “Item(s_articles_attributes)”.

Step 3: Fill in the required fields of Database configuration and View configuration.

Database configuration

Column name: Name the column such as badge_freeshipping

Column type:- In column type select the Checkbox – INT(1)

View configuration

Label: Name the label that can show in Overview items.

Support text: It’s an optional field. It will show under the Checkbox in Overview items.

Display in the backend: Enable this it will be shown in the backend.

Note:- Save the process and clear the cache.

Step 4: Go to the shopware theme directory of your website.

Step 5: Create the new sub-directory called product-badges.tpl

File Structure:–

themes/Frontend/Custom/frontend/listing/product-box/product-badges.tpl

Note: Custom directory is a theme that I created already.

Step 6: Add this code in product-badges.tpl

{extends file="parent:frontend/listing/product-box/product-badges.tpl"}

{block name='frontend_listing_box_article_esd'}
  {$smarty.block.parent}
    {if $sArticle.badge_freeshipping}
      <div class="product--badge badge--free-shipping">{s namespace='frontend/listing/box_article' name="ListingBoxShippingCosts"}Free shipping{/s}</div>
  {/if}
{/block}

Step 7: Create a new file called product-box.less under _modules directory.

Step 8: Add this code to product-box.less file.

.product--box
	.product--badges {
		.badge--free-shipping {
			color: #FFFFFF;
			background: #000000;
	}
}

Step 9: Create all.less file in less directory. And import the product–box in it.

Step 10: Add this code in all.less file.

@import "_modules/product-box";

Note: Save all this process and enable the checkbox option which we created for every item.

Results:

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware 5. You can also visit the Shopware 5 development page to check the services we offer.