Welcome to Bloom

Welcome to the documentation for the Bloom Shopify theme! This guide is designed to help you make the most of the theme’s features and customization options to create a stunning and functional online store.

Home page image goes here Home page image goes here

The theme is thoughtfully crafted with a balance of elegance and functionality, catering to businesses that require a highly flexible and customizable design to showcase their products and services effectively.

Key features

  • Effortless Customization: Effortlessly adjust layouts, colors, typography, and sections to align with your branding.
  • Mobile-First Approach: Designed to provide a flawless user experience on all devices.
  • SEO-Friendly Structure: Ensure your store ranks well on search engines with built-in SEO best practices.
  • Flexible Homepage Layouts: Combine and configure sections to create a homepage that suits your business needs.
  • Rich Media Support: Incorporates high-quality images and videos to showcase products effectively.
  • Online store 2.0: Fully compatible with Online Store 2.0.

Header/navigation

The header of your store is often the first point of interaction for your customers. It should be clear, well structured, intuitive and reflective of your brand’s style.

header image goes here Home page image goes here

Here are the steps to cutomize the header in Bloom theme

Setting up the header

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Select the Header Section: In the theme editor, click on ‘Header’ to begin customizing your store’s header.

    header settings image goes here

  3. Upload Your Logo: Upload a high-resolution version of your logo. Adjust the width and placement to suit your design preferences.

    theme settings logo image goes here

  4. Configure Navigation: Select your main menu. This needs to be previously created in the Shopify admin area, under ‘Content’ and then ‘Menus’.

    menu settings image goes here

    Adjust the texts, links and nestings to ensure the navigation is user-friendly and accessible.

  5. Preview and Test: Always preview your header on various devices to ensure it displays correctly and is functional across desktop and mobile platforms.
  6. Publish Your Changes: Once satisfied with the configuration, click ‘Save’, and then ‘Publish’ to update your live site.

Properly setting up your header will guide visitors seamlessly through their shopping experience, reflecting the professionalism and style of your brand.

Currency/language selector

The header section contains settings to enable with currency/language dropdowns on header only. This shown on both mobile and desktop depending on the settings chosen. To show the currency/language pickers more overtly within the header on desktop, adjust the ‘Show localization options’ settings in the header section.

Announcement bar

The announcement bar is a versatile tool within your Bloom theme that allows you to communicate important information to your customers directly on your homepage or across different pages.

Announcement bar image goes here

This can include a simple text or a link to another page or some external page. To add a text or link navigate to the announcement bar section in the header group from your theme editor. Add a block under the announcement bar. Adjust the text and link to target your audience effectively.

Announcement bar settings image goes here Announcement bar settings image goes here

Footer

The Footer section of your Shopify store serves as a crucial area for displaying important information like contact details, quick links, and social media icons.

footer image goes here Home page image goes here

Setting up the Footer section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Navigate to the Footer Section: In the theme editor sidebar, scroll to the bottom and click on ‘Footer’ to expand the section settings.

  3. Configure General Settings:

    • Email singup: Enable this option to display subcribe to marketing section at the bottom of your store. Subscribers added automatically to your ‘accepted marketing’ customer list. Learn more
    • Policy links: Enable this option to plolicies links in your footer. You can customize your policies pages from your shopify admin > settins > policies.
    • Logo : Enable this option to show your logo on the brand information block in the footer. You can set up a heading to show when the logo is disabled.
    footer settings image goes here

  4. Add Blocks: Click ‘Add block’ to include various types of content such as text, links, menus, or social media icons.

    footer add blocks image goes here

    For each block, enter the required details. For instance, link menus to relevant pages like ‘Contact Us’, ‘Privacy Policy’, or ‘FAQ’.

  5. Customize the Layout: Choose the number of columns for the footer to structure the content based on your preference and the importance of the information displayed. Adjust the background color and text color to match your brand’s styling guidelines.
  6. Preview and Save: Use the preview option to see how the footer looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the footer content is organized in a way that is easy for customers to navigate. Regularly update the footer information to include the latest links, company information, or social media profiles.

Slideshow

The Slideshow section is a dynamic and engaging way to showcase multiple images in a carousel format, making it ideal for highlighting featured products, promotions, or brand imagery directly on your store’s homepage.

Slideshow image goes here Slideshow mobile image goes here

Setting up the Slideshow section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Slideshow Section: In the Theme editor sidebar, click Add section. Scroll to and select the Slideshow section.

  3. Upload Images: In the Slideshow settings, click on each slide to add an image. You can upload or select images from your library. Adjust the settings for each slide, such as alignment, text overlay and opacity to ensure it displays correctly across all devices. We recommend uploading a dedicate mobile image with a square aspect ratio.

    slideshow settings image goes here

  4. Customize Settings: Configure the slideshow settings to match your desired user experience. This includes:

    • Autoplay: Toggle whether the slideshow automatically cycles through each slide.
    • Autoplay Speed: Set the duration each slide remains visible before transitioning to the next slide.
    • Arrows and Pagination: Choose whether to show the pagination style as Dots or as buttons. You can set pagination style separately for desktop and mobile devices.
    slideshow block settings image goes here
  5. Preview and Save: Use the preview option to see how the footer looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure your images are optimized for the web to improve loading times and maintain image quality across all devices. Consider the mobile experience, as the text overlays and buttons need to be legible on smaller screens.

Collection list

The Collection list section is a way to showcase the product catergories for your store. This section is ideal for stores with a wide range of products that can be grouped into different collections.

Collectio list image goes here Collectio list image goes here

Setting up the Collection list section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Collection list Section: In the Theme editor sidebar, click Add section. Scroll to and select the Collection list section.

  3. Customize Settings: Configure the collection list settings to match your desired user experience. This includes:

    • Autoplay: Toggle whether the slideshow automatically cycles through each slide.
    • Autoplay Speed: Set the duration each slide remains visible before transitioning to the next slide.
    • Arrows and Pagination: Choose whether to show the pagination style as Dots or as a Counter. You can set pagination style separately for desktop and mobile devices.
    Collection list settings image goes here

  4. Add Blocks: Click ‘Add collection’ to include block to showcase the collections you want to showcase in this section.

    collection add blocks and block settings image goes here collection add blocks and block settings image goes here

    For each block, set the collection and a background color for the block.

  5. Preview and Save: Use the preview option to see how the footer looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Featured collection

The Featured collection section is a way to showcase the products of your top performing collection in carousal.

Featured collection image goes here Featured collection image goes here

Setting up the Featured collection section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Featured collection Section: In the Theme editor sidebar, click Add section. Scroll to and select the Featured collection section.
  3. Add collection: In the Theme editor sidebar, navigate to Featured collection > collection. Select a collection to showcase the products from that collection.

  4. Customize Settings: Configure the featured collection settings to match your desired user experience. This includes:

    • Autoplay: Toggle whether the slideshow automatically cycles through each slide.
    • Autoplay Speed: Set the duration each slide remains visible before transitioning to the next slide.
    • Arrows and Pagination: Choose whether to show the pagination style as Dots or as a Counter. You can set pagination style separately for desktop and mobile devices.
    featured collection settings image goes here

  5. Adjust product card: From the featured collection section adjust the settings to modify the product cards to your liking.

    featured collection product card settings image goes here

    You can also adjust other settings like description, maximum product count, view all style etc from here.

  6. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Collection banner

The Collection banner section is a promotional section that you can use to showcase any store promotions or any collection thats preforming well.

Collection banner image goes here Collection banner image goes here

Setting up the Collection banner section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Collection banner Section: In the Theme editor sidebar, click Add section. Scroll to and select the Collection banner section.

  3. Add Blocks: Click ‘Add block’ to add your promotional block.

    Collection banner block settings image goes here

    For each block, you can djust the ‘heading’, ‘subheading’ and the ‘button link’.

  4. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Text columns with icons

This section is for highlighting your services with relevant icons and text.

Text columns with icons image goes here Text columns with icons image goes here

Setting up the Text columns with icons section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Text columns with icons Section: In the Theme editor sidebar, click Add section. Scroll to and select the Text columns with icons section.
  3. Adjust items per row: From the section settings adjust 'items per row' to control the number of blocks that you want to show in a row in desktop.

  4. Add Blocks: Click ‘Add block’ to add your promotional block.

    Text columns with icons block settings image goes here

    For each block, you can djust the ‘text’, ‘subtext’ and the ‘image’ for that block.

  5. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Product deals

This section is for highlighting flash sales in your store. Create urgency with a countdown timer for weekly deals.

Product deals image goes here Product deals image goes here

Setting up the Product deals section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Product deals Section: In the Theme editor sidebar, click Add section. Scroll to and select the Product deals section.

  3. Add products: Click ‘Add products’ to add products to your section.

  4. Adjust countdown timer: From the section settings adjust 'end time' and 'end date' to control the countdown timer in your section. You can also adjust the color, background image and text color for the countdown timer.

    Product deals settings image goes here

  5. Adjust layout and autoplay settings: From the section settings adjust 'slideshow' to adjust the autoplay behaviour for this section. You can also change the pagination style from the desktop and mobile layout section.

    Product deals add product settings image goes here
  6. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Regularly update this section to keep it relevant. Keep the countdown end time up to date. Ensure the blocks are optimized across all devices.

Testimonial

The Testimonial section is a way to showcase the customer feedbacks of your store. This addes credibility to your services.

testimonial image goes here testimonial image goes here

Setting up the Testimonial section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Testimonial Section: In the Theme editor sidebar, click Add section. Scroll to and select the Testimonial section.

  3. Add reviews: In the Theme editor sidebar, navigate to Testimonial > Add reviews. Customize the review content from the editor.

    testimonial block settings image goes here

  4. Customize Settings: Configure the featured collection settings to match your desired user experience. This includes:

    • Heading text and color scheme: Customize the heading text to your liking and the color scheme for the section.
    • Arrows and Pagination: Choose whether to show the pagination style as Dots or as a Counter. You can set pagination style separately for desktop and mobile devices.
    testimonial settings image goes here
  5. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Newsletter

The Newsletter section is a way for your visitors to subscribe to your newsletter service.

newsletter image goes here newsletter image goes here

Setting up the Newsletter section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Newsletter Section: In the Theme editor sidebar, click Add section. Scroll to and select the Newsletter section.

  3. Adjust background & button: From the section settings adjust the background image for the section. We also recommen to add a separate image with proper resolution for mobile devices. You can also adjust the button color to match your store's branding.

    testimonial block settings image goes here

  4. Add blocks: In the Theme editor sidebar, navigate to Newsletter > Add blocks. You can add either a heading, subheading or a email form as block.

    testimonial block settings image goes here
  5. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Promotional campaign

This section can showcase multiple promotional contents in a carousal.

promotional campaign image goes here promotional campaign image goes here

Setting up the Promotional campaign section

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.
  2. Add the Promotional campaign Section: In the Theme editor sidebar, click Add section. Scroll to and select the Promotional campaign section.

  3. Customize Settings: Configure the section settings to match your desired user experience. This includes:

    • Autoplay: Toggle whether the section automatically cycles through each block.
    • Autoplay Speed: Set the duration each block remains visible before transitioning to the next block.
    • Arrows and Pagination: Choose whether to show the pagination style as Dots or as buttons. You can set pagination style separately for desktop and mobile devices.
    slideshow settings image goes here

  4. Add blocks: In the Theme editor sidebar, navigate to Promotional campaign > Add offer card.

    testimonial block settings image goes here

    For each offer card you can adjust the title, description and link to the offer.

  5. Preview and Save: Use the preview option to see how the section looks on different devices. Once satisfied with the configuration, click ‘Save’ to apply the changes.

Ensure the blocks are optimized across all devices.

Product page

The product page is a critical part of your Shopify store, where customers make the decision to purchase. It’s essential to configure this page carefully to provide all the necessary product information in a clear and appealing manner.

Product page image goes here Home page image goes here

Setting Up the Product page

  1. Access the Theme Editor
    1. Log in to your Shopify admin dashboard.
    2. Go to ‘Online Store’ and then ‘Themes’.
    3. Find your active theme and click on ‘Customize’ to open the theme editor.
  2. Navigate to the Product Page: In the dropdown at the top of the theme editor, click on ‘Products’ and then ‘Default product’ to access the settings for this template. In the left hand side panel click on ‘Main product’ and this will bring up the options specific to product page configurations.
  3. Adjust the settings: Refer to the sections within this guide for more.
  4. Preview and Test: Use the theme editor’s preview feature to view your changes in real-time. Check the display on various devices and browsers to ensure compatibility and responsiveness.
  5. Save and Publish: Once you are satisfied with the setup, click ‘Save’ to apply the changes to your live site. Regularly revisit the product page settings to tweak and optimize based on customer feedback and performance analytics.

Product media

Bloom offers a flexible layout for product media in the product page You can adjust the media position and width for desktop devices.

Product page desktop media settings image goes here

For mobile devices Bloom uses a carousal to showcase your media. You can adjust the carousal settings from 'Main product' section inside the product page

Blocks

Bloom features a flexible layout structure that lets you choose the position for the blocks inside the product page.

Title

Shows the product title

Description

Displays product description set from the admin side

Price

Displays product price and unit price set from the admin side

Variant picker

Displays the variant picker for the product. This section also shows the product swatch id it's enabled from the admin side

Product rating

Displays product rating

Inventory status

Displays the current inventory stuatus for the product.

Tags

Displays product tags

Weight

Displays product weight information

Product page main product settings image goes here
Quantity selector

Displays the quantity selector for the product.

Buy buttons

Bloom offers accelerated checkout options at product page, You can enable this from the buy buttons block in the main product section.

Product buy button image goes here
Payment options

This block shows the payment options available for the product.

Product payment methods image goes here Product payment methods image goes here
Collapsible row

This block shows additional information about the product.

Product payment methods image goes here Product payment methods image goes here

Product recommendations

Displays the related products in the product page. The related products are set by using the search and discovery app by shopify.

Product page related product image goes here

You can adjust the product card style, autoplay settings and pagination layout from this section.

Product page related product image goes here

Collection page

The Collection template in the Bloom theme allows you to show and organize your products efficiently, in an SEO-friendly way.

Collection page image goes here Home page image goes here

Setting Up the Collection page

  1. Access the Theme Editor
    1. Log in to your Shopify admin dashboard.
    2. Go to ‘Online Store’ and then ‘Themes’.
    3. Find your active theme and click on ‘Customize’ to open the theme editor.
  2. Navigate to the Collection Page: In the dropdown at the top of the theme editor, click on ‘Collecions’ and then ‘Default collection’ to access the settings for this template. In the left hand side panel click on ‘Product grid’ and this will bring up the options specific to product grid configurations in the collection page.

  3. Adjust the product grid settings: Adjust the product grid settings to your liking.

    Collection page settings image goes here

  4. Adjust the collection banner settings: Adjust the banner settings to your liking.

    Collection page settings image goes here
  5. Preview and Test: Use the theme editor’s preview feature to view your changes in real-time. Check the display on various devices and browsers to ensure compatibility and responsiveness.
  6. Save and Publish: Once you are satisfied with the setup, click ‘Save’ to apply the changes to your live site. Regularly revisit the product page settings to tweak and optimize based on customer feedback and performance analytics.

Blog post page

The Blog post template in the Bloom theme allows you to showcase your blog articles efficiently, in an SEO-friendly way.

article page image goes here article page image goes here

Setting Up the Blog post page

  1. Access the Theme Editor
    1. Log in to your Shopify admin dashboard.
    2. Go to ‘Online Store’ and then ‘Themes’.
    3. Find your active theme and click on ‘Customize’ to open the theme editor.
  2. Navigate to the Blog posts page: In the dropdown at the top of the theme editor, click on ‘Blog posts’ and then ‘Default blog post’ to access the settings for this template. In the left hand side panel click on ‘Blog post’ and this will bring up the options specific to Blog post configurations in the Blog post page.

  3. Adjust the settings: Adjust the blog post and settings to your liking.

    Blog post page settings image goes here

  4. Adjust the default banner: Click on the banner section under template to adjust the default banner for your blog posts.

    Blog post page settings image goes here
  5. Preview and Test: Use the theme editor’s preview feature to view your changes in real-time. Check the display on various devices and browsers to ensure compatibility and responsiveness.
  6. Save and Publish: Once you are satisfied with the setup, click ‘Save’ to apply the changes to your live site. Regularly revisit the product page settings to tweak and optimize based on customer feedback and performance analytics.

Typography

Typography settings in the Bloom theme allow you to customize the fonts and text appearance across your entire Shopify store. Properly setting up your typography can enhance readability, improve user experience and ensure your store’s aesthetics align with your brand identity.

Typography settings image goes here
  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Navigate to Typography Settings: In the Theme editor sidebar, click on Typography under the Theme Settings menu. This will bring up options for customizing fonts throughout your store.

  3. Customize Headings: Within the Typography settings, you can choose a font for your headings. This includes selecting a specific type family and adjusting the font weight. You have the ability to set the size, letter spacing and text capitalization (such as uppercase, lowercase, or capitalize).

  4. Adjust Body Text: Similar options are available for body text. Choose a comfortable font size to ensure that your text is easy to read on all devices. Adjustments here affect all regular text on your site, including paragraph text in blogs and product descriptions.

  5. Preview Changes: Use the theme preview feature to see how your new typography settings look in real-time. Adjust as necessary to get the perfect appearance for your store.

  6. Save Your Settings: Once you are satisfied with your typography settings, be sure to click Save to apply the changes across your store.

Note: When selecting fonts, consider the impact on site performance. More font styles or heavier fonts can increase page load times, which might affect user experience and SEO. If in doubt, opt for system fonts or those with minimal weights.

Item cards

The Item Cards consist of product, collection and blog settings in the Bloom theme allow for detailed customization of how these items are displayed across your store. These settings are crucial for creating a visually appealing and cohesive shopping experience that can drive conversions and enhance user engagement.

Item card settings image goes here
  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Navigate to any Item card Settings: In the Theme editor sidebar, click on any of the product, blog, collection card under the Theme Settings menu. This will bring up options for customizing them your store.

    item card settings image goes here

  3. Adjust card style: Adjust the border, shadow, padding to match your websites style

  4. Preview Changes: Use the theme preview feature to see how your new typography settings look in real-time. Adjust as necessary to get the perfect appearance for your store.

  5. Save Your Settings: Once you are satisfied with your typography settings, be sure to click Save to apply the changes across your store.

Cart & Common elements

Some commmon elements throughout the store like cart, button, inputs can be globally customized from the theme settings.

Item card settings image goes here
  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Navigate to any common element Settings: In the Theme editor sidebar, click on any of the button, input, cart under the Theme Settings menu. This will bring up options for customizing them your store.

    common element settings image goes here

  3. Adjust element style: Adjust the border, shadow, padding to match your websites style

  4. Preview Changes: Use the theme preview feature to see how your new typography settings look in real-time. Adjust as necessary to get the perfect appearance for your store.

  5. Save Your Settings: Once you are satisfied with your typography settings, be sure to click Save to apply the changes across your store.

Color schemes

The Colors settings in the Bloom theme provide the flexibility to tailor the color palette of your Shopify store to match your brand’s identity.

This feature utilizes Shopify’s color schemes, allowing you to maintain consistency and enhance the visual appeal of your store effectively. For more, refer to Shopify’s color scheme documentation.

  1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Bloom theme and click Customize.

  2. Open the Colors Setting: In the Theme editor, navigate to Theme settings and select Colors. Here you will see the six predefined color schemes that come with your Bloom theme. In each color scheme, various color settings can be adjusted, such as background, text, links and buttons. By clicking on Add Scheme, further ones can be added.

  3. Adjust Color Schemes: You can set different color schemes for various elements of your store. Adjust the background colors, text colors, button colors and link colors within each scheme. Each color setting may include the ability to set solid colors or utilize gradients, providing further customization.

  4. Preview Your Color Choices: As you make changes, use the theme’s preview feature to see how your choices affect the look of your store. This step is crucial to ensure that your color choices work well together and are comfortable for your visitors to view.

  5. Save Your Changes: Once you are satisfied with your color settings, click Save to apply them to your live site.

Colors play a critical role in user experience and brand perception. Choose colors that reflect your brand but also consider usability and accessibility. For instance, ensure there is good visual balance and sufficient contrast between text and background colors to ensure readability for all users.