Sharetribe allows you to customize your brand color and images to make your marketplace feel uniquely yours. You can customize your brand color and images in Console at Design > Branding.
There are several different types of brand images. Each type of brand images requires a different size to properly display throughout your marketplace. Unless otherwise stated, images should be in .png or .jpg format.
Colors
You can edit the colors of many elements in your marketplace (see details below).
There are multiple different ways for you to set your branding colors. If you know their hexadecimal values (for example, the hex value of black is #000000), you can add that in directly. You can also use RGB and HSL notations. Alternatively, you can pick a color from the color palette, or use the eyedropper icon to pick a color from your logo or another image.
Main brand color
The marketplace color is used in a variety of user interface elements in your site, including buttons, links, and icons.
Primary button color
This color is used for the most important user actions (along with where in the Template code it is used):
on the sign up page and signup confirmation (
SignupForm.js,ConfirmSignupForm.js)on the log in page (
LoginForm.js)to verify the user email address (
EmailVerificationForm.js)in the "Reset password" flow (
PasswordChangeForm.js,PasswordRecoveryForm.js,PasswordResetForm.js)for a provider to select a listing to edit (
ManageListingCard.js)to edit a listing availability (
EditListingAvailabilityExceptionForm.js,EditListingAvailabilityPlanForm.js)to add and edit the provider's payment details (
StripeConnectAccountStatusBox.js)to contact a provider (
ContactDetailsForm.js,InquiryForm.js)to select a date or time (
BookingDatesForm.js,BookingTimeForm.js)to start a paid transaction or inquiry (
OrderPanel.js,InquiryWithoutPaymentForm.js,ProductOrderForm.js,CheckoutPageWithInquiryProcess.js,StripePaymentForm.js)to save a payment method (
PaymentMethodsForm.js)to accept a transaction (
ActionButtonsMaybe.js)to send a review (
ReviewForm.js)
By default, this uses a light green (color value #2ecc71), which clearly signals that this is a positive ("You should do this") action, for the user. It is important to use a color that will make white text readable.
Email color
The email color is used in email notifications for buttons and links. It does not apply to links that users may share in their messages (included in the email notifications).
Marketplace logo
Your marketplace logo is shown on your marketplace top bar and in the footer.
You can choose to display your logo in three different sizes. Depending on the size the recommended uploaded image is different:
Small: The display height of the logo is 24 pixels. We recommend using a logo of 48 pixels in height and no more than 640 pixels in width.
Medium: The display height of the logo is 36 pixels. We recommend using a logo of 72 pixels in height and no more than 640 pixels in width.
Large: The display height of the logo is 48 pixels. We recommend using a logo of 96 pixels in height and no more than 640 pixels in width.
As you might notice, increasing your logo size increases logo height while keeping the logo width the same. Therefore, it is important to upload a logo that suits the size of the logo you wish to display. You might need to create multiple logos of different heights as you experiment with different sizes. We share some tips on how to ensure a good looking logo here.
Favicon
The favicon is shown on the browser's tab. If your logo has a simple icon, you can use this icon as your favicon. It’s also known as the tab icon. For your favicon image, use a square image in dimension 48x48 pixels or bigger.
App icon
The app icon is similar to the favicon: it is a square icon representing your site in different browser contexts. For example, the app icon is used when your marketplace is bookmarked to a mobile home screen or when viewing open tabs in Chrome browser.
Make sure that your app icon has a square aspect ratio and dimensions of at least 512x512 pixels for best results.
Background image for login/signup page
The background image for the login/signup page is the image that your users see in the background when logging in. It’s also shown on other pages related to user authentication, including Password Recovery, Password Reset, and Email Verification. Finally, the image is used on the page where users are informed that they do not have permission to post a listing, view listings, or initiate a transaction.
The image should be appealing and give users a glimpse into your marketplace, what they should look forward to. It is a great way to give another good impression to new users. Don't be scared to use a significant image, or even a full color block (saved as an image) if it suits your brand. It should have a 2:1 aspect ratio and a minimum size of 1200x600 pixels. The background image for the login pages can be a maximum of 2400px wide. Here’s an example of how the background image would look in the signup page:
Social media image
The social media image is shown on the social media card when someone shares your marketplace in a post on Facebook, X (Twitter), LinkedIn, or another social media service. This image is shown alongside information from the particular page of your marketplace being shared, such as your marketplace slogan if your homepage is shared or the listing description if a listing page is shared.
This image is a fallback image for situations where there is no image attached to the page being shared. The search page is an example of such a page. For content pages like your landing page or about page, the sharing image cane be controlled per page using the Pages editor.
For the best result, your social media image should be around 1200x600 pixels. If you upload a bigger image, then the social media platform may crop it, potentially leaving out certain information or an important image, such as the marketplace name or slogan.