Refer a Friend and Earn a $5 Reward >

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.

Standard Modules

Two Column 50/50 column split

With shoes/product .product-image-stack

spring sidekicks

Slip on your favorite sunrise-to-sunset
espadrille inspired sneakers.

Vionic Trend Shoes Showcase

Two Column 33/66 column split

With shoes/product .product-image-stack

Vionic Trend Shoes Showcase

trend: espadrilles

Showcase the newest boho trend and choose the silhouette
that compliments your style.

Two Column - Custom column widths

Image Swap / roll-overs (hover over shoes)

Image Swap

Hover over the shoes below

Vionic Summer Styles

CTA Hover over Lifestyle Image - Dev example

signature street style

Sport the coolest trend for fall in
our chic high-top sneaker collection.

Lookbook Testimonial

SEO block hide/show content

The Science of Style

Too often, supportive shoes for women come at the expense of style, forcing you to choose between comfort and appearance. At Vionic, we’re disrupting the footwear space by transforming how people view women’s shoes. Vionic unites comfort and style, offering shoes for women in the season’s most coveted trends - all built with superior arch support and high-quality materials to support all-day wear. Read more...

Shop Men's Women's

Absolute positioned content and CTA buttons

Discover The Secret

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


Sale Lockup Coupon - .sale-lockup

Shop Women's Sale

Tech Section two Column

elevated support

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

Natural Alignment Support

natural alignment

Orthaheel 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

Banded Image - .banded-image-bg

Background image, text, links over images

trend alert: texture

Strut with confidence in our favorite
snake-textured trend for fall.

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!

Play Video Inline (Vimeo)


Home Page Banner with inset

Video Banner