Breadcrumbs

Product: Highlight your brand's strengths on all product pages

Purpose

To demonstrate how you can highlight your brand’s strengths by displaying them on the detailed product page of all products.

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 wish to highlight what sets this brand apart from others and may give it a competitive advantage. We have a set of attributes we would like to showcase on the detailed product page for each product.

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 highlight what sets you apart from your competition on the detailed product page of all products:

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

  2. Navigate to Templates->Products and select “priceblock-bottom.twig”. This opens the existing twig code under the EDITOR tab.

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

 <div style="background-color: #ffffff; color: black; padding: 16px; border: 3px solid #d3377b;" margin-bottom: 16px>

<table border="0" cellpadding="6" cellspacing="0">
    <tr>
        <td width="30" align="center"><i class="fa fa-usd" aria-hidden="true"></i></td>
        <td><strong>Low prices</strong></td>
        <td>Price match guarantee</td>
    </tr>
    <tr>
        <td width="30" align="center"><i class="fa fa-check" aria-hidden="true"></i></td>
        <td><strong>Guaranteed fulfilment</strong></td>
        <td>Correct part every time!</td>
    </tr>
    <tr>
        <td width="30" align="center"><i class="fa fa-truck" aria-hidden="true"></i></td>
        <td><strong>Easy returns</strong></td>
        <td>Quick and hassle free</td>
    </tr>
    <tr>
        <td width="30" align="center"><i class="fa fa-phone" aria-hidden="true"></i></td>
        <td><strong>In-house experts</strong></td>
        <td>We know our products</td>
    </tr>
</table>

</div>

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