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:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<script type="text/javascript">
    var asbFSPluginVersion = "20260617-1300";
</script>
<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;
        max-height: 325px;
        height: 325px;
        object-fit: contain;
    }

    .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 25%;
            max-width: 25%;
        }
    }

    @media (max-width:767.98px) {
        .categoryContainer .col {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .categoryContainer {
            width: 100%;
        }

        .categoryContainer .categoryBox img {
            height: 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;
        }

        .categoryContainer .categoryBox img {
            height: 100%;
        }
    }

    .category-title-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.5rem 0;
        width: 100%;
    }

    .category-title-line {
        flex: 1;
        height: 1px;
        background-color: #ddd;
    }

    .category-title-text {
        margin: 0 1rem;
        font-size: 2.5rem;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
    }
</style>

<div class="categoryContainer">
    <div class="row">
        <div class="category-title-divider">
            <div class="category-title-line"></div>
            <span class="category-title-text">Custom Sublimation</span>
            <div class="category-title-line"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Fanwear.jpg"
                    alt="fanwear">
                <div class="categoryContent">
                    <h3>Fanwear</h3>
                    <a href="/configurator?categoryName=fanwear"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Lacrosse.jpg"
                    alt="Lacrosse">
                <div class="categoryContent">
                    <h3>Lacrosse</h3>
                    <a href="/configurator?categoryName=lacrosse"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Baseball.jpg"
                    alt="Baseball">
                <div class="categoryContent">
                    <h3>Baseball</h3>
                    <a href="/configurator?categoryName=baseball"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Basketball.jpg"
                    alt="Basketball">
                <div class="categoryContent">
                    <h3>Basketball</h3>
                    <a href="/configurator?categoryName=basketball"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/soccer.jpg"
                    alt="Soccer">
                <div class="categoryContent">
                    <h3>Soccer</h3>
                    <a href="/configurator?categoryName=soccer"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Football.jpg"
                    alt="Football">
                <div class="categoryContent">
                    <h3>Football</h3>
                    <a href="/configurator?categoryName=football"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Outerwear-and-Fleece.jpg"
                    alt="Fleece">
                <div class="categoryContent">
                    <h3>OUTERWEAR & FLEECE</h3>
                    <a href="/configurator?categoryName=fleece"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/track.jpg"
                    alt="Track">
                <div class="categoryContent">
                    <h3>Track</h3>
                    <a href="/configurator?categoryName=track"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/training.jpg"
                    alt="Training">
                <div class="categoryContent">
                    <h3>Training</h3>
                    <a href="/configurator?categoryName=training"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/softball.jpg"
                    alt="Softball">
                <div class="categoryContent">
                    <h3>Softball</h3>
                    <a href="/configurator?categoryName=softball"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/polo.jpg"
                    alt="Polos">
                <div class="categoryContent">
                    <h3>Polos</h3>
                    <a href="/configurator?categoryName=polo"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/volleyball.jpg"
                    alt="Volleyball">
                <div class="categoryContent">
                    <h3>Volleyball</h3>
                    <a href="/configurator?categoryName=volleyball"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Masks-Gaiters-Sleeves.jpg"
                    alt="Masks, Gaiters, & ACCS">
                <div class="categoryContent">
                    <h3>Masks, Gaiters, & ACCS</h3>
                    <a href="/configurator?categoryName=accessories"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/compression.jpg"
                    alt="Compression">
                <div class="categoryContent">
                    <h3>Compression</h3>
                    <a href="/configurator?categoryName=compression"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/Semi-Sub.jpg"
                    alt="Semi Sublimated">
                <div class="categoryContent">
                    <h3>Semi Sublimated</h3>
                    <a href="/configurator?categoryName=semi-sublimated"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="uniforms">
                <div class="categoryContent">
                    <h3>Uniforms</h3>
                    <a href="/configurator?categoryName=uniforms"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Pop Warner">
                <div class="categoryContent">
                    <h3>Pop Warner</h3>
                    <a href="/configurator?categoryName=pop-warner"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Cheer/Dance">
                <div class="categoryContent">
                    <h3>Cheer/Dance</h3>
                    <a href="/configurator?categoryName=cheer"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Babe Ruth">
                <div class="categoryContent">
                    <h3>Babe Ruth</h3>
                    <a href="/configurator?categoryName=babe-ruth"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/plugin-sublimation/hockey-icon.jpg"
                    alt="Hockey">
                <div class="categoryContent">
                    <h3>Hockey</h3>
                    <a href="/configurator?categoryName=hockey"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Sublimation">
                <div class="categoryContent">
                    <h3>Sublimation</h3>
                    <a href="/configurator?categoryName=sublimation"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Training Turbo">
                <div class="categoryContent">
                    <h3>Training Turbo</h3>
                    <a href="/configurator?categoryName=training-turbo"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Off-Field">
                <div class="categoryContent">
                    <h3>Off-Field</h3>
                    <a href="/configurator?categoryName=off-field"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="category-title-divider">
            <div class="category-title-line"></div>
            <span class="category-title-text">Custom Headwear</span>
            <div class="category-title-line"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="custom headwear">
                <div class="categoryContent">
                    <h3>Headwear</h3>
                    <a href="/configurator?type=headwear"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Active/Lightweight">
                <div class="categoryContent">
                    <h3>Active / Lightweight</h3>
                    <a href="/configurator?categoryName=active/lightweight"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Styles">
                <div class="categoryContent">
                    <h3>Styles</h3>
                    <a href="/configurator?categoryName=styles"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Features">
                <div class="categoryContent">
                    <h3>Features</h3>
                    <a href="/configurator?categoryName=features"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Visors">
                <div class="categoryContent">
                    <h3>Visors</h3>
                    <a href="/configurator?categoryName=visors"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Wide Brim / Boonie">
                <div class="categoryContent">
                    <h3>Wide Brim / Boonie</h3>
                    <a href="/configurator?categoryName=wide brim / boonie"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Flexfit">
                <div class="categoryContent">
                    <h3>Flexfit</h3>
                    <a href="/configurator?categoryName=flexfit"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Snapback">
                <div class="categoryContent">
                    <h3>Snapback</h3>
                    <a href="/configurator?categoryName=snapback"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Camo">
                <div class="categoryContent">
                    <h3>Camo</h3>
                    <a href="/configurator?categoryName=camo"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Truckers / Mesh Back">
                <div class="categoryContent">
                    <h3>Truckers / Mesh Back</h3>
                    <a href="/configurator?categoryName=trucker-hats"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Elite Series">
                <div class="categoryContent">
                    <h3>Elite Series</h3>
                    <a href="/configurator?categoryName=elite-series"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Structured">
                <div class="categoryContent">
                    <h3>Structured</h3>
                    <a href="/configurator?categoryName=structured"
                        class="btn" target="_blank">View More</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="categoryBox">
                <img src="https://static.momentecbrands.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png"
                    alt="Unstructured">
                <div class="categoryContent">
                    <h3>Unstructured</h3>
                    <a href="/configurator?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:
https://asiimages.momentecbrands.com/headwear.html
https://gu.momentecbrands.com/prod-category.html
Quick Links

This item has been successfully added:

OUR BRANDS

PARTNER BRANDS

SHOP BY SPORT

Shop By Sport

Digital Print

Design Lookup

Sublimation

Embroidery & Embellishments

Screen Print & Transfers

On-Demand Solutions

Other

FreeStyle Headwear Category Landing Page Documentation

PURPOSE:

STEPS TO EMBED LANDING PAGE:

LANDING PAGE CODE:

NOTE:

My Account

Resources

Contact
