# Overview ### What is a theme section? Theme sections are the building blocks of your Shopify storefront. Each section represents a modular piece of content—such as a banner, product list, slideshow, or testimonials—that you can add, remove, or reorder to design your pages without coding. Every section is built from **blocks**, which control the internal content and layout of that section (e.g., headings, images, buttons, icons, videos, and more). In Pebble, sections are highly flexible, responsive, and optimized for both design and performance. {% hint style="success" %} Explore a full list of available sections in the theme editor. {% endhint %} ### **How sections work in the theme editor** Inside the theme editor, you can: * **Add a section** → Choose from Pebble’s full library * **Reorder sections** → Drag and drop to adjust page structure * **Customize settings** → Adjust layout, appearance, and content * **Add blocks** inside a section → [Learn more about blocks](/pebble-theme/theme-blocks/overview.md) * **Duplicate or remove sections** as needed. Sections update in real time so you can preview your layout as you build. ### **Common settings available in most sections** Although each section has its own unique features, many include a shared set of universal controls: * [#container](#container "mention") * [#color-scheme](#color-scheme "mention") * [#border](#border "mention") * [#padding](#padding "mention") {% tabs %} {% tab title="Container" %} The **Container** setting controls how wide your content appears on the page. Options: * **Full** – Stretches the section across the full browser width.\ \&#xNAN;*Best for banners, marquees, hero sections, and full-bleed visuals.* * **Fixed** – Keeps content within the theme's standard page width.\ \&#xNAN;*Best for text-heavy sections, product info, or content that needs consistent alignment with the rest of the page.* Fixed width follows the **Theme settings** > [Layout](/pebble-theme/theme-settings/layout.md#page-width). {% tabs %} {% tab title="Fullwidth" %}
{% endtab %} {% tab title="Fixed width" %}
{% endtab %} {% endtabs %} {% endtab %} {% tab title="Color scheme" %} Color schemes let you quickly control section background and text contrast. * Applies predefined color combinations from your theme settings. * Ensures accessible contrast and consistent branding across your storefront. *Learn more:* [Colors](/pebble-theme/theme-settings/colors.md)
{% endtab %} {% tab title="Border" %} The **Border** setting adds visual definition around a section. Options: * **None** – No border applied. * **Solid** – A thin, solid border around the entire section. * Additional controls: * **Border width** * **Border opacity** {% endtab %} {% tab title="Padding" %} Padding controls the spacing *inside* the section. **Devices:** You can set padding for: * Desktop * Mobile **Padding controls:** * Top * Bottom * Left * Right {% hint style="success" %} Good padding ensures: * Comfortable readability * Proper breathing room around elements * Visual consistency across sections * Better mobile experience (reduce excessive top/bottom spacing). {% endhint %} {% endtab %} {% endtabs %} ### Explore Pebble sections {% columns %} {% column width="50%" %} {% content-ref url="/pages/6glaWtjn1xiAwX9za8xA" %} [Hero banner](/pebble-theme/theme-sections/hero-banner.md) {% endcontent-ref %} {% content-ref url="/pages/LjKz0wlxdDJhLUIYgVmi" %} [Blog posts](/pebble-theme/theme-sections/blog-posts.md) {% endcontent-ref %} {% content-ref url="/pages/y7HYHX4NG9UzIU0cH0pz" %} [Collage: Editorial](/pebble-theme/theme-sections/collage-editorial.md) {% endcontent-ref %} {% content-ref url="/pages/Gm1oznWNIsu9bPCSFoEZ" %} [Collection links: Background](/pebble-theme/theme-sections/collection-links-background.md) {% endcontent-ref %} {% content-ref url="/pages/fjif0uMA40hZQdvfZW6m" %} [Collection links: Image](/pebble-theme/theme-sections/collection-links-image.md) {% endcontent-ref %} {% content-ref url="/pages/1MAWHVUxxRbXoMZp3w9H" %} [Collection links: Scrolling](/pebble-theme/theme-sections/collection-links-scrolling.md) {% endcontent-ref %} {% content-ref url="/pages/mt90sR0hBHIsdhubGPPb" %} [Collection links: Spotlight](/pebble-theme/theme-sections/collection-links-spotlight.md) {% endcontent-ref %} {% content-ref url="/pages/IYtF2aqqMW8HTp78qvd7" %} [Collection list](/pebble-theme/theme-sections/collection-list.md) {% endcontent-ref %} {% content-ref url="/pages/4rIsyl5RRg1RZ1IC8eZo" %} [Collection list: Flex carousel](/pebble-theme/theme-sections/collection-list-flex-carousel.md) {% endcontent-ref %} {% content-ref url="/pages/WpJtPh9ZTeHfvQpztino" %} [Collection tabs](/pebble-theme/theme-sections/collection-tabs.md) {% endcontent-ref %} {% content-ref url="/pages/NGXWHJm2UbOtMoozalt9" %} [Comparison gallery](/pebble-theme/theme-sections/comparison-gallery.md) {% endcontent-ref %} {% content-ref url="/pages/mSy8DdInN2hhy417g6NG" %} [Comparison table](/pebble-theme/theme-sections/comparison-table.md) {% endcontent-ref %} {% content-ref url="/pages/h1ZlL5QO15cvFAdfwZcN" %} [Contact form](/pebble-theme/theme-sections/contact-form.md) {% endcontent-ref %} {% content-ref url="/pages/avi7yznAqqnSB9wwGexB" %} [Countdown timer](/pebble-theme/theme-sections/countdown-timer.md) {% endcontent-ref %} {% content-ref url="/pages/JkyuBdLAgYR0ja7RSXgs" %} [Custom section](/pebble-theme/theme-sections/custom-section.md) {% endcontent-ref %} {% content-ref url="/pages/uM2CofiQz3xukYWECgDw" %} [FAQ](/pebble-theme/theme-sections/faq.md) {% endcontent-ref %} {% content-ref url="/pages/vFQjInq9SYs3gIFQJKXk" %} [Featured collection](/pebble-theme/theme-sections/featured-collection.md) {% endcontent-ref %} {% content-ref url="/pages/lVuSurDsJ0QzXU82Oap6" %} [Highlight text with image](/pebble-theme/theme-sections/highlight-text-with-image.md) {% endcontent-ref %} {% content-ref url="/pages/eDEuOfvruMNvdfms3Oqc" %} [Icon boxes](/pebble-theme/theme-sections/icon-boxes.md) {% endcontent-ref %} {% content-ref url="/pages/UZZ1c6Ruh5gCtT0rZTbK" %} [Image cards: Flex carousel](/pebble-theme/theme-sections/image-cards-flex-carousel.md) {% endcontent-ref %} {% content-ref url="/pages/UhmcFsOR4zLkU2NGT79J" %} [Images stack banner](/pebble-theme/theme-sections/images-stack-banner.md) {% endcontent-ref %} {% content-ref url="/pages/Lw3Xpc9NcdqZ3jaYfEvo" %} [Testimonials: Split full frame](/pebble-theme/theme-sections/testimonials-split-full-frame.md) {% endcontent-ref %} {% endcolumn %} {% column width="50%" %} {% content-ref url="/pages/RO6wdTVSvxtDZpPv5m8g" %} [Lookbook banner](/pebble-theme/theme-sections/lookbook-banner.md) {% endcontent-ref %} {% content-ref url="/pages/WPqyu9qNDHPGnW5QLYE0" %} [Lookbook carousel](/pebble-theme/theme-sections/lookbook-carousel.md) {% endcontent-ref %} {% content-ref url="/pages/QxrpXMk8NuBD0bwBXb6H" %} [Masonry section](/pebble-theme/theme-sections/masonry-section.md) {% endcontent-ref %} {% content-ref url="/pages/7nfYcaA0XxiNYFBC8qPB" %} [Media gallery](/pebble-theme/theme-sections/media-gallery.md) {% endcontent-ref %} {% content-ref url="/pages/1C6BWnfjBZuwKV2AHSlb" %} [Newsletter](/pebble-theme/theme-sections/newsletter.md) {% endcontent-ref %} {% content-ref url="/pages/SAgmvKKRcSyamxFeL7A0" %} [Press](/pebble-theme/theme-sections/press.md) {% endcontent-ref %} {% content-ref url="/pages/H5PqX7BRRCregwYbJVqR" %} [Products bundle](/pebble-theme/theme-sections/products-bundle.md) {% endcontent-ref %} {% content-ref url="/pages/VrHCpZpja6ZPetmzPEkO" %} [Products bundle: Choose](/pebble-theme/theme-sections/products-bundle-choose.md) {% endcontent-ref %} {% content-ref url="/pages/nMtrsrWSQup40VaUTC1V" %} [Products highlight](/pebble-theme/theme-sections/products-highlight.md) {% endcontent-ref %} {% content-ref url="/pages/AZnP5jCUZijk7rodfH1k" %} [Product highlight points](/pebble-theme/theme-sections/product-highlight-points.md) {% endcontent-ref %} {% content-ref url="/pages/4nZ1AVWHzpMCi2cPF8S3" %} [Product suggestion](/pebble-theme/theme-sections/product-suggestion.md) {% endcontent-ref %} {% content-ref url="/pages/Sv4vFqVJpEmOH8Bm2g2K" %} [Product tabs](/pebble-theme/theme-sections/product-tabs.md) {% endcontent-ref %} {% content-ref url="/pages/VoRjghvLiPOwEQvH1IG6" %} [Progress timeline](/pebble-theme/theme-sections/progress-timeline.md) {% endcontent-ref %} {% content-ref url="/pages/Ite8iFvX1edHYhY4eVE1" %} [Rich text](/pebble-theme/theme-sections/rich-text.md) {% endcontent-ref %} {% content-ref url="/pages/Y0Q8yGP8Euh6DiKylppB" %} [Scrolling cards](/pebble-theme/theme-sections/scrolling-cards.md) {% endcontent-ref %} {% content-ref url="/pages/lP9Sb6oLGPLIGH2Px1qI" %} [Scrolling cards: Layered](/pebble-theme/theme-sections/scrolling-cards-layered.md) {% endcontent-ref %} {% content-ref url="/pages/R6CqgsSexvj0xbR8Qp2j" %} [Scrolling layers](/pebble-theme/theme-sections/scrolling-layers.md) {% endcontent-ref %} {% content-ref url="/pages/1QDvwB7MNQuFpvykVwgx" %} [Shop the look](/pebble-theme/theme-sections/shop-the-look.md) {% endcontent-ref %} {% content-ref url="/pages/xrDiQAWJbOA642i0PBYc" %} [Slideshow](/pebble-theme/theme-sections/slideshow.md) {% endcontent-ref %} {% content-ref url="/pages/rXUnz9Tx3k3YSDCqXgYj" %} [Store locators](/pebble-theme/theme-sections/store-locators.md) {% endcontent-ref %} {% content-ref url="/pages/SKcyC23MvFtaVJVB8K9E" %} [Testimonials](/pebble-theme/theme-sections/testimonials.md) {% endcontent-ref %} {% content-ref url="/pages/KnnudVZfFRBPwYBSVdJp" %} [Testimonials: Split](/pebble-theme/theme-sections/testimonials-split.md) {% endcontent-ref %} {% content-ref url="/pages/3Z9ltnTX3xpZHIcPWVHs" %} [Video cards: Flex carousel](/pebble-theme/theme-sections/video-cards-flex-carousel.md) {% endcontent-ref %} {% endcolumn %} {% endcolumns %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.foxecom.com/pebble-theme/theme-sections/overview.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.