Getting started
By navigating between the Products and Customise sections on your Toggle account, you can create a stand-out webshop that sings to the same tune as your brand.
If you haven't already created a product, then you'll need to do this first.
💡Tip: when customising the webshop, click on the 'My shop link' found in the bottom left of the side bar and refresh the page to see how your edits are looking!
**read on for more information
To get started, log in to your Toggle dashboard and open up the Customise menu:
You’ll see various options that you can customise:
Text styles
Colour
Page text
Logo
Image display
You also have the option to customise your emails. We’ve written a whole other article for this!
Text styles
The Text Styles screen allows you to change the fonts and styles that are used on your Toggle webshop.
Product titles text style
Fonts for the titles on your Toggle webshop can be changed using these options.
Product descriptions style
This is your main ‘body’ font. We use it for the gift card descriptions, but we’ll also use it in various other places on the webshop for a consistent look-and-feel.
Button text style
Buttons use the same font as your main text settings. However, you can tweak the style here if you like from Regular to Bold.
Gift prices text style
Prices use the same font as your gift card descriptions, but if you want to make them Bold or Regular to differentiate them a little, you can do that here.
Colour
Head to Customise > Colour to start tweaking the colours of your webshop.
Page colour
The page colour of your webshop (the bit that sits behind your content) can be tweaked here.
When clicking onto the Page Colour bar you'll have a pallet show up where you can pick your colour using the slide bar or from the main pallet.
The chequered slide bar allows you to create a coloured gradient for your chosen colour which gives more (or less) tones to your webshop.
If you know the exact colour code you want then you can simply paste it into the colour code field.
Background image
Or if you would prefer to use a background image as the backdrop to your webshop, you can upload one here. File sizes should be under 2MB.
You can choose to upload a large image to fill the screen (try around 1920px x 1080px) or upload a smaller image or texture and "tile" it:
You can also choose to fix your background so that it doesn't stretch the image to fit the screen, it will just scroll down with you.
If you would like your background image to fill the whole webshop page, including the bar at the top where your logo sits, then slide the gradient tool on the Page Colour bar to the left.
Remember, on mobile devices, your customers won’t see a whole lot of the background image, so this will mainly make your site look great for desktop and tablet visitors.
Button colour
Button colours are quite straight forward; just tweak the colour here for the background colour of your buttons. One point to note is that the text colour of buttons is always white, so make sure you choose a colour that makes them readable.
The colour you choose here will also be used for any ‘call to action’ buttons on your emails.
Text colour
The text colour section controls the colour that is used in the main body copy of the webshop. It will sit on a white background, so again just make sure you choose something that makes it readable.
Shop description text colour
Finally, you can change the colour that is used for the introductory text that displays on your webshop.
We also use this colour for the footer links (a space for your terms and conditions and privacy policy) and in the footer text on your emails.
Email footer text colour
You can also change the colour of the text on your email footers. To see how this looks, you can preview your emails.
Page text
The Page text section allows you to customise the introductory text that shows on your webshop and also the footer text at the bottom of the page, including a link to your contact page.
On this same page you can also edit the text that shows up after a customer makes a successful purchase on the webshop.
The Order 'thanks' page is what the customer will see once they’ve made a purchase. It’s a good place for any additional text you might want your customers to read, e.g. asking them to check their spam folder in case their digital gift email landed there.
The footer text can look something like this:
The buttons on your shop by default say 'Select' however you can change this to something different like "Show me more". You can even add emojis to make the button stand out and entice people to click.
Logo and Icons
Upload logos to put the finishing touches on your webshop. The logo will show on all your emails and at the top of your webshop. You can also add your own favicon to your Toggle shop here.
The logo will show at the top of your Toggle webshop, and will pull through to your emails. File sizes for your logo should be under 2MB, and we recommend dimensions of around 730 x 300px.
The thumbnail logo is used for larger square images; currently only on Apple Wallets at the time of writing this article. For the thumbnail logo, file sizes should be under 2MB and recommended size is 300 x 300px.
Favicons are used by most browsers to represent your website on browser tabs and in bookmarks. Your favicon logo will show on website browser tabs to show that the website is linked to your brand. The dimensions for the favicon should be 32 x 32px.
Webclips are used in places like Safari’s bookmarks. They show up when your website link is saved to your smartphone’s home screen. The dimensions for a webclip logo should be 256 x 256px.
Image display
This tab will simply allow you to decide how you want the images associated with each product to appear on your shop.
The letterbox option will look like this:
The square option will look like this:
Previewing your webshop
Remember you can see how your webshop looks through out the process of customising by clicking on 'My shop link'.
Custom domain
You can also create your own custom domain. We can’t do this for you but we can finalise the set up once you’ve done your bit.
Legal stuff
Your legal links can also be edited from the Customise tab. We have a guide here for your T&Cs and Privacy Policy.
A final note on the webshop layout
The layout of your webshop will be slightly different if you have just one product available, or two or more available.
If you want to offer one product, your webshop will have a 'linear' layout as shown below. A customer when clicking onto your webshop will be directed straight to the product, bypassing the need to click onto a specific product if more were available. If you've written some Homepage text, it will not show up.
If you have two or more products available your webshop will show up in a 'tiled' layout. A customer who visits your webshop will be taken to the homepage where they can browse what's available and then click onto a product. The homepage text does show here.
Re-ordering the layout of your products
You can also reorder where a product sits on your webshop if you have multiple products available. For example, if you have set a promotional code on a particular product or have a pay-it-forward that you want customers to see first when visiting your webshop, you can have them appear at the top of the page.
To do this go to the Products section on your Toggle dashboard and drag and drop your products accordingly.
On the product edit page, you can also decide which images you’d like to have showing. You have the option, also, to add more than one image. You can also have these ‘autoscroll’ in a slide-show style.
There's a few other bits that you can add to the webshop, including what appears on the customers checkout journey. Find out about them here: