Switching Color Palettes

You may not know this, but Vogue has been packaged with three unique color schemes. Obviously, the red version you’re currently viewing, but there’s two more beauties that are waiting to be unleashed! Switching to either of the additional color schemes is quite easy to do.

If you’re a lover of chocolate, caramel, and red wine, maybe the color scheme Caramel is for you. Let’s go over the steps to load Caramel into Vogue.

1. Sign-in to your admin then press the “Look & Feel” tab.
2. Choose the theme.liquid file in the sidebar.
3. Locate {{ 'stylesheet.css' | asset_url | stylesheet_tag }} near the top.
4. Change to {{ 'caramel.css' | asset_url | stylesheet_tag }}.
5. Locate {{ 'seek.png' | asset_url }} further down the page.
6. Change to {{ 'seek-caramel.png' | asset_url }}.
7. Press the “Save Changes” button at the bottom of the page.
8. Choose the product.liquid file in the sidebar.
9. Locate {{ 'purchase.png' | asset_url }} near the bottom.
10. Change to {{ 'purchase-caramel.png' | asset_url }}.
11. Locate {{ 'checkout.png' | asset_url | img_tag: 'Checkout' }} below.
12. Change to {{ 'checkout-caramel.png' | asset_url | img_tag: 'Checkout' }}.
13. Press the “Save Changes” button at the bottom of the page.
14. Choose the cart.liquid file in the sidebar.
15. Locate {{ 'update.png' | asset_url }} near the bottom.
16. Change to {{ 'update-caramel.png' | asset_url }}.
17. Locate {{ 'checkout.png' | asset_url }} below.
18. Change to {{ 'checkout-caramel.png' | asset_url }}
19. Press the “Save Changes” button at the bottom of the page.

You’ll notice you simply changed the primary stylesheet and a few images. Now, go to your shop domain and check it out. Perhaps Caramel is not your thing, but Deep Sea is. Again, you’ll switch the stylesheet and a few images to load the new look into Vogue.

1. Sign-in to your admin then press the “Look & Feel” tab.
2. Choose the theme.liquid file in the sidebar.
3. Locate {{ 'stylesheet.css' | asset_url | stylesheet_tag }} near the top.
4. Change to {{ 'sea.css' | asset_url | stylesheet_tag }}.
5. Locate {{ 'seek.png' | asset_url }} further down the page.
6. Change to {{ 'seek-sea.png' | asset_url }}.
7. Locate {{ 'feed.png' | asset_url }} below.
8. Change to {{ 'feed-sea.png' | asset_url }}.
9. Press the “Save Changes” button at the bottom of the page.
10. Choose the product.liquid file in the sidebar.
11. Locate {{ 'purchase.png' | asset_url }} near the bottom.
12. Change to {{ 'purchase-sea.png' | asset_url }}.
13. Locate {{ 'checkout.png' | asset_url | img_tag: 'Checkout' }} below.
14. Change to {{ 'checkout-sea.png' | asset_url | img_tag: 'Checkout' }}.
15. Press the “Save Changes” button at the bottom of the page.
16. Choose the cart.liquid file in the sidebar.
17. Locate {{ 'update.png' | asset_url }} near the bottom.
18. Change to {{ 'update-sea.png' | asset_url }}.
19. Locate {{ 'checkout.png' | asset_url }} below.
20. Change to {{ 'checkout-sea.png' | asset_url }}
21. Press the “Save Changes” button at the bottom of the page.
22. Choose the blog.liquid file in the sidebar.
23. Locate {{ 'feed.png' | asset_url }} half way down.
24. Change to {{ 'feed-sea.png' | asset_url }}.
25. Press the “Save Changes” button at the bottom of the page.
26. Choose the index.liquid file in the sidebar.
27. Locate {{ 'feed.png' | asset_url }} half way down.
28. Change to {{ 'feed-sea.png' | asset_url }}.
29. Press the “Save Changes” button at the bottom of the page.
30. Choose the page.liquid file in the sidebar.
31. Locate {{ 'feed.png' | asset_url }} half way down.
32. Change to {{ 'feed-sea.png' | asset_url }}.
33. Press the “Save Changes” button at the bottom of the page.

Just like in the previous color switch, you simply replaced the stylesheet and a few images. Go to your store and refresh the browser window to check out Deep Sea. That’s all there is to switching the look within a few minutes. There’s one additional change that can be made as well.

If you would prefer a solid header as opposed to the diagonal stripes, images have been provided with your theme to make this quite easy. Depending on what color scheme your using, choose the primary stylesheet (stylesheet.css, caramel.css, or sea.css) from the sidebar. Locate the group titled ”@group Header” and add ”-flat” to the filename. It will look like this:

stylesheet.css:
background: #9b0103 url(header-flat.png) repeat-x center top;

caramel.css:
background: #984201 url(header-caramel-flat.png) repeat-x center top;

sea.css:
background: #42849b url(header-sea-flat.png) repeat-x center top;

And there you have it. Another easy customization to your shop! Perhaps I’ll add some other color schemes in the future…