All Collections
Getting started with Toggle
The Full Toggle Guide
Customising the look and feel of your webshop
Customising the look and feel of your webshop

Learn how easy it is to make a great-looking webshop in Toggle.

Stephen Evans avatar
Written by Stephen Evans
Updated over a week ago

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.

Screenshot on 2021-04-14 at 11:40:37.png
Screenshot on 2021-04-14 at 11:43:06.png

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:


Did this answer your question?