Adding promo cards in Shop-Script 6

Tips on changing your settings after major Shop-Script upgrades

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">
            {foreach $promocards as $promo}
                <li id="s-promo-{$}">
                    <a href="{$|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}

Add the following style rules to your CSS file; e.g.,

.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.


  • +1
    Unzion Records Unzion Records June 8, 2015 15:10 #

    I create some PROMO CARDS, but the upload image not show in promo cards when i Upload.

    how fix this error?

    • +1
      Mike Mike June 9, 2015 11:11 #

      I suggest contacting the support team at as they might need to get access to your server to find out more details.

    • +1
      Grawhite32 Grawhite32 January 13, 2016 19:48 #

      Created new Promo cards, but the images are 5 times the size required, doesn't matter what size image I insert.

      Posting new comments is disabled for this topic.

      Раздел помощи работает на основе приложения «Хаб»