EARN 2X POINTS on Vionic Pro Purchases for a Limited Time >

2018 Vionic Style Guide - Magento Custom Content

This style guide can be used in the development of Vionic/Magento Content Management (CMS) Pages.

Styling for the following sample modules are dependant on:

  1. The default Vionic website css.
  2. A CMS style sheet linked within the CMS page which is periodically updated*. Updates to the CMS stylesheet is almost always backwards compatible.
  3. Page specific styling within the CMS page.
  4. Note on mobile: *Mobile versions require an additional mobile css file linked within the page. See "Latest CMS CSS Files" in the top bar above.

Standard Modules

Two Column 50/50 column split

With shoes/product .product-image-stack, lifestyle image hover overlay

flats that shine

These flats fall anything but flat.

View All Velvet Styles

flats that shine

These flats fall anything but flat.

Two Column 40/60 column split

With shoes/product .product-image-stack

you won’t stop this season

Sneakers to help you be unstoppable.

you won’t stop this season

Sneakers to help you be unstoppable.

Two Column - Custom column widths

Image Swap / roll-overs (hover over shoes)

fall arrivals: boots

Upgrade your fall style in our boot edit, designed
with the season’s richest colors and textures.

View the Whitney Ankle Boot
View All Boots

fall arrivals: boots

Upgrade your fall style in our boot edit, designed with the season’s richest colors and textures.

Lookbook Testimonial

Taylor Styles With Blaire Heeled Sandal
“I love the Blaire heel not only because it’s adorable but also extremely comfortable. These heels are perfect for everyday wear from the office, to running errands and even travel.”
-Tayler, taylermallot.com

SEO block hide/show content

Science in Motion

You want stylish men’s shoes, but you’re not willing to forgo comfort -- and why should you? Men’s supportive shoes have come a long way from the styles of years past. Today you can step out in the latest footwear trends and still enjoy a comfortable, arch-supporting shoe. Read more...

Science in Motion

You want stylish men’s shoes, but you’re not willing to forgo comfort -- and why should you? Men’s supportive shoes have come a long way from the styles of years past. Today you can step out in the latest footwear trends and still enjoy a comfortable, arch-supporting shoe. Read more...

Shop Men's Women's

Absolute positioned content and CTA buttons

Style. It Doesn't Have To Hurt - Shop Women's and Men's Shoes

Comfortable and stylish sandals, sneakers,
dress shoes, boots, slippers and more.

STYLE. IT DOESN’T HAVE TO HURT.

Style. It Doesn't Have To Hurt - Shop Women's and Men's Shoes

Comfortable and stylish sandals, sneakers, dress shoes, boots, slippers and more.

STYLE. IT DOESN’T
HAVE TO HURT.

Sale Lockup Coupon - .sale-lockup

View Vionic Sale
View Mens and Womens Sale

Tech Section two Column

elevated support

Our Elevated Support technology gives you comfort
and style in our wedges and comfortable heels.
 

Elevated Support

natural alignment

Vionic technology helps promote alignment
from the ground up. It’s built into all of our
sandals, slippers, active shoes and casual flats.

Elevated Support Technology

elevated support

Our Elevated Support technology gives you comfort and style in our wedges and heels.

Natural Alignment Support

natural alignment

Vionic technology helps promote alignment from the ground up. It’s built into all of our sandals, slippers, active shoes and casual flats.

Elevated Support Technology

Tech Section one Column (men's)

natural alignment

Vionic technology helps promote alignment
from the ground up. It’s built into all of our
sandals, sneakers, casual and dress shoes.

Natural Alignment Support

natural alignment

Vionic technology helps promote alignment from the ground up. It’s built into all of our sandals, sneakers, casual and dress shoes.

Natural Alignment Support

Featured Products (home page)

Banded Image - .banded-image-bg

Background image, text, absolute links over images

step up to the occasion

Gift the shoes he’ll need when his feet are feelin’ fancy.

mobile code here

Banded Image - .banded-image-bg

Background image, text, link over image

simply the best

Step into spring with Midi Perf, the most popular
style of the season. Walk on clouds!

simply the best

Step into spring with Midi Perf, the most popular style of the season. Walk on clouds!

Simply The Best - Vionic Midi Perf

Play Video Inline (Vimeo)

Banners

Full Width Banner with inset

Video Banner