Shop Designer

Under Shop Design the designer opens. On the left you choose building blocks, in the middle you see your shop, on the right you edit the selected element.

Enlarge

1. 1Areas: Homepage, Header, Mobile header, Footer and Design. A page of your own appears here as an extra tab.
2. 2Left panel: Blocks, Elements and Structure.
3. 3Device: preview for desktop, tablet and mobile.
4. 4Save and Publish: the status next to them shows whether everything is saved.
5. 5Factory reset: resets the whole design of the active theme. More below.

A block is a finished section, such as a hero image with an access code card or a gallery. The most popular ones are on the left. More blocks… opens the Block library with all of them.

Enlarge

The library sorts by categories such as Hero, Shop, Images & Gallery, Prices & Packages, Contact and Social media. One click adds the block at the end of the page. In the header and footer only matching blocks appear.

Click an element in the preview. It gets a frame with a small toolbar, and its settings open on the right.

Enlarge

1. 1Content, Style, Advanced: texts and images, then spacing, size, alignment, background and border, finally visibility.

• Toolbar: move, duplicate, delete. For texts the pencil opens editing right in the preview.
• Style: groups with a green dot contain your own values.
• Images: every image field opens your media library. JPG, PNG and WebP up to 10 MB.
• Structure: shows all elements as a tree. Change the order there by dragging.

Under Elements you add single building blocks. Drag an element into the preview or click it.

Enlarge

1. 1Elements: sorted into groups.

In texts, {{year}} inserts the current year and {{tenant}} the name of your studio. Handy for the copyright line.

The header exists twice: Header for large screens and Mobile header for tablet and phone. So each one fits its device exactly.

Enlarge

1. 1Scrolled? and Subpage? simulate how the header looks when scrolling and on subpages.

• Header elements: header bar, logo, navigation, cart button, access code and account button.
• The logo comes from your settings. With Logo source you can also choose your own image.
• A new header block is added in addition. Delete the old header yourself afterwards.

With the device switch you see your shop the way parents see it on that device.

• If you set spacing or font sizes in the tablet or phone view, they apply only there.
• An orange dot shows that a value differs from desktop. Clicking it brings back the desktop value.
• Under Advanced you hide an element on single devices.

Parents always see the last published version. Your work stays a draft until you publish.

1. 1Save stores the draft. The status changes to Saved.
2. 2Publish asks briefly and puts this area's draft live.
3. Repeat this for every area you changed.

• If you switch areas with open changes, Pixalo saves the draft automatically.
• If you close the window with open changes, the browser asks first.
• Only the owner may publish. Team members with access to Shop Design can save.

In the Design tab you set the look for the whole shop, including gallery, cart and checkout.

Enlarge

1. 1Note: these values apply everywhere in the shop.
2. 2Website colours: primary, secondary and accent colour with a preview.

• Website background and website colours.
• Primary and secondary button: colours, hover colour, border and corner radius.
• Input fields and card style: colours, borders, shadows and badge colours.
• Fonts: one for headings and one for body text, from Google Fonts.

Under Settings › Website theme you choose the base design of your shop in Designs. The other areas there cover the gallery, photo page, cart, checkout and customer account. More under Website theme.

• Pixalo saves your design per theme. If you switch back, your earlier design is there again.
• A theme you have never used starts with its template. It is live immediately.
• The colours from the Design tab also belong to each theme.