Store Builder
Payhip’s store builder allows you to fully customize the design of your store to match your brand. From customizing colors and fonts, to adding new sections and pages, the store builder does it all 😄
In this article, we’ll cover the basics of getting started with the store builder. Are you ready? Alright, let’s dive in!
In this article:
Store builder basics
Launch the store builder
To launch the store builder, head to the Store page and click Launch Your Store Builder.
You can also click Account at the top right of the screen followed by Store Builder.
Pages and sections
Your Payhip store is made up of pages and these pages are made up of sections. From the store builder you can add new pages or customize the ones that are there by default.
The type of page that you’re currently on will be shown at the top left of the screen. You can click this to open up a directory of your store pages and choose the one that you’d like to work on.
Click on a section to start editing it, or select Add section to add to the page. You’ll see that we have a bunch of different sections available to choose from!
Don’t forget to update the About Me section on your All Products page or your store will be published with the placeholder information that’s there.
Preview your store
You’ll see a preview of the page over on the right-hand side of the screen that will update as you make edits.
To see what your store will look like on a mobile device, you can click the dropdown menu at the top right of the screen and select Mobile.
To see what your live store site currently looks like you can hit Preview.
Not seeing your changes reflected when you preview your store? Hit the Publish button first.
Change the homepage
By default, the landing page for your store will be your All Products page. If you’d like to update this, go to the page that you’d like to set as the homepage and click the cog icon for it. Then select Set As Homepage.
Edit all pages at the same time
You can edit all the pages of your store individually, but what if you want to make some general changes to a group of pages (e.g. your collections)? No problem! Click the Edit all pages at the same time button.
Exit the store builder
If you’re done customizing your site and want to head back to your Payhip admin dashboard, click the three lines at the top left of the screen and select Exit store builder.
Don't forget to customize your "About Me" section!
Colors
Default color scheme
The overall color scheme of your Payhip store is called your default color scheme. To change that, you can click Change store style > Colors > Switch default color scheme. Choose from white, light, dark, black, or highlight. Then click Save Changes.
To change the colors of your default color scheme, click Start Editing Your Colors.
Make sure you have your default color scheme selected as the one you’d like to edit and then get creative with your colors! (Be sure to hit Save Changes when you’re done).
Click on a section in the preview window to open up the color settings for that section.
Change the color scheme of a specific section
Certain sections on a page can have a different color scheme to the default (e.g. the About Me section on the All Products page).
To update the color scheme of a specific section, click on that section over in the left-hand panel and scroll down. There you should see a Color Scheme tab, from which you can select the scheme you’d like to use. To update the colors of that color scheme, you can click the Edit button that appears.
Fonts
Having a font that matches your brand is an important part of how customers will perceive you. To update the font on your Payhip store, click on Change Store Style > Fonts.
You can either select from the options on the left-hand side, or click on the text that you’d like to edit in the preview window to open up its font settings.
For some of the text that you select, it will say “Synchronise with font: Miscellaneous”. This means that updating the font settings for Miscellaneous will update this text. To be able to edit the look of this text specifically, choose “Custom” instead.
Custom pages
The store builder allows you to add any extra pages that you need to your Payhip store (e.g. an FAQ). To add a new page, click the Add button at the top left of the screen and choose Custom Page.
Then type in a title for your page and hit Add. You can then start adding sections to your page!
Page settings
You have some additional options for custom pages, which you can access by clicking on the cog icon for the page.
This will open up a modal with a few different tabs:
- General - Update the page title, URL, and visibility (make it invisible if you want to work on the page before publishing it).
- SEO - Specify an SEO title and description that will be used when the page shows up in search engine results.
- Social Media - Change the image that appears when your page is shared on social media.
Add navigational links
If you've added a blog or a custom page to your Payhip store, then you'll want to add a link to it in your site header so that visitors can find it.
To do that, from the store builder click Header followed by Navigation Links > Edit Navigation Links. Then click + Add Link.
Next, choose the name of the link (this will appear in the navbar) and select which page you'd like to link to. You can link to another page in your Payhip store, or enter a URL to link to an external page. Click Add Navigation Link when you're done.
To reorder your links, hover over the six dots icon and drag and drop the links to where you want them.
A little inspiration
Check out these awesome, creative stores made by Payhip users for some inspiration.