Adding promo cards in Shop-Script 6

In Shop-Script 6, we have added the option to add promo cards to the home page for bright presentation of information about discounts, special offers, or new products.

If you do not want to update your old Shop-Script 5 design theme, you can add the promo card displaying code to your existing design theme as shown below.

Add the following snippet to your home.html file:

{if $promocards = $wa->shop->promos()}
    <!-- PROMOS -->
    <section class="promos">
        <ul>
            {foreach $promocards as $promo}
                <li id="s-promo-{$promo.id}">
                    <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');">
                        <div class="background-color-layer"></div>
                        {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if}
                        {if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if}
                    </a>
                </li>
            {/foreach}
        </ul>
    </section>
{/if}

Add the following style rules to your CSS file; e.g., default.shop.css:

.promos { margin: 5px -25px; }
.promos ul { padding: 0; margin: 0; }
.promos ul li { padding: 0; margin: 0; list-style: none; display: inline-block; width: 25%; float: left; } 
.promos ul li a { display: block; padding: 40px 20px; height: 80px; overflow: hidden; background-size: cover; background-position: center center; color: #000; background-color: rgba(0,0,0,0.05); border: 5px solid #fff; text-align: center; position: relative; }
.promos ul li a .background-color-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.1; background-color: #000; }
.promos ul li a h5 { font-size: 1.3em; text-shadow: 0 1px 2px #000; position: relative; z-index: 2; }
.promos ul li a p { font-size: 0.9em; text-shadow: 0 1px 1px #000; position: relative; z-index: 2; }
.promos ul li a:hover .background-color-layer { opacity: 0.5; transition: 0.3s; }

After adding this code, the promo cards you have set up in your backend should appear on the home page. If they are displayed with visual defects, this might be caused by the special structure of your design theme, actual promo cards' size, font colors, etc. Should you encounter any issues when adding promo cards to an old design theme, please consult your design theme developer or update the design theme to the latest original version.