TONIC + Shopify : Selling products from your pretty new website | TONIC SITE SHOP

TONIC + Shopify : Selling products from your pretty new website

At long last, we’ve added in a happy little shop page add-on to make all your e-commerce dreams come true. Gone are the days of ugly Paypal buttons or external cart pages. With this simple, easy to use add-on, we’ve made selling yo’ sh*t from your pretty new website a breeze using the foolproof buy button tools from Shopify Lite. Which means more cash in your pockets, and of course, more happy clients. Pop the champs, y’all!

So here’s how it all works, and how you can add a shop page to your TONIC site …

Step One: Install the Shop Add-On Page template into Showit

First up, you’ll need to install our handy Shop Add-On Page into your Showit Library. To do so, copy the sharekey from your download file to your clipboard, add new design to library, and paste the sharekey.

Then, to add the shop page to your existing site design, click the “+” button on page tab and select “add new page”, select the “Tonic Shop Add-On” template …

Select the “shop” page. Finally, click the “add” button. Boom. The page template is added to your site. Then follow the same steps for the shop “Product One” page template.

Step Two: Restyle Shop Template Pages

Now you’ll want to begin restyling the template to match the rest of your site. So while “applying my fonts and colors” is a great start and will get you pretty close, you may need to do a little manual re-styling depending on which template you have and how your style palette is configured. You’ll want to make sure you match the fonts, colors, treatments and etc to your existing pages so that it’s cohesive and consistent. We suggest making sure the first row of the index is just as you like it on both desktop and mobile before you duplicate. Make sure you style the product details page, too before you duplicate that and integration your content and set your index links.

Then, be sure to add in all your site menu, footer and other site canvases to the page as well. You’ll also want to be sure to add it to the various menus and link it accordingly.

Step Three: Integrate Content

Next, now that you got everything all prepped and ready, it’s time to add in your product images, product descriptions, and pricing info to the product details page and duplicate that page for each product you have. Then, you’ll want to build out the shop grid and ensure the buttons and images are linked the correlating product pages. We have three product per row set-up for you, so if you need more just duplicate that canvas and adjust the click action settings accordingly.

Step Four: Set up Shopify Lite

First things first: you’ll need to set up a Shopify Lite account here, add in your products (i.e. set prices, shipping details and etc.) and get everything in working order on the Shopify end of things.

Step Five: Add Shopify Buy Buttons

Finally, it’s time to add in the buy buttons. In Shopify, toggle over to sales channels, add a buy button sales channel, and then you’ll see that icon pop-up on your left-hand side. Click on buy buttons and then follow the prompts to set that up. You can stylize the buttons here if you wish, but since the options are a little limited and it would require lots of css code to customize it to match your site, we’ve found that it’s easiest to just bring the opacity down to 0% on the embed code layer and make pretty buttons inside of Showit instead. So just copy the code to your clipboard, and paste it into the already-set-up embed code layer in Showit which is on top of the buy button you see on the product page. Rinse and repeat for all products.

And there you have it, you’re now able to sell products from right inside your pretty website. Questions? Need help? Just let us know!

Previous Post:

Next Post:

Ready for More?

03

02

01

FEATURED POST

In these times, it's more important than ever to stay inspired.

Social (Media) Distancing

three ways Not to go Crazy Right now

FEATURED POST

Everyone's favorite macaroni and cheese lover on the biggest light bulb moments in her brand, the essentials in her carry-on, and her best advice for a designing website that's unmistakably "you."

Jenna Kutcher is Not Going with The Flow

BEHIND THE BAR:

03

01

02

FEATURED POST

Creating connection points, narrowing your scope, and all the inspiration you need to make it your own.

Top Shelf About Section

03

02

01

FIVE STEPS TO A 

buy now, pay later: on 6 month payment plans, your first payment is now *free*   |

all other sites:  TAKE 20% OFF with code: LETSDOTHISTOGETHER

The website of your dreams? It's already mixed to perfection and waiting for you at the bar.

Completely Customizable Websites

FOR THE MODERN, STYLISH CREATIVE

not your average templates

So, you need a website. Your current choices are: a ) a boring, big box template that does nothing to showcase your particular brand of awesome, and that you’d need to be some sort of code wizard to change, or b ) plunking down your life savings and your firstborn to hire a designer and a cranky developer, who will spend months and months of precious time cranking out something arguably “custom” you may or may not love in the end.

We’ve redefined the website template. And not only what it can be, but how it can look, what it can do, and what it can do for your brand.

THE MANIFESTO

Right? Nope. Enter option c ) Tonic Site Shop. Throw out everything you know about templates: these are cocktail-inspired, completely customizable websites designed for the kind of people that give a damn. Simply select your “cocktail,” download, customize anything −ANYTHING− you want, go live, grab the champagne and wait for the compliments ( and clients ) to roll in. They’re designer-made, and tailored just for you. Your old website is already jealous. 

View the Design

Has being a total boss ever looked THIS fun? We submit that it has not.

Margarita

View the Design

The cure for the common wedding photography website — fine art, high-impact, built to wow.

Clover Club

View the Design

It's the tonic for tired, too-complicated design, and it goes down real smooth.

Gin & Tonic

View the Design

For those who like their website warm, stylish, and modern, but finished with a little zest. 

Limoncello

View the Design

Clean and classic, tailored to perfection, and served with signature style. 

Martini

View the Design

Oui oui, très chic! Our sweet Vieux is fresh from fashion week in Paris.

Vieux Carré

View the Design

Built for the creative who craves simplicity - a stunning environment for beauty to thrive.

Bellini

View the Design

 Sleek, efficient, strategic, and ready to send all the dream clients straight through your door.

Greyhound

View the Design

A classic take on modern design, with personality peeking through the clouds of pretty.

London Fog

View the Design

A well-balanced cocktail of feminine and modern + dynamic and clean. 

Rosé Royale

View the Design

Stylish, sexy, bold and bright … undoubtedly the fashionista of the collection.

Cosmopolitan

View the Design

A minimalist’s heaven designed to make maximum impact.

Moscow Mule

View the Design

Your monthly Vogue was lost in the mail? Fortunately, we have its replacement.

Amaretto Sour

View the Design

So spacious, fresh and clean, it can’t go down without an “ahhh.”

Gin Fizz

View the Design

For the minimalists, the artists, the romantics, and really, everyone in between. 

Adriatique

View the Design

So smooth and seamless that if you get lost in all the pretty, it must be by choice.

Smokescreen

View the Design

Two parts classic, one part charm, with the kind of elegance that never goes out of style.

Charleston

View the Design

Your images can almost taste the Campari, and it goes down even smoother than it looks. 

Negroni

View the Design

Fashionable free spirits, stand (or twirl) at the ready: Lillet Blanc is your website home of dreams. 

Lillet Blanc

View the Design

Good news: Summer is never over when you've got a cool, refreshing Lemon Drop in your hand!

Lemon Drop

View the Design

If you're looking for simple and honest, with style in spades and space to breathe ...

Vodka Soda

View the Design

Long summer days at the lake and those cozy winter nights at the cabin in the mountains ...

Hemingway

SHOP our showit template COLLECTION

What's Your Brand Cocktail?

PULL UP YOUR BARSTOOL & TAKE THE QUIZ

take the quiz! (it only takes 60 seconds)

Find out the secret ingredients in your shaker, and what sets you apart from everyone else on the (top) shelf... Plus, get our specific strategies to ensure your ideal clients pick you off the menu every time.

what's your brand cocktail?

“If I could go back in time, I would purchase a Tonic site much earlier in my career. The high end feel of the template site combined with Jen and Jeff's creative direction and advice, instantly brought my work and brand to the next level. It allowed me to increase my prices and reach my dream client!”

PRAISE FOR TONIC

- Annamarie Akins

“If you know your website isn't as good as it SHOULD be and you're riding the struggle bus trying to figure out how everyone else seems to have gorgeous websites, buy a TONIC site. It's time you look just as good (if not better) than others in your industry and stand out in a way that's unique to you.”

PRAISE FOR TONIC

- Jenna Kutcher

“The creative geniuses behind Tonic Site Shop are the only people we trusted to help us build our brand, and you can trust their sites to build yours, too. 

PRAISE FOR TONIC

 - Amy & Jordan Demos

“To think that something like this exists purely from the heart of helping small businesses fly and have access to this level of branding that was once reserved for only the most established and top of the top of the market…I just think this is going to change everything.”

PRAISE FOR TONIC

- Mary Marantz

“If there is ONE thing in your business worth investing in (even more than your camera and lenses) it is your brand. TONIC is the only resource I recommend if you want to get it done right.” 

PRAISE FOR TONIC

 - Ben Hartley

“Tonic is the PERFECT resource for anyone needing a quick and simple way to get an incredible, flawlessly designed website.”

PRAISE FOR TONIC

- Hope Taylor

“Being able to create a creative, editorial, and professional website with TONIC has taken our brand to higher levels - more inquiries and bookings with our ideal clients! Cheers, indeed!”

PRAISE FOR TONIC

 - Luke & Cat Neumeyer

“TONIC revolutionized my business, I never wanted to send people to my site before, then Jeff & Jen re-mixed my online presence, and wow, THEY ARE GOOD. They got to the core of my brand and built a hand-crafted site around it. Wouldn't want to work with anyone else."

PRAISE FOR TONIC

- Joel Allegretto

“The idea that someone could take a gallery of their 50 best images, pair it with one of these incredible designs and have a brand and virtual storefront that will start going to WORK for them and allow them to hit the ground running by the weekend is mind-blowing. It’s game-changing.”

PRAISE FOR TONIC

- Mary Marantz

“TONIC not only gave me a gorgeous, sleek (easy to use!) design that elevates my brand, but also regularly introduces me to new cocktails I've yet to try. Win, win!”

PRAISE FOR TONIC

 - Abby Grace

see our sites in action

Beth Kirby

"From colors to fonts, my brand new site is everything I ever wanted in a website — and I didn't even know such magic was possible without knowing a lick of code, but my homies at TONIC completely changed my world."  — Beth / @localmilk

Visit the Site

Elanaloo

“I can now say from experience, it feels phenomenal to have your corner of the internet feel like HOME. If you're tired of being embarrassed by your outdated website or  craving something that can really feel like YOURS – TONIC is your people. This is the BEST solution to web design I've ever come across.”— Elana, @elanaloo

Visit the Site

Caroline Logan

"If you're thinking about getting a TONIC site, is it too cheesy to say 'DO IT, You won't regret it?' Because it’s true. Your business will grow. Your bookings will increase. You'll be able to raise your prices. You'll attract and book your dream clients. You’ll be more confident than ever before in your brand. It's a no brainer!"  — Caroline

Visit the Site

Valorie Darling

“Not only are their designs gorgeous, intuitive and perfectly built for photographers, but their team really couldn't be more loving and supportive in the journey of bringing it all together.”  — Valorie

Visit the Site

The White Hearth

 "I always sought to make a fine product, but now I have a fine website to showcase it. If you’re putting off getting a Tonic site, learn from my experience and don’t wait any longer. It will be the site you’ll wish you always had!“ — Talia

Visit the Site

Amelia Brown

"With our Tonic template, we’ve been able to create a lush, magazine-style layout that showcases our process, inspirations, and story. It's been a pleasure to work with Tonic in creating our new website." — Amelia

Visit the Site

THE NEWSLETTER

Friends Don't Let Friends Get Boring Email

Ready for a little TONIC in your inbox? We send occasional, moderately witty emails with exclusive deals, design tips, recent blog favorites, cocktail recipes, and more.

Get on the VIP List