Organic Theme Documentation

The Collection Sidebar helps customers quickly browse product categories from your store. It displays a list of selected collections in a sidebar and opens a category drawer with additional collections when the More Categories button is clicked.

Collection Sidebar Settings
Customize the appearance and behavior of the collection sidebar directly from the Theme Editor.

The Product Swatches feature in the Organic theme transforms product options like colors into interactive visual swatches. Instead of relying on text-based selections, customers can easily view and choose options through intuitive, clickable samples.

Organic’s Search page lets you control the number of products per page and the number of products per column.
You can also configure filters, filter layout, product card settings, quick view, and quick view position.

The Filter Layout setting on the search page allows you to adjust the product filter layout. You can set it to vertical or drawer.
Click on the Filter button to open filter drawer

Vertical filter layout

Organic's Collection Page consists of three major sections: Banner With Breadcrumb, Collection Hub, and Collection. These sections work together to provide a complete shopping experience by helping customers navigate collections, browse categories, and discover products efficiently.

Banner With Breadcrumb

Banner With Breadcrumb section displays the collection title, breadcrumb navigation, and collection banner image. It helps visitors identify their current location within the store and creates an attractive introduction for the collection page.

Available settings include:

• Color Scheme – Select the section color palette.
• Border Radius – Control the corner radius of the banner.
• Section Width – Choose between wide and container layouts.
• Image Position – Display the banner image on the left or right side.
• Heading – Customize the collection heading content.
• Current Breadcrumb Label – Define a custom breadcrumb title.
• Image – Upload a custom banner image.
• Content Background – Set the content area background color.
• Image Height – Adjust the banner image height.
• Desktop & Mobile Spacing – Configure top and bottom spacing.

Collection Hub

Collection Hub section allows merchants to showcase featured collections using custom collection cards. Customers can quickly navigate between popular product categories directly from the collection page.

Section settings include:

• Color Scheme – Choose the section color style.
• Section Border Radius – Customize corner rounding.
• Heading – Add and style the section heading.
• Font Style – Select heading or body typography.
• Font Size – Control heading size.
• Heading Alignment – Align heading left, center, or right.
• Column Limit – Set the maximum number of collection items.
• Enable Slider – Display collection cards in a slider layout.
• Columns Per Row – Configure the number of items displayed per row.
• Desktop & Mobile Padding – Adjust spacing for all devices.

Collection Hub Block Settings include:

• Select Collection – Choose the collection to display.
• Custom Collection Image – Upload a custom image instead of the collection image.
• Custom Collection Title – Override the collection title with custom text.

Collection

Collection section displays products from the current collection and provides powerful filtering, sorting, and product card customization options to improve the shopping experience.

• Color Scheme – Select the collection section style.
• Section Border Radius – Configure section corner rounding.
• Show Heading – Enable or disable the collection heading.
• Show Collection Image – Display the collection banner image.
• Image Height – Set the collection image height.
• Image Opacity – Adjust collection image transparency.
• Number of Products Per Page – Control products shown per page.
• Number of Products Per Column – Define products displayed in each row.
• Pagination Type – Choose between default pagination and infinite scroll.

Filter & Sorting Settings include:

• Enable Sorting – Allow customers to sort products.
• Filter Layout – Choose between vertical sidebar and drawer layout.
• Keep Filter Tabs Open by Default – Expand filter groups automatically.
• Filter Block Border Radius – Customize filter panel appearance.

Product Card Settings include:

• Image Aspect Ratio – Configure product image proportions.
• Image Size – Choose contain or cover image display mode.
• Show Secondary Image on Hover – Display alternate product image on hover.
• Card Background – Enable product card background styling.
• Title Uppercase – Display product titles in uppercase.
• Show Vendor – Display vendor information.
• Show Quick View – Enable quick product preview.
• Product Content Alignment – Align product details left, center, or right.
• Mobile Columns – Control the number of products displayed on mobile devices.

Setting Up Product Filters

Product filtering is powered by Shopify's Search & Discovery app. Before filters appear on the collection page, they must be configured within Shopify.

1. From your Shopify Admin, go to Apps → Search & Discovery.
2. Open Filters and click Add Filters.
3. Select the filters you want to display, such as Availability, Price, Product Type, Vendor, Variant Options, or Metafields.
4. Save your changes.
5. Return to the theme editor and enable filtering in the Collection section settings.

Once configured, customers can use these filters on collection pages to quickly narrow down products and find relevant items.

Customers can browse products using advanced filtering and sorting options such as availability, price, size, color, category, and other Shopify-supported filters. Combined with sorting options like Best Selling, Featured, Price, and Newest, the Collection page helps shoppers quickly find the products they need.

The Organic product page offers flexible settings for media, spacing, and color schemes, and provides a variety of blocks within section. These blocks include the variant picker, title, price, inventory status, quantity selector, add-to-cart buttons, collapsible content, and more. The product page also includes a Recently viewed section and Related products section.

• Color Scheme: Select the color scheme applied to the product section to match your store's branding and design.
• Section Border Radius: Adjust the corner roundness of the product section container for a softer or more modern appearance.
• Enable Sticky Add to Cart: Display a sticky add-to-cart bar while customers scroll through the product page, making it easier to purchase products at any time.
• Media Width: Choose the width of the product media area relative to the product information area.
• Media Columns: Configure whether product media is displayed in one or two columns for the desktop layout.
• Add Thumbnail: Enable thumbnail navigation below or beside the main product image, allowing customers to quickly browse product media.
• Media Border Radius: Customize the corner radius applied to product images and media items.
• Media Size: Select how product images are displayed within their containers: Contain keeps the entire image visible, while Cover fills the container area.
• Constrain Media: Restrict media dimensions to maintain a consistent image presentation across products.
• Enable Image Background: Add a background behind product images to improve visibility and presentation.
• Image Background Color: Choose the background color displayed behind product images when the image background option is enabled.
• Show Arrows (Mobile): Display navigation arrows on mobile devices for easier image browsing.
• Show Thumbnails (Mobile): Display product image thumbnails on mobile devices to help customers navigate product media.
• Desktop Spacing: Adjust the top and bottom spacing of the product section on desktop devices to create a balanced layout.

Product Page Blocks

1. Show Badges : Displays product badges that help highlight important product statuses such as sale offers, discounts, sold-out products, or other promotional labels. These badges improve product visibility and draw customer attention to key product information.

2. Title : Displays the product title on the product page. This block helps customers quickly identify the product they are viewing and serves as the primary product heading.

3. Price : Displays the product price along with compare-at prices, discounts, and sale pricing when applicable. This block ensures customers can clearly see product pricing information before purchasing.

4. Separator : A horizontal line or separator element used to visually divide content sections on the product page. This block helps organize the layout and improve readability by creating distinct visual separation between different content blocks.

• Separator opacity : Separator opacity controls the transparency level of the separator, allowing you to adjust its visibility and visual prominence on the product page.
• Separator color : Select the color of the separator line.

5. Variant Picker : Allows customers to select available product variants such as size, color, flavor, material, or style. Variants can be displayed using buttons, dropdowns, or a mixed layout depending on the selected settings.

• Options type – Controls how product variants are displayed.
  • Dropdown – Displays all variant options as dropdown selectors.
  • Button – Displays all variant options as clickable buttons/swatches.
  • Mixed – Displays color options as swatches and all other options as dropdown selectors.
• Variants style – Determines the layout of variant options.
  • Stack – Displays variant options on separate lines.
  • Inline – Displays variant options in a single row where space permits.
• Border radius – Adjusts the roundness of the variant picker container corners.

Read more about adding color swatches using category metafields

6. Quantity Selector : Provides controls for customers to increase or decrease the quantity of the product before adding it to the cart. This makes it easy to purchase multiple units of the same item.

7. Inventory : Displays the product's stock status and inventory availability. This block can be used to inform customers about product availability and low-stock situations, helping create urgency and improve purchasing decisions.

• Inventory Threshold : Defines the stock quantity limit used to determine when inventory is considered low. In this example, the threshold is set to 10.
• Inventory Layout : Controls how inventory information is displayed. Available options are:
  • Default: Shows inventory using the standard display format.
  • Progress Bar : Displays stock levels visually using a progress bar.
• In Stock Color : Sets the color used when inventory is above the threshold and available in stock. Current color : #178D2B (green).
• Out of Stock Color : Sets the color used when inventory reaches zero or is unavailable. Current color : #FF0000 (red).
• Threshold Color : Sets the color used when inventory falls at or below the defined threshold. Current color : #3A5A40 (dark green).

8. Custom Content : Allows you to add custom content directly to the product page. This can be used to display additional information, promotional messages, product highlights, specifications, or any other relevant content.

9. Collapsible Tab : Displays content inside expandable and collapsible sections. This block is useful for organizing information such as product descriptions, benefits, ingredients, care instructions, FAQs, shipping information, return policies, or other detailed content without overcrowding the page.

• Title – Specifies the heading displayed for the collapsible tab. In this example, the title is "Description".
• Content – Contains the information shown when the tab is expanded. The rich text editor allows formatting such as headings, bold text, italics, links, and lists.
• Show Description – When enabled, the tab's description is displayed alongside or below the title.
• Enable Border Top – Adds a border line to the top of the collapsible tab for visual separation.
• Enable Border Bottom – Adds a border line to the bottom of the collapsible tab for visual separation.
• Keep Tab Open by Default – When enabled, the tab content is expanded and visible when the page first loads.
• Show Background in Content – Applies the secondary background color to the content area, making it visually distinct from the surrounding page content.

10. Pickup Availability : Shows whether a product is available for local pickup at store locations. Customers can view pickup availability and location details directly from the product page when local pickup is enabled.

11. Add to Cart Button : Displays the Add to Cart button and dynamic checkout options. This block allows customers to add products to their cart and proceed with the purchase process quickly and efficiently.

• Show Dynamic Checkout Button : – When enabled, a dynamic checkout button (such as "Buy Now") is displayed alongside the Add to Cart button, allowing customers to skip the cart and proceed directly to checkout using their preferred payment method.
• Show gift card recipient form : – When enabled, displays a form for collecting gift card recipient information.

12. Complementary Products : This block displays recommended products that can be purchased together with the current product. The section appears on the product page as a product slider (for example, "You Can Buy This With"), helping customers discover related items and encouraging additional purchases.

• Heading : Customize the title displayed above the complementary products section.
• Number of products to load : Control how many complementary products are displayed in the slider.

How to Configure Complementary Products:

1. Open Shopify Admin.
2. Go to Apps → Search & Discovery.
3. Select the product for which you want to add recommendations.
4. Locate the Complementary Products section.
5. Add the products you want to recommend together.
6. Save your changes.
7. Return to the theme editor and ensure the Complementary Products block is enabled.

Once configured, the selected products will automatically appear in this section on the product page.

13. Trust Badges : Displays trust-building icons or badges such as secure payment, fast shipping, quality assurance, money-back guarantees, or other customer confidence indicators. These badges help improve trust and conversion rates.

• Heading – Customize the title displayed above the trust badge section.
• Heading alignment – Adjust the horizontal alignment of the heading and icons.

14. Product Siblings : Allows you to connect related products, such as different colors, styles, or versions of the same item. Linked products can be displayed as color swatches or product image swatches, enabling customers to switch between related products easily.
Follow the link to to know more about the Product Siblings setup

15.Vendor : Displays the product vendor, brand, manufacturer, or supplier name associated with the product. This can be useful for stores that sell products from multiple brands or vendors.

16.Size Chart : Displays a size guide or size chart to help customers choose the correct product size. This feature is particularly useful for clothing, footwear, accessories, and other size-dependent products.

• Title – Defines the text displayed for the size chart.
• Select icon – Choose an icon to display alongside the size chart title.
• Select desktop image – Upload or select the size chart image for desktop devices.
• Select mobile image – Upload or select the size chart image for mobile devices.
• Select page – Choose a Shopify page to display as the size chart content instead of images.
• Link to a product option – Restricts the size chart to products containing a specific option.
• Product option name – Enter the exact product option name (case-sensitive). If left blank, the size chart will be displayed for all products.

17. SKU : Displays the product SKU (Stock Keeping Unit). The SKU helps identify specific products or variants and can be useful for inventory management and customer reference.

18. Description : Displays the product's main description content. This block provides customers with detailed information about the product, including features, specifications, usage details, and other important information entered in the product description field.

19. Gift Wrap : Provides customers with an option to add gift wrapping to their order directly from the product page. This feature enhances the shopping experience by allowing products to be prepared for gifting before checkout.

Follow the link to to know more about the Gift Wrap setup

20. Share Buttons : Displays social sharing options that allow customers to share the product page through social media platforms or by copying the product link. This can help increase product visibility and customer engagement.

Gift Wrapping

The Gift Wrapping feature allows customers to add a special wrapping option directly from the product page. This enhances the shopping experience by offering a personalized touch for occasions.

Steps to Enable Gift Wrapping

Follow the steps below to enable the Gift Wrap option on the product page:

• Create Gift Wrap Product: Go to Shopify Admin >> Products >> Add Product.
• Add Product Details: Create a product named Gift Wrapping (URL handle: gift-wrapping) and set the price you want to charge for this service.
• Set Visibility: Make sure the product is not available in online store collections so it does not appear as a regular product.
• Save Product: Click Save to create the gift wrap product.
• Add Gift Wrap Block: Go to Online Store >> Themes >> Customize and open the Product Page.
• Insert Block: Add the block named Gift wrap in the product template as shown in the image below.
• Select Gift Wrap Product: Inside the Gift Wrap block settings, select the previously created Gift Wrapping product.
• Enable Feature: Once selected, the Gift Wrap checkbox will appear on the product page, allowing customers to add gift wrapping before adding the product to cart.

Recently Viewed Section

The Recently Viewed section automatically displays products that a customer has previously viewed while browsing your store. This feature requires no manual product selection, as the section dynamically updates based on each customer's browsing activity. By showcasing recently visited products, it helps customers quickly return to items they have shown interest in, improves product discovery, and creates a more personalized shopping experience.

Available Settings:

• Color Scheme: Select the color scheme used for the section to match your store's overall design.
• Heading: Customize the title displayed for the Recently Viewed section.
• Font Style: Choose the font style for the section heading.
• Font Size: Adjust the heading size to control its appearance and visibility.
• Heading Alignment: Set the heading alignment to left, center, or right.
• Number of Columns per Row: Control how many recently viewed products are displayed in each row on desktop devices.
• Image Aspect Ratio: Choose the aspect ratio for product images to maintain a consistent layout.
• Product Content Alignment: Adjust the alignment of product information such as titles, prices, and action buttons.
• Mobile Layout: Configure whether one or two product columns are displayed on mobile devices.
• Section Spacing: Customize the top and bottom padding to control the spacing around the section.

Related Products Section

The Related Products section displays product recommendations on the product page to help customers discover items similar or complementary to the product they are viewing. This improves product discovery and encourages additional purchases.

Related products are powered by Shopify's Search & Discovery app. Shopify can automatically generate recommendations based on product relevance, or merchants can manually select and customize the products shown for each product page.

Available Settings

• Color Scheme: Choose the color style for the Related Products section.
• Heading: Set the title displayed above the related products.
• Number of Products to Load: Define how many recommended products will be displayed.
• Products Per Row: Control how many product cards appear in each row on desktop.
• Mobile Layout: Choose between one or two product columns on mobile devices.
• Show Vendor: Enable or disable the product vendor name on product cards.
• Image Aspect Ratio: Set how product images are displayed inside cards.
• Image Size: Choose between Contain or Cover image display mode.
• Product Content Alignment: Align product title, price, and content inside the card.
• Section Spacing: Adjust top and bottom spacing for desktop and mobile devices.

How It Works

• Related products are automatically generated by Shopify based on product data.
• Merchants can override automatic recommendations using the Shopify Search & Discovery app.
• Each product can have its own unique set of related products.
• Any updates made in the Search & Discovery app are reflected automatically on the storefront.

The footer is the bottom section of your Shopify store that appears consistently across all pages. It helps customers access important information, navigate your store, subscribe to newsletters, and connect with your brand. The footer includes global section settings as well as customizable content blocks.

1. Configure newsletter signup, footer colors, spacing, border radius, payment icons, policy links, and localization options.
2. Add and manage footer content using available blocks such as Brand Information and Menu blocks.
3. Customize the width and appearance of each block to create a balanced footer layout.

A Blog is your brand’s storytelling powerhouse. a dynamic space on your website where you share exciting articles, helpful tips, behind-the-scenes stories, and the latest updates.

The blog article card includes a content position setting, allowing you to place the content either to the right or at the bottom of the image.

The blog page includes a Banner with Breadcrumb section at the top, followed by the Blog content section.

Blog post is a unique story you share with your audience, brought to life through an article template that shapes how your content appears on your site. This article template beautifully organizes every blog post page by showcasing:

1. The eye-catching title and publication date
2. A striking featured image or other media to draw readers in
3. An optional comments section for engaging with your readers

A powerful homepage grabs attention, builds trust, and guides shoppers effortlessly to what they’re looking for. It sets the tone, showcases your brand, and drives conversions. The homepage typically consists of the following sections:

Announcement bar, Header & Banner promo slider

Collection tabs

Collection list

Image banner

Frequently product block

Marquee strip

Banner with countdown

Products slider

Featured product

Product Highlight Slider

Customer testimonial

Scrolling images

Featured blog

Social showcase

Icon with text

The Banner Promo Slider section consists of two components: a slider displayed on the left side and a banner displayed on the right side. Both the slider and the banner can be added and managed through section blocks. The section also includes various settings such as section border radius, section height, and section width. Additionally, through the section settings, you can control the slider behavior, including whether to show navigation dots and adjust their alignment.

Available Block

Left banner

The Banner Promo Slider (Left banner) contains the slider section, where you can add and manage multiple slides. Each slide can include a slider image, heading, subheading, description text, and a button with a link. This block also provides various styling options, allowing you to customize typography, layout, and appearance to match your design requirements.

Right banner

The Banner Promo Slider (Right banner) contains the banner section of the layout. In this block, you can add and manage multiple banners. Each banner can include an image, heading, subheading, button, and additional styling options such as card border color, text color, button background, and button text color. This allows you to fully customize the appearance of each banner to match your design requirements.

The Collection Tabs is a dynamic layout that displays products from multiple collections using clickable tabs. It includes customization options such as color scheme, section width, border radius, heading, and typography settings. You can also control product layout, display settings, and spacing for both desktop and mobile, along with product card styling and hover effects.

Collection Tab block

The Collection Tab block includes settings to select a collection and display its title.

The Collection List section displays multiple collections in a structured layout, allowing users to browse different product groups easily. It offers customization options such as layout type (grid or slider), image size, desktop and mobile views, styling, and spacing controls. You can also add and manage collections using blocks.

The Collection Item block is used to display individual collection content within the Collection List section. It includes settings to select a collection, upload a collection image, and define the collection title and subtitle.

The Image Banner section is a visually impactful section designed to highlight promotions, product launches, or brand messaging using a full-width image or video. It includes customization options such as color scheme, section width, border radius, and section height. You can also control overlay settings including opacity and color to improve text readability. Additional options allow you to manage spacing for both desktop and mobile views.

The Image Banner section include Heading with Button block that allows you to add and customize a heading along with a button. You can set the heading text and adjust its font style and size to match your design. It also includes options to add button text, assign a link, choose whether to open the link in a new tab, and select the button style for better visual consistency.

The Frequently Bought Together section displays related products together in a single layout, encouraging users to purchase them as a bundle. You can customize the section using settings such as color scheme, section width, border radius, heading, font style, and font size. It also allows you to control the product layout with options for desktop and mobile columns, enable a slider view, and adjust spacing for both desktop and mobile. You can also add and manage Products using blocks

The Product block includes settings to select Product 1 and Product 2 within the block.

The Marquee strip section displays scrolling text or images allows you to customize its appearance and scrolling behavior with settings such as color scheme and section width. You can control the scroll speed, choose the scroll direction (left to right or right to left), and enable pause on hover. It also includes spacing options for both desktop and mobile. You can also add and manage text or images using Image Block .

The Image Block allows you to upload an icon and main image, add text content, and customize its font style and size. You can also enable text stroke for emphasis and assign an optional link to make the block clickable.

The Banner with Countdown section offers flexible settings to add a video or image, set the end date and time (YYYY-MM-DD HH:MM:SS format), and include promotional content. It also features a product slider that displays products through a collection selector, allowing you to showcase items from a chosen collection alongside the countdown timer. This section is ideal for creating urgency and encouraging faster purchase decisions by highlighting limited-time offers, promotions, or upcoming events. You can also add and manage heading and countdown using Heading with countdown block.

The Heading with Countdown block allows you to add a promotional heading along with a countdown timer. You can customize the heading text, choose the font style and size, and set the countdown date and time using the required format (DD-MM-YYYY hh:mm:ss). This helps create urgency by clearly displaying the remaining time for the offer or event.

The Products Slider section displays a main product slider centered within the layout, creating a focused and interactive product showcase. It includes settings such as color scheme, section width, border radius, and columns per row. You can enable auto-rotation of slides, display navigation arrows, and adjust spacing for both desktop and mobile views to ensure a balanced and responsive design. You can also add and manage Products using Slide block.

The Products slider section includes blocks for the product image, title, text, Button label, and Button link.

A Featured Product Section spotlights a single, high-priority product that you want to promote front and center. It's designed to grab attention, tell a story, and drive direct action — like adding to cart or learning more.

The Featured Product section includes blocks for the vendor, title, price, sku, separators, description, variant picker, quantity selector, and add-to-cart buttons . These blocks work together to present complete product information and make purchasing quick and user-friendly.

The Product Highlight Slider section is used to showcase a selected product in a visually engaging slider format. It includes options for heading, font style, font size, and alignment, along with product card settings such as image ratio, hover effect, vendor display, and quick view. You can also customize badge styling, layout spacing.

The Product Highlight Slider section includes Highlight Slide blocks for Right Image, Add product, Badge , Badge icon, description, Feature icon, Feature Title, Feature Description. These blocks work together to present complete product information in a structured layout

A Testimonial Section showcases quotes, feedback, or reviews from real customers, clients, or influencers. These are usually displayed as testimonial blocks — styled cards or boxes that make each piece of feedback stand out.

The testimonial section includes a testimonial block, as shown below.

The Scrolling Images section displays scrolling visuals with sticky text to capture user attention. It includes settings for color scheme, section width, border radius, background color, heading, description, and scrolling image configuration along with spacing controls for desktop and mobile.

The Scrolling images section includes blocks for an image and image link, allowing you to add and manage multiple images that will scroll across the section. Each block allows you to upload an image and assign a link, making it easy to create an engaging visual display

The Featured Blog section is used to showcase blog posts in a structured and engaging layout. It includes settings for heading, description, and blog selection, along with options to control the number of posts displayed. You can also customize layout options such as columns per row, slider settings, autoplay, loop, and spacing controls to create a smooth browsing experience.

Additionally, you can control article display settings such as image aspect ratio, content alignment, and visibility of elements like excerpt, tags, author, date, and read more button. These options help you create a fully customized blog presentation that improves readability and engagement.

The Social Showcase section displays social media content in an engaging layout. It includes settings for heading, description, layout, image display, hover effects, and spacing, along with options to add and manage social posts with button customization.

The Social Showcase section includes blocks for the image, image link, and icon text.

The Icon with Text section is used to display key features or highlights in a clean and structured layout using icons with supporting text. It includes settings for heading, description, and layout customization such as image display, alignment, and spacing. You can also manage icon items with text to effectively communicate benefits or services in a visually appealing way.

The Icon with Text section includes blocks for Block Width, Icon, Heading, and Description, allowing you to present key information in a clear and structured format. It helps highlight important features or benefits in a visually organized way for better customer understanding.