{"id":1177,"date":"2025-11-27T16:44:36","date_gmt":"2025-11-27T16:44:36","guid":{"rendered":"https:\/\/getbooked.software\/app\/?p=1177"},"modified":"2025-11-27T16:49:05","modified_gmt":"2025-11-27T16:49:05","slug":"store-design-full-tutorial","status":"publish","type":"post","link":"https:\/\/getbooked.software\/app\/store-design-full-tutorial\/","title":{"rendered":"Store Design \u2014 Full Tutorial"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This guide explains every setting in the Store Design<\/strong> section. Each option controls how your storefront appears and behaves for your customers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
  1. Colours<\/strong><\/li><\/ol>

    Primary Colour<\/strong><\/p>

    This is the main colour used throughout your store.
    It affects buttons, highlights, links, and other key elements.<\/p>

    How to change it:<\/strong><\/p>

    1. Click the colour box next to Primary Colour<\/em>.<\/li>
    2. Choose a colour from the palette or enter a hex code (e.g., #0055FF).<\/li>
    3. The preview updates immediately.<\/li><\/ol>

      Text Colour<\/strong><\/p>

      Controls the default colour of text across your storefront.<\/p>

      Tip:<\/strong>
      Use darker shades for light backgrounds, and lighter shades for dark backgrounds.<\/p>

      Contrast Colour<\/strong><\/p>

      Used for elements that need to stand out such as secondary buttons or labels.
      Choose a colour that contrasts clearly with your primary colour.<\/p>

      Unavailable Item Colour<\/strong><\/p>

      This colour is applied to:<\/p>

      • Out-of-stock products<\/li>
      • Unavailable product labels<\/li><\/ul>

        It\u2019s best to use a colour that clearly communicates unavailability, such as red or grey.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t\t\t\t\t\t
        1. Font Style<\/strong><\/li><\/ol>

          Select the typeface used across your store.<\/p>

          How to change it:<\/strong><\/p>

          1. Click the Font Style<\/em> dropdown.<\/li>
          2. Scroll through the available fonts (e.g., Playfair Display, Saira, Poppins).<\/li>
          3. Select the font you prefer \u2014 the preview updates automatically.<\/li><\/ol>

            Tip:<\/strong>
            Choose a font that reflects your brand\u2019s personality (modern, elegant, bold, minimalistic).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

            \n\t\t\t\t\t\t\t\t\t
            1. Feature Image Size<\/strong><\/li><\/ol>

              Controls the size of the main product images shown on category or feature sections.<\/p>

              Options:<\/strong><\/p>

              • Small<\/strong> \u2013 Compact product layout<\/li>
              • Medium<\/strong> \u2013 Balanced presentation<\/li>
              • Large<\/strong> \u2013 Bigger, more visual presentation<\/li><\/ul>

                Pick the size that complements your theme.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t\t\t\t\t\t
                1. Banner Section<\/strong><\/li><\/ol>

                  The banner area allows you to add a rotating slideshow at the top of your store.<\/p>

                  Adding a Banner Image<\/strong><\/p>

                  1. Click Choose File<\/strong>.<\/li>
                  2. Select an image from your device.<\/li>
                  3. (Optional) Add Slide Text<\/em> to display words over the banner.<\/li>
                  4. Click the +<\/strong> icon to upload additional slides.<\/li><\/ol>

                    Important:<\/strong><\/p>

                    All banner images should be the same size<\/strong> for a smooth, professional slideshow.<\/p>

                    Managing Banner Slides<\/strong><\/p>

                    Each banner you upload appears in a list. You can:<\/p>

                    • Edit the text<\/li>
                    • Remove a slide using the red bin icon<\/li>
                    • Add more slides as needed<\/li><\/ul>

                      Banner Size<\/strong><\/p>

                      Controls the vertical height of your banner.<\/p>

                      Common choices:<\/p>

                      • Small<\/strong> \u2013 Neat, compact<\/li>
                      • Large<\/strong> \u2013 Full, dramatic hero section<\/li><\/ul>

                        Banner Coverage<\/strong><\/p>

                        Determines how the image fits into the banner space:<\/p>

                        • Cover Area<\/strong> \u2014 fills the space completely, may crop edges<\/li>
                        • Contain Area<\/strong> \u2014 entire image is visible, may show space around it<\/li><\/ul>

                          Choose the option that best suits your images.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

                          \n\t\t\t\t\t\t\t\t\t

                          5. Theme Selection<\/strong><\/p>

                          You can choose from the available store themes:<\/p>

                          Themes Available:<\/strong><\/p>

                          • MARKET<\/strong> (currently installed)<\/li>
                          • Pro BOOK<\/strong><\/li>
                          • Minimal<\/strong><\/li><\/ul>

                            How to change your theme:<\/strong><\/p>

                            1. Click Preview<\/strong> to see the theme in action.<\/li>
                            2. Click Install<\/strong> to apply it to your store.<\/li><\/ol>

                              Themes alter layouts, spacing, fonts, and overall styling.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

                              \n\t\t\t\t\t\t\t\t\t
                              1. Additional Store Options<\/strong><\/li><\/ol>

                                These toggles add extra functionality to your store.<\/p>

                                Social Share<\/strong><\/p>

                                Enables social media sharing buttons on product pages.<\/p>

                                When enabled:<\/p>

                                • Customers can share your products on platforms like Facebook, X (Twitter), or WhatsApp.<\/li><\/ul>

                                  Enable Reviews<\/strong><\/p>

                                  Allows customers to write product reviews and give ratings.<\/p>

                                  When enabled:<\/p>

                                  • A reviews section appears on product pages<\/li>
                                  • Customers can leave comments and star ratings<\/li>
                                  • Helps build trust and credibility<\/li><\/ul>

                                    \u2018Powered By\u2019 Credits<\/strong><\/p>

                                    Controls whether \u201cPowered by [Your Platform Name]\u201d appears in the footer.<\/p>

                                    • On:<\/strong> Shows the credit<\/li>
                                    • Off:<\/strong> Removes your platform branding from the customer-facing store<\/li><\/ul>

                                      Allow Search on Store<\/strong><\/p>

                                      Adds a search bar so customers can easily find products.<\/p>

                                      Highly recommended for larger catalogues.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

                                      This guide explains every setting in the Store Design section. Each option controls how your storefront appears and behaves for your customers. Colours Primary Colour This is the main colour used throughout your store.It affects buttons, highlights, links, and other key elements. How to change it: Click the colour box next to Primary Colour. Choose […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1177","post","type-post","status-publish","format-standard","hentry","category-getting-started"],"acf":[],"_links":{"self":[{"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/posts\/1177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/comments?post=1177"}],"version-history":[{"count":4,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"predecessor-version":[{"id":1181,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/posts\/1177\/revisions\/1181"}],"wp:attachment":[{"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getbooked.software\/app\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}