--- title: Store Design description: HelixPay's console offers a variety of design settings to help you customize and set up your website’s appearance. --- [Skip to content](https://support.mosaic-solutions.com/helixpaysupport/store/website-design#main-content) [![HP\_TICKETING SOLUTIONS\_LOGO-BLACKDSFAS (1)](https://support.mosaic-solutions.com/hs-fs/hubfs/HP_TICKETING%20SOLUTIONS_LOGO-BLACKDSFAS%20(1).png?width=201&height=50&name=HP_TICKETING%20SOLUTIONS_LOGO-BLACKDSFAS%20(1).png)](https://support.mosaic-solutions.com/helixpaysupport/?hsLang=en) - [Contact Client Support](https://support.mosaic-solutions.com/helixpaysupport/contactus) Open main navigation Close main navigation - [Contact Client Support](https://support.mosaic-solutions.com/helixpaysupport/contactus) - - [Log in to console.helixpay.ph](https://console.helixpay.ph/) [Log in to console.helixpay.ph](https://console.helixpay.ph/) How can we help you? - There are no suggestions because the search field is empty. 1. [HelixPay Support](https://support.mosaic-solutions.com/helixpaysupport?hsLang=en) 2. [Design Store](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en) 3. [Foundational Design](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en#foundational-design) # Store Design ## Customize the foundation of your store design. Apply your brand or event logo, colors, and tagline. 1\. Go to the Brand Logo section and click the ✐*edit icon* on the top right portion of the brand logo upload area . ![brandlogoscreenshot](https://support.mosaic-solutions.com/hs-fs/hubfs/brandlogoscreenshot.png?width=549&height=265&name=brandlogoscreenshot.png)   2\. Upload an image of your logo (accepted formats: .png, .bmp, .jpg, .jpeg, .gif). *Tip:* Use a 1:1 ratio image for best display.   3\. Modify the logo toggles to your liking.  ![showinstorefrontlogo](https://support.mosaic-solutions.com/hs-fs/hubfs/showinstorefrontlogo.png?width=233&height=57&name=showinstorefrontlogo.png) *Sample logo display on the storefront:* *![samplelogodisplay](https://support.mosaic-solutions.com/hs-fs/hubfs/samplelogodisplay.png?width=512&height=68&name=samplelogodisplay.png)*   *![densebrandlogo](https://support.mosaic-solutions.com/hs-fs/hubfs/densebrandlogo.png?width=512&height=66&name=densebrandlogo.png)*   *Sample dense brand logo on the storefront: * *![sampledensebrandlogo](https://support.mosaic-solutions.com/hs-fs/hubfs/sampledensebrandlogo.png?width=599&height=55&name=sampledensebrandlogo.png)* *![navbartoggle](https://support.mosaic-solutions.com/hs-fs/hubfs/navbartoggle.png?width=347&height=71&name=navbartoggle.png)*   4\. Under “Logo Link”, enter the URL where users should go when they click the logo (e.g., shop, portfolio page, etc.). *Note:* If there is no URL, the default logo link leads to the storefront.  ![logolink](https://support.mosaic-solutions.com/hs-fs/hubfs/logolink.png?width=512&height=104&name=logolink.png)   5\. Upload a Favicon. *Note:* The favicon appears in browser tabs, bookmarks, and mobile browser tabs – keep it simple and recognizable even at small sizes. *![faviconnn](https://support.mosaic-solutions.com/hs-fs/hubfs/faviconnn.png?width=460&height=195&name=faviconnn.png)* * Sample favicon on the storefront: * *![faviconsample](https://support.mosaic-solutions.com/hs-fs/hubfs/faviconsample.png?width=345&height=66&name=faviconsample.png)*   6\. Update brand colors. - For easier, application click “Quick Brand Colors Setup” to set your storefront colors and update any of the fields — use hex codes, RGB, or color names for a fully branded look. ![storecolorsquickbrandsetup](https://support.mosaic-solutions.com/hs-fs/hubfs/storecolorsquickbrandsetup.png?width=307&height=75&name=storecolorsquickbrandsetup.png)![brandcolorssetup](https://support.mosaic-solutions.com/hs-fs/hubfs/brandcolorssetup.png?width=471&height=194&name=brandcolorssetup.png) -  The color fields will automatically be populated based on brand colors setup. Adjust manually if necessary below.  ![fullcolorsss](https://support.mosaic-solutions.com/hs-fs/hubfs/fullcolorsss.png?width=670&height=312&name=fullcolorsss.png) - (*Optional*) Toggle on “Enable Component Background Color” if you want your text to be readable on a background with heavy elements.   ![enablecomponentbackgroundcolor](https://support.mosaic-solutions.com/hs-fs/hubfs/enablecomponentbackgroundcolor.png?width=425&height=76&name=enablecomponentbackgroundcolor.png)   *Sample with no Component Background Color on the storefront:* *![samplecomponentbackgroundcolor](https://support.mosaic-solutions.com/hs-fs/hubfs/samplecomponentbackgroundcolor.png?width=670&height=237&name=samplecomponentbackgroundcolor.png)* *Sample with Component Background Color on the storefront:* *![componentbackgroundcolor](https://support.mosaic-solutions.com/hs-fs/hubfs/componentbackgroundcolor.png?width=670&height=263&name=componentbackgroundcolor.png)*   7\. Under Button Settings, set the design basics of your buttons.    ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-32-13-1629-AM.png?width=670&height=239&name=undefined-May-29-2026-08-32-13-1629-AM.png)    8\. Under Product Variants and Properties Settings, set the design basics of your product cards.  ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-32-39-6805-AM.png?width=670&height=239&name=undefined-May-29-2026-08-32-39-6805-AM.png)    9\.  If you wish to further customize your store background, upload a background photo. Click the ✐*edit icon* on the top right portion of the gray area to upload your background image, then choose its position (e.g., Center) and size (e.g., Cover).  ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-33-24-8959-AM.png?width=480&height=283&name=undefined-May-29-2026-08-33-24-8959-AM.png)   ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-33-36-0397-AM.png?width=484&height=98&name=undefined-May-29-2026-08-33-36-0397-AM.png)   *Sample Background Image on the storefront:*   ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-34-05-4351-AM.png?width=540&height=191&name=undefined-May-29-2026-08-34-05-4351-AM.png)  10\. Add a footer tagline and design it to your liking.  ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-34-34-7909-AM.png?width=670&height=168&name=undefined-May-29-2026-08-34-34-7909-AM.png)  *Sample Footer Tagline on the storefront:* * ![](https://support.mosaic-solutions.com/hs-fs/hubfs/image-png-May-29-2026-08-35-59-6915-AM.png?width=652&height=300&name=image-png-May-29-2026-08-35-59-6915-AM.png) *   11\. Under Footer Social Media Icons, click the Add Social Media Icon button to add icons leading to your social media platforms to your storefront footer.  ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-36-39-0428-AM.png?width=670&height=142&name=undefined-May-29-2026-08-36-39-0428-AM.png)  - If you have a specific image of your social media icon, you may upload it.  ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-37-51-5567-AM.png?width=711&height=630&name=undefined-May-29-2026-08-37-51-5567-AM.png)  -  If you want to choose from default icons like Facebook, Discord, etc, toggle on “Choose from default icons”   ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-38-08-0953-AM.png?width=729&height=589&name=undefined-May-29-2026-08-38-08-0953-AM.png)  -  Once done choosing, encode the link to your social media platform and toggle on “Visible on store” and “Visible on blast” to ensure visibility.   ![](https://support.mosaic-solutions.com/hs-fs/hubfs/undefined-May-29-2026-08-38-15-0846-AM.png?width=716&height=686&name=undefined-May-29-2026-08-38-15-0846-AM.png)    - [Getting Started](https://support.mosaic-solutions.com/helixpaysupport/getting-started?hsLang=en#main-content) - [Users](https://support.mosaic-solutions.com/helixpaysupport/getting-started?hsLang=en#users) - [Design Store](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en#main-content) - [Foundational Design](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en#foundational-design) - [Core Design](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en#core-design) - [Optional Design](https://support.mosaic-solutions.com/helixpaysupport/design-store?hsLang=en#optional-design) - [Event Setup](https://support.mosaic-solutions.com/helixpaysupport/event-setup?hsLang=en#main-content) - [Setup Tools](https://support.mosaic-solutions.com/helixpaysupport/event-setup?hsLang=en#setup-tools) - [Creating Events](https://support.mosaic-solutions.com/helixpaysupport/event-setup?hsLang=en#creating-events) - [Creating Products](https://support.mosaic-solutions.com/helixpaysupport/event-setup?hsLang=en#creating-products) - [Navigate Console](https://support.mosaic-solutions.com/helixpaysupport/navigate-console?hsLang=en#main-content) - [Set Inventory](https://support.mosaic-solutions.com/helixpaysupport/navigate-console?hsLang=en#set-inventory) - [Maximize Store](https://support.mosaic-solutions.com/helixpaysupport/maximize-store?hsLang=en) - [Boost Promotions](https://support.mosaic-solutions.com/helixpaysupport/boost-promotions?hsLang=en) - [Event Day](https://support.mosaic-solutions.com/helixpaysupport/event-day?hsLang=en) - [Finances](https://support.mosaic-solutions.com/helixpaysupport/finances?hsLang=en) - [FAQs](https://support.mosaic-solutions.com/helixpaysupport/faqs?hsLang=en) - [Client Support](https://support.mosaic-solutions.com/helixpaysupport/client-support?hsLang=en) [![HELIXPAY-LOGO-BLACK-BG (2)-1](https://support.mosaic-solutions.com/hs-fs/hubfs/HELIXPAY-LOGO-BLACK-BG%20(2)-1.jpg?width=227&height=60&name=HELIXPAY-LOGO-BLACK-BG%20(2)-1.jpg "HELIXPAY-LOGO-BLACK-BG (2)-1")](http://mosaic-solutions.com) E-commerce Technology for Events and Experiences [mailto:hello@helixpay.ph](mailto:hello@helixpay.ph) HelixPay Ticketing Solutions Help Center