FreeStyle Headwear Category Landing Page Documentation

PURPOSE:

Provide instructions to embed category landing page code onto a website.
STEPS TO EMBED LANDING PAGE:

Create a new page on your site Ex: /freestyle-headwear
Want to open in same page, remove target="_blank"
LANDING PAGE CODE:

<script type="text/javascript">
	var asbFSPluginVersion = "20211221-1103";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<style>
    @import url('//img1.wsimg.com/blobby/go/font/Helsinki/helsinki.css');
    @font-face {font-family: 'Cinzel';font-style: normal;font-weight: 400;font-display: swap;src: url(https://img1.wsimg.com/gfonts/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfYPlDX5Z.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
    @font-face {font-family: 'Cinzel';font-style: normal;font-weight: 400;font-display: swap;src: url(https://img1.wsimg.com/gfonts/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lDQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
    *, ::after, ::before {box-sizing: border-box;}
    .categoryContainer{margin: auto;padding: 16px;}
    .categoryContainer .row {display: flex;flex-wrap: wrap;margin-left: -15px;margin-right: -15px;}
    .categoryContainer .col {position: relative;width: 100%;padding-left: 15px;padding-right: 15px;flex-basis: 0;flex-grow: 1;max-width: 100%;}
    .categoryContainer .categoryBox {margin: 16px 0;position: relative;text-align: center;overflow: hidden;}
    .categoryContainer .categoryBox::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #222222;transition: 0.5s;opacity: .45;z-index: 2;}
    .categoryContainer .categoryBox img { width:100%;vertical-align: middle;border-style: none;transition: 0.5s;}
    .categoryContainer .categoryBox .categoryContent {position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;margin: 0 auto;padding: 0 8px;z-index: 3;}
    .categoryContainer .categoryBox .categoryContent h3,.categoryContainer .categoryBox .categoryContent .btn{font-family: 'Helsinki', arial, helvetica, sans-serif;}
    .categoryContainer .categoryBox:hover img, .categoryContainer .categoryBox:focus img {transform: scale(1.1);}
    .categoryContainer .categoryBox .categoryContent h3 {color: #FFFFFF;font-size: 36px;font-weight: 700;margin-top: 0;margin-bottom: .5rem;font-weight: 500;line-height: 1.2;}
    .categoryContainer .categoryBox .categoryContent .btn {display: inline-block;font-weight: 400;color: #212529;text-align: center;vertical-align: middle;user-select: none;background-color: transparent;border: 1px solid transparent;padding: .375rem .75rem;margin-top: 25px;font-size: 20px;line-height: 1.5;border-radius: .25rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color: #f8f9fa;border-color: #f8f9fa;}
    .categoryContainer .categoryBox .categoryContent a {color: #007bff;text-decoration: none;background-color: transparent;}
    @media (min-width:576px){.categoryContainer{max-width:540px}}
    @media (min-width:768px){.categoryContainer{max-width:720px}}
    @media (min-width:992px){.categoryContainer{max-width:960px}}
    @media (min-width:1200px){.categoryContainer{max-width:1140px}}
    @media (min-width:1300px){.categoryContainer{max-width:1280px}}
    @media (min-width:1400px){.categoryContainer{max-width:1360px}}
    @media (min-width:1500px){.categoryContainer{max-width:1460px}}
    @media (min-width:1600px){.categoryContainer{max-width:1560px}}
    @media (min-width:1700px){.categoryContainer{max-width:1660px}}
    @media (min-width:1800px){.categoryContainer{max-width:1760px}}
    @media (min-width:1900px){.categoryContainer{max-width:1860px}}
    @media (min-width:2000px){.categoryContainer{max-width:1960px}}
    @media (min-width: 768px){.categoryContainer .col {flex: 0 0 33.333333%;max-width: 33.333333%;}}
    @media (max-width:767.98px){.categoryContainer .col {flex: 0 0 100%;max-width: 100%;}.categoryContainer{width:100%;}}
    @media screen and (min-width: 768px) and (max-width:991.98px){.categoryContainer .categoryBox .categoryContent h3 {font-size: 25px;}.categoryContainer .categoryBox .categoryContent .btn {margin-top: 15px;font-size: 15px;}}
</style>

<div class="categoryContainer">
    <div class="row">
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Styles</h3>
                    <a href="/CapConfigurator?categoryName=Styles" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Active / Lightweight</h3>
                    <a href="/CapConfigurator?categoryName=Active%2FLightweight" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Beanies</h3>
                    <a href="/CapConfigurator?categoryName=Beanies%20" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Camo</h3>
                    <a href="/CapConfigurator?categoryName=Camo" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>On-Field</h3>
                    <a href="/CapConfigurator?categoryName=On-Field" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Outdoor</h3>
                    <a href="/CapConfigurator?categoryName=Outdoor%20" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Sideline</h3>
                    <a href="/CapConfigurator?categoryName=Sideline" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Truckers / Mesh Back</h3>
                    <a href="/CapConfigurator?categoryName=Truckers%20%2F%20Mesh%20Back" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Features</h3>
                    <a href="/CapConfigurator?categoryName=Features" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Flexfit</h3>
                    <a href="/CapConfigurator?categoryName=Flexfit" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Snapback</h3>
                    <a href="/CapConfigurator?categoryName=Snapback" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Structured</h3>
                    <a href="/CapConfigurator?categoryName=Structured" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
            <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
                <div class="categoryContent">
                    <h3>Unstructured</h3>
                    <a href="/CapConfigurator?categoryName=Unstructured" class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
    </div>
</div>
NOTE:

Here is an example page hosting the landing categories page for reference:
http://asiimages.com/headwear/us/prod/landing-page/
Quick Links

This item has been successfully added:

FreeStyle Headwear Category Landing Page Documentation

PURPOSE:

STEPS TO EMBED LANDING PAGE:

LANDING PAGE CODE:

NOTE:

CONTACT US

COMPANY INFO

This item has been successfully added:

FreeStyle Headwear Category Landing Page Documentation

PURPOSE:

STEPS TO EMBED LANDING PAGE:

LANDING PAGE CODE:

NOTE:

SUBSCRIBE

SUBSCRIBE

CONTACT US

COMPANY INFO

PERFORMANCE PROMISE - LIMITED WARRANTY

STAY CONNECTED!
