Breadcrumbs

Product: Display an image based on meta keywords

Purpose

To demonstrate how you can display an image under the product price based on the product’s brand.

Watch

Watch it now!

More information

The detailed product page contains several data elements, including product name, product code/SKU, stock number, and price. Additionally, you can assign a meta page title, meta keywords, and meta descriptions to each product to support your SEO strategy.

In this use case, we have two different makes/brands - one by ‘Detroit Diesel’ and one by ‘Cummins’. Detroit Diesel offers a 1-year warranty, while Cummins offers a 2-year warranty. This use case demonstrates how you can use your assigned meta keywords to identify a product’s brand, determine its warranty from the brand, and display the correct warranty image under the price on the detailed product page.

Once you have saved your changes in WebShop, they are immediately visible in WebShop to your customers.

Key points

  • If you are comfortable with HTML, CSS, and variables, you’ll be in a good place to use this feature to achieve a personalized look and feel for your WebShop.

  • You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop.

Recipe

To display the correct warranty image below the price on the detailed product page:

  1. Add the brand names to the meta keyword field. Open Catalogue->Products, select the SEO tab, and enter the brand in the meta keyword field. Select Save to save your changes.

  2. Upload the images to Files->Public->WarrantyImages. You may need to create this folder.

  3. Get right-clicking the image, select Get Info, and select Link from the displayed menu:

  4. Open Templates in the Management Interface. This opens the Templates Editor.

  5. Navigate to Templates->Products and select “post-price.twig”. This opens the existing twig code under the EDITOR tab.

  6. Add the following code and select Save to save your changes.

{% if "detroit diesel" in product.MetaKeywords|lower %} 

<img src="https://<your-url>/sites/admin/plugins/elfinder/files/eubusinesscentraldc/WarrantyImages/1year.png" alt="1 Year Warranty"> 

{% elseif "cummins" in product.MetaKeywords|lower %} 

<img src="https://<your-url>/sites/admin/plugins/elfinder/files/eubusinesscentraldc/WarrantyImages/2year.png" alt="2 Year Warranty"> 

{% endif %}

Remember

  • You may have to select Clear Cache ( ClearCacheIcon.png ) in the top menu of the Management Interface before your changes are visible.

  • Select the DOCUMENTATION tab to view what objects and variables you can manipulate.

  • Select the LAYOUT tab to see where your twig code is displayed in WebShop.

Related content