Marketing Promo Page Guide
This page uses Slacker Code. Click here to view the RWS Slacker Code Reference sheet.
Setup
Open the commons server
Open the webfronts file editor.
On the bottom-left of the editor, click on the link labeled "Edit Kernel Land Accounts."
Locate the server named "Commons" and click on it. - Help? -
Add template files to your project
Navigate to /promotions/assets/templates
Choose the newest template. It should be named "blank_[version_number]". Open the template chosen.
Copy all files and folders except the files called "template.html"
Paste the copied files into the new project directory.
Development
Update basic settings
Open savings.html
Update the following defines...
mingle_id
promo_url
promo_title
promo_description
promo_date
Update basic style
Open css/style.css
Update the following define with the promotion brand name
promo_brand_tag_1(eg: kitchenaid)
If the brand is an existing brand, the page will pre-style itself.
Hero Image and Social Image
The hero image, social image, and mobile hero image can all be pasted into the images folder.
<!-- Hero image -->
<section class="hero-section row" id="hero-id">
<%usedef name="promo_hero_image" %>
<div class="offer-text">
<strong>
Offer valid:
</strong>
<%usedef name="promo_date" %>
</div>
</section>
<!-- End Hero image -->
Though a mobile hero is not usually required, if one IS requested, the hero image define will auto check for the mobile file and display it in mobile sizes, if it is available.
There is a naming convention for these files that MUST be followed to properly function with slacker code.
landing_hero[.jpg or .png]
landing_hero_mobile[.jpg or .png]
social_hero.jpg
Sections with non-specific products(product loops)
Use the following code for each section of product loops.
<!-- Section 1 -->
<%search3 query_string="minor=dish" %>
<section class="section-1 row <%define name="no_results_hide_class"%>">
<header>
<span>
Template header text
</span>
<span>
</span>
<span>
<%usedef name="shop_all_button" %>
</span>
</header>
<div>
<%usedef name="product_loop_1" %>
</div>
</section>
<!-- end Section 1 -->
Update the query_string used in each search3.
Update the section number to help with styling and developer comments. This exists in the comments and in the form of a class on the section elements. The class name is a requirement to get the default styling.
--Tip-- Put all queries into defines at the top of the page. If a change needs to be made to a query, it will be easier to find, and you will only have to edit it in one spot, if the query was needed in more than one spot on the page.
Sections with specific products(automated promotions)
Use the following code for single automated promotions product.
<!-- Section 2 -->
<%search3 query_string="key=ge:GFD45ESSMWW|ge:GFD45GSSMWW|ge:GFW450SPMDG" %>" %>
<section class="section-2 row boxed-container <%usedef name="no_results_hide_class"%>">
<header>
<span>
Template header text
</span>
<span>
</span>
<span>
<%usedef name="shop_all_button" %>
</span>
</header>
<div>
<%automated_promotions_select_item item_key="ge:GFD45ESSMWW"%>
<%block%>
<%usedef name="single_product_1"%>
<%%>
<%automated_promotions_select_item item_key="ge:GFD45GSSMWW"%>
<%block%>
<%usedef name="single_product_1"%>
<%%>
<%automated_promotions_select_item item_key="ge:GFW450SPMDG%>
<%block%>
<%usedef name="single_product_1"%>
<%%>
</div>
</section>
<!-- end Section 2 -->
Update the query_string used in each search3.
Update the section number to help with styling and developer comments. This exists in the comments and in the form of a class on the section elements. The class name is a requirement to get the default styling.
Disclaimer
Use the following code for the disclaimer code.
<!-- Disclaimer Section -->
<section class="dislcaimer-section row boxed-container">
<p>
Disclaimer
</p>
</section>
<!-- end Disclaimer Section -->
Email Development
Update settings/content
Open [promotion_path]/email/email.xml
Update the following defines...
promo_url
promo_date
email_title
email_description
email_disclaimer
Make sure all text, except the url, has been put through the character stripper. Click here for the character stripper.
Graphic Design
Create web assets
landing_hero[.jpg or .png]
1440x600
social_hero.jpg
1200x630
These images can be pasted into the [promotion_path]/images folder.
Create mingle assets
promo_1440x900.jpg
1440x900
promo_800x800.jpg
800x800
thumbnail.jpg
120x120
These images can be uploaded to the mingle site.
Create email assets
emailbanner001.jpg
600x350
emailbanner002.jpg
600x350
These images can be pasted into the [promotion_path]/email/images folder.
Create organic assets
1200x148.jpg
1200x148
728x90.jpg
728x90
450x200.jpg
450x200
Complete Web Page Styling
Go to [promotion_path]/css/styles.css
All changes to the css must be made in this file.
Avoid using the "!important" rule on a css attribute.
If you are having trouble styling, you may have to be more specific with your selectors. -Help?-
Do yo thang! You're a designer! Make this thang look goooood! ;)