# Pipeline theme documentation

Welcome to Pipeline theme by Groupthought

Pipeline brings a fresh new approach to theme setup for Shopify stores. You'll find the best approach methods in our documentation. We've learned the best ways to work with Shopify and built Pipeline to take advantage of the platform. Pipeline is about bringing the best experience to your customers and enjoying their shopping experience with your products and brand.

## Demonstration stores

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Petra</strong></td><td></td><td></td><td><a href="/files/qvnOhKGbcj2xe9bY1xeT">/files/qvnOhKGbcj2xe9bY1xeT</a></td><td><a href="https://themes.shopify.com/themes/pipeline/styles/clean/preview">https://themes.shopify.com/themes/pipeline/styles/clean/preview</a></td></tr><tr><td><strong>Pahoa</strong></td><td></td><td></td><td><a href="/files/w79dlrzBndzAY9f38Wpu">/files/w79dlrzBndzAY9f38Wpu</a></td><td><a href="https://themes.shopify.com/themes/pipeline/styles/bright/preview">https://themes.shopify.com/themes/pipeline/styles/bright/preview</a></td></tr><tr><td><strong>Phantom</strong></td><td></td><td></td><td><a href="/files/ZCxRibJ8Gyobu6fo5U8Z">/files/ZCxRibJ8Gyobu6fo5U8Z</a></td><td><a href="https://themes.shopify.com/themes/pipeline/styles/dark/preview">https://themes.shopify.com/themes/pipeline/styles/dark/preview</a></td></tr><tr><td><strong>Pipeline</strong></td><td></td><td></td><td><a href="/files/aE0M7iUNybudxcqfzfsY">/files/aE0M7iUNybudxcqfzfsY</a></td><td><a href="https://themes.shopify.com/themes/pipeline/styles/light/preview">https://themes.shopify.com/themes/pipeline/styles/light/preview</a></td></tr></tbody></table>

## Explore sections in Pipeline

Explore the rich sections included in Pipeline:

{% content-ref url="/pages/Ug4k2HDnvnqH3rlj2HDo" %}
[Explore all the sections](/sections/list-of-sections/list-of-sections)
{% endcontent-ref %}

## Discover our latest release

{% content-ref url="/pages/ZN5LHjjjjDDIvLSPtK3Y" %}
[What's new in Pipeline](/updates/whats-new-in-pipeline)
{% endcontent-ref %}

> **Update**: **Pipeline 7.5.0** is now out in the Shopify Theme Store. Download the latest version of Pipeline from the [Shopify theme store >](https://themes.shopify.com/themes/pipeline)
>
> All licensed customers can download the latest version for free to their store. Continue running your current version and publish only when you've set up the latest.&#x20;

## Try Pipeline for Free

If you are new to Pipeline, you can download a free trial version from the Shopify Theme store. With Pipeline, you can build a store that's perfect for your brand, products, and services. You can use it as a draft theme for as long as you'd like. You only need to pay when you're ready to publish your store.

[Free Unlimited trial from the Shopify Theme store >](https://themes.shopify.com/themes/pipeline)&#x20;

## Support

If you have questions or need additional assistance setting up your theme, using theme features, our support staff is here to help you:

{% content-ref url="/pages/N5WIjpeIlOnjkmRJJmTz" %}
[Contacting support](/support/contacting-support)
{% endcontent-ref %}

## Learn Pipeline

Sunbowl Academy has built a full detailed course on using Pipeline and how to leverage the features to help you increase your sales. Become a Pipeline expert:

{% content-ref url="/pages/8X6ecxpGk7WtjLSPAtYt" %}
[Learn Pipeline](/about-pipeline/learn-pipeline)
{% endcontent-ref %}


# Learn Pipeline

Online course to master all features of Pipeline by Sunbowl Academy

Introducing the best way to learn everything about the Pipeline theme. This course will help with all the settings and features of Pipeline 7 brought to you by Sunbowl Academy, the Pipeline Experts.&#x20;

Included in the course:

* Theme Settings
* Header group - Learn to set up the header, announcement bar, and the navigation
* Overlay group - Learn how to use popups
* Template group - Learn about all the sections in Pipeline
* Footer group - Learn how to set up the footer and sub-footer
* Products - Learn how to use and setup product templates
* Siblings - Complete walk-through
* Collections - Learn to setup sub-collections, badges, collection filters, and layouts
* Search - Learn about predictive search
* Pages, Blogs, and Cart - Learn all the features and settings

Click this link below to start learning everything about Pipeline:

{% embed url="<https://academy.sunbowlsystems.com/courses/learn-pipeline?ref=459265>" %}
Sign-up to try the course.&#x20;
{% endembed %}

<figure><img src="/files/nbhJLIICxwyx3YQ6l0UR" alt=""><figcaption></figcaption></figure>

### [Sunbowl Academy >](https://academy.sunbowlsystems.com/courses/learn-pipeline?ref=459265)


# What's new in Pipeline

Features and updates added to the latest version of Pipeline

### Features and updates in Pipeline 7.5 and 7.6

Version 7.5.0 adds new sections with nested blocks, and supports Shopify product swatches.&#x20;

Version 7.6.0 adds and animated text spotlight section for large text sections and a Before/After side-by-side pair section.

#### Added

* Four new side-by-side "Pair" sections with interactive content. Link text accordions to image slides, image hotspots with a product slider, accordions with hotspots, and product sliders with accordions.&#x20;
* All new "Pro: image banner" with flexible layout controls and unlimited design possibilities. Add marquee sliders to image banners, decorative text backgrounds, multi-image collages and more.&#x20;
* Shopify swatches on product pages with custom colors and images
* Animated text spotlight section
* Before/After is now available as a pair section

#### Changed

* Gift card form now has the ability to send your gift card at a later date, like a holiday or birthday
* Product cards received a swatch limit setting to prevent large sibling products from loading slowly
* Improved cart messaging for products where taxes are included in the price
* Improved RTL support and ARIA announcements for add-to-cart in drawer and upsells.&#x20;

### Features and updates in Pipeline 7.2

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Icon styles</strong></td><td>New modern and classic icons styles for the Header</td><td><a href="/pages/YYNXt6xztlD1EiRhyRI9">/pages/YYNXt6xztlD1EiRhyRI9</a></td><td><a href="/files/rLd7EMjbYwKCMBGpGQyd">/files/rLd7EMjbYwKCMBGpGQyd</a></td></tr><tr><td><strong>Countdown timer block</strong></td><td>Countdown timer block for the banner section and text sections</td><td><a href="/pages/Dlk2LyW0lZPew4VABJoS">/pages/Dlk2LyW0lZPew4VABJoS</a></td><td><a href="/files/NnVNugUK9q8nECc3ltwc">/files/NnVNugUK9q8nECc3ltwc</a></td></tr><tr><td><strong>Collage block</strong></td><td>Create unique promotions with the the layered image collage block</td><td><a href="/pages/30e7h8DZJekhKImsSPF4">/pages/30e7h8DZJekhKImsSPF4</a></td><td><a href="/files/qjNAqqrIUuYT2K6dg4VM">/files/qjNAqqrIUuYT2K6dg4VM</a></td></tr><tr><td><strong>Image shapes</strong></td><td>Image shape options for column images and image collages</td><td><a href="/pages/DSqHPID4xNbaNe89BSRY#custom-shapes">/pages/DSqHPID4xNbaNe89BSRY#custom-shapes</a></td><td><a href="/files/EHHVr4UMeAGKWqdUiCTT">/files/EHHVr4UMeAGKWqdUiCTT</a></td></tr><tr><td><strong>Variants and Siblings sizing</strong></td><td>Adjust the size of swatches and sibling images on the product page</td><td><a href="/pages/uFd6Xdz8RlGOWKXCzwBS">/pages/uFd6Xdz8RlGOWKXCzwBS</a></td><td><a href="/files/itbdnpA6Av61tT9vT9HF">/files/itbdnpA6Av61tT9vT9HF</a></td></tr><tr><td><strong>Metaobject swatches</strong></td><td>Support the metaobject swatches in the Search and Discovery app. Use visual filters that can be either a color value or an image file. <br>How-to video coming soon. </td><td></td><td></td></tr></tbody></table>

### Features and updates in Pipeline 7.1

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Tabs with metaobjects</strong></td><td>Learn how to use Shopfy's Metaobjects. We cover how to create custom unique tabs and manage the content centrally</td><td><a href="/pages/lnDp3IMaTtv71rTCfurZ">/pages/lnDp3IMaTtv71rTCfurZ</a></td><td><a href="/files/VfJ26Xew1OWhGb00YPbm">/files/VfJ26Xew1OWhGb00YPbm</a></td></tr><tr><td><strong>Cart page with sections</strong></td><td>The Cart page can now be fully customized and is packed features to increase conversions</td><td><a href="/pages/-MdyL0Ig6mF4DbxAhjFp">/pages/-MdyL0Ig6mF4DbxAhjFp</a></td><td><a href="/files/9hsx8uCU6QHvenROWzDp">/files/9hsx8uCU6QHvenROWzDp</a></td></tr><tr><td><strong>Cart drawer overlay</strong></td><td>The Cart drawer has been moved to the Overlay group and has custom sections and options</td><td><a href="/pages/mXvEt0KHrf0P2mlL4rtr">/pages/mXvEt0KHrf0P2mlL4rtr</a></td><td><a href="/files/pOzwfikG8981lFFeqw5a">/files/pOzwfikG8981lFFeqw5a</a></td></tr><tr><td><strong>Breadcrumbs with metafields</strong></td><td>Learn how to create custom breadcrumbs in Pipeline for individual products</td><td><a href="/pages/Buy3zYM44Kk7KZC7EOUK">/pages/Buy3zYM44Kk7KZC7EOUK</a></td><td><a href="/files/V5jqticewE1aJtZtFzXA">/files/V5jqticewE1aJtZtFzXA</a></td></tr><tr><td><strong>Inline video section</strong></td><td>A full featured video section that displays the video content inline to match other inline sections</td><td><a href="/pages/w81sD4k2k2Bp1eub7R6u">/pages/w81sD4k2k2Bp1eub7R6u</a></td><td><a href="/files/rqiQUZtW6nloBKbV5X9I">/files/rqiQUZtW6nloBKbV5X9I</a></td></tr><tr><td><strong>Video banner section</strong></td><td>Pipeline's powerful all-in-one hero-style video banner section</td><td><a href="/pages/uQkMuRiNxvyYH6XAKwLL">/pages/uQkMuRiNxvyYH6XAKwLL</a></td><td><a href="/files/pfKDaVBEtHOHX8yTlEsM">/files/pfKDaVBEtHOHX8yTlEsM</a></td></tr></tbody></table>


# Pipeline releases

Pipeline theme changelog and release notes

## Version 8.2.0 (Aug 10, 2026)

Version 8.2.0 introduces support for Shopify's new customer account sign-in button, adds unit price support to product cards and adds section categories in the theme editor.

#### Added

* Added a "Show unit price" setting for product cards so per-unit pricing (e.g. per 100ml) can be toggled on collection and search pages.
* Added section categories so it's easier to browse sections in the theme editor.
* Added support for Shopify's new customer account sign-in button.

#### Fixed

* Reduced the unit price size on the product page so it no longer overpowers the main price.
* Empty collection tabs are now hidden so customers no longer see tabs for collections with no available products.
* Disabled product card image cycling on hover for products with two or fewer images to prevent unnecessary flicker.
* Fixed mega menu product cards not animating on hover the way image blocks do.

## Version 8.1.1 (Dec 8, 2025)

Version 8.1.1 fixes minor bugs.

#### Fixed

* Ensure subscription sale price shows in add to cart button when a subscription plan is auto-selected on page load.
* Ensure the selected variant image shows in product cards on collection page when color filters apply.

## Version 8.1.0 (Sept 30, 2025)

Version 8.1.0 adds support for high-variant products and combined listings

#### Added

* Added support for high-variant products
* Added support for combined listings
* Improved product page performance for products with many variants

#### Fixed

* Fixed selected state for sibling products using image swatches on the product page
* Fixed cart drawer scrolling to top of page on close after adding quickview item

## Version 8.0.0 (June 13, 2025)

Version 8.0.0 adds the ability to install demo-specific layouts directly from the theme store.

#### Added

* Installing Pipeline from the theme store creates a home page, header, footer and product page to match the demo you installed

#### Changed

* Presets have been renamed
* Light => Pipeline
* Clean => Petra
* Bright => Pahoa
* Dark => Phantom

## Version 7.6.0 (May 12, 2025)

Version 7.6.0 adds more nested block sections, improves right-to-left language layouts, and fixes minor bugs.

#### Added

* Animated text spotlight section
* Before/After is now available as a pair section

#### Changed

* Better options for how compare-at prices are displayed on the product page
* RTL display improvements
* Improved subcollection image quality on very wide collection images
* Fixed related products for products that are not in any collection
* Improved ARIA announcement on add to cart from quickview and cart upsells
* Fix add-to-cart button price display for subscription-only products
* Fix countdown timer ending minute countdown
* Subtle parallax added to side-by-side images

## Version 7.5.0 (January 30, 2025)

Version 7.5.0 adds new sections with nested blocks, and supports Shopify product swatches.

#### Added

* Side-by-side pair sections with interactive content
* Custom image banner with flexible layout controls and unlimited design possibilities
* Shopify swatches on product pages with custom colors and images

#### Changed

* Gift card form now has the ability to send your gift card at a later date, like a holiday or birthday
* Product cards received a swatch limit setting to prevent large sibling products from loading slowly
* Improved cart messaging for products where taxes are included in the price

## Version 7.4.1 (January 2, 2025)

Version 7.4.2 removes Shopify deprecated fonts from presets

## Version 7.4.1 (September 9, 2024)

Version 7.4.1 adds support for Shopify's upgraded accelerated checkout buttons.

#### Fixes and Other Improvements

* Ensure that Shopify's upgraded accelerated checkout buttons match the look and feel of Pipeline on the product form, cart drawer, and cart page.

## Version 7.4.0 (August 12, 2024)

Version 7.4.0 fixes minor bugs and improves the add-to-cart experience when navigating via keyboard.

#### Fixes and Other Improvements

* Fix the product-page zoomed-in slideshow buttons not working on Chrome version 126.
* Fixes the before-and-after section slider not working on browsers set to use commas as a decimal separator.
* Fixes left-right over-scroll on policy pages viewed on iPhone mini.
* Improves the flow timing and screenreader announcements when adding-to-cart with a keyboard or assistive device.
* Clarifies aria-roles and improves the screenreader announcement flow for product card sliders and tab sections.

## Version 7.3.0 (June 25, 2024)

Version 7.3.0 adds a before-and-after section and the new native swatches from Shopify.

#### Added

* Add a new before and after section
* Support the new native Shopify swatches in Search and Discovery
* Add an image override and a size slider to the icon block on the product page

#### Changed

* Improve the variant image scroll experience for cases where the image is larger than the screen

#### Fixes and Other Improvements

* Improve image load animation performance on large pages
* Improve text load animation performance on large pages
* Fixed quick view on homepage for rtl languages

## Version 7.2.2 (April 25, 2024)

Version 7.2.2 fixes minor bugs and improves the performance and accessibility of Pipeline.

#### Changed

* Improved slider controls for the 'Collection list' section.
* Modified default focus to the close button in the mobile menu drawer to improve usability.
* Reduced blur radius on product media button, enhancing performance.
* Implemented additional onboarding items for the featured product.
* Shopify now supports JavaScript minification and removed minified JS files for an easier development experience.
* We've included color as a custom property input for sibling products added via Quickview that do not contain the color name in the product title.

#### Fixes and Other Improvements

* Fixed dropdown menu visibility issue related to the quick add button.
* Corrected scrolling lockup issues in drawers on older iOS devices.
* Addressed uneven grid layouts in the "Shop the Look" section.

## Version 7.2.1 (January 24, 2024)

Version 7.2.1 fixes the automatic discount tag icon.

Version 7.2.0 adds new icons, image collages, and minor bug fixes.&#x20;

#### Added

* New cart, bag and basket icon options for the header
* Sale countdown block for image banners and text sections
* Image collage options for banner sections
* Image shape options for column images and image collages
* Support the metaobject swatches in the Search and Discovery app

#### Fixes and other improvements

* Better image optimization for improved site speed
* Fix pagination on the search page
* The Tab section has better text styling

## Version 7.1.3 (November 2, 2023)

Version 7.1.3 contains minor bug fixes for product cards and images.

#### Fixes and other improvements

* Fix Google offers output for products over $1000.
* Defer image load for product cards inside a header mega nav to improve load speeds.
* Reduce layout shift in collection sliders.
* Fix minor shop the look and predictive search layout issues on mobile.
* Fix edge cases where filtered product cards don't show the applied color filter.

## Version 7.1.2 (August 17, 2023)

Version 7.1.2 contains minor bug fixes for product cards and images.

#### Fixes and other improvements

* Fixed product card unit pricing and currency selector edge cases
* Fix image aspect ratios on scrolling promotions and older browsers
* Show header logo when no transparent header logo is added

## Version 7.1.1 (July 19, 2023)

Version 7.1.1 contains fixes related to the app-compatible cart page, product option dropdown titles, and overflowing option titles on product cards inside carousel sliders.

#### Fixes and other improvements

* Fixed overlapping titles on product option dropdowns
* Fixed overflow when hovering quick add-to-cart buttons with carousel product cards
* Fixed the app-compatible cart page and removed unused drawer settings

## Version 7.1 (July 10, 2023)

Version 7.1 adds enhancements to Pipeline including a new video section, and improved support for mobile images, gift cards, and accessibility.

#### Added

* New Video section, an inline media player for videos without a popup modal.&#x20;
* Added a Shop Pay link in the Footer
* Shop The Look - Introduced mobile image and aspect ratio settings
* Gift card - Send directly to the recipient and include a message
* Added collection link override option to Collection list

#### Changed

* Styled the after-form-submit captcha page
* Video banner section replaces the original video section.
* New and improved font sizes
* Added mobile-friendly product card quick actions

#### Fixes and other improvements

* Improved quick actions accessibility
* Fixed collection price filter error

## Version 7.0 (April 14, 2023)

Version 7.0 adds support for faster image loads, predictive search suggestions, and section groups. You can now add your own sections to the footer.

#### Added

* Updated the design of the search page
* Section group support
* Add support for faster image loads with native lazyload and section-level image preload settings

#### Changed

* Improved font settings flexibility
* Search settings moved from theme to Search & Discovery app
* Product page price is now its own block
* Add spacing option to product blocks
* Add "Collapse filter accordions" option to collapse accordions by default
* Add product schema GTIN barcodes
* Article cards now use article.excerpt\_or\_content instead of article.content
* Subcollections are now powered by collection lists and metafields instead of navigation lists

#### Fixes and other improvements

* No more usage of format: 'pjpg'
* Display a unique placeholder for each item in a collection
* Add "Background" option to change background in custom-content section
* Fix issue where inline add button text was truncated in Safari
* Fix Shopify loadscript error on products with more than 100 swatches
* Fix collection scroll to products on pagination change
* Fix accordion and footer spacing for RTL langs
* Fix subscription sale price when using recharge with single option subscriptions
* Switch to Shopify built-in error handling for "stockout" cart increase case
* Fix product page slideshow draggable with videos

## Version 6.5 (January 24, 2023)

Version 6.5.0 adds support for complimentary products from the Search & Discovery app and image focal points.

#### Added

* Add focal points to adjust image cropping: press the edit button when you pick an image in the theme editor, then add a focal point to the most important part of the image.
* Add a "complimentary product" block to your product form to show cross-sells from Shopify's Search & Discovery app
* Create smart cart upsells: show the least expensive product that will qualify the cart for free shipping

#### Changed

* The upsell block on the product page now supports both single product and product list metafields

#### Fixes and other improvements

* Improve image load performance on the product page with preload tag
* Faster scroll animations on slow-processor devices
* Fix potential bug caused by placing a buy button for a different product between the main product form and the main buy button
* Add dropdown support to the toolbar secondary mobile menu

## Version 6.4 (November 11, 2022)

Version 6.4.0 adds quick buy buttons. Now customers will be able to add products to the cart with one click, directly from the collection page.

#### Added

* One-click quick-buy on the collection page
* Options to use quick-view, quick-buy, or both

#### Changed

* Better slideshow arrows — now the left and right arrows follow the mouse everywhere except links and buttons
* Improves newsletter submission experience
* Better load states for the quickview buttons

## Version 6.3 (October 19, 2022)

Version 6.3.0 adds quickview to the product grid item, a new shop the look design, and a fresh new design for the blog.

#### Added

* **New** full-width Shop the Look section added
* **New** layouts for the product page, including mosaic images on desktop and new mobile sliders
* **New** mobile and desktop options to the header for separate menus, images, and products
* **New** blog layout with a powerful new featured article section
* **New** layout options for images in the meganav
* **New** footer design with an improved newsletter block
* **New** section for displaying product cards next to a large image
* **New** product slider section and updated the product slider design across all sections
* Redesigned the collection list template, creating new ways to show collections and products
* **New** option to show the collection image in a meganav menu

#### Changed

* Improved the design of the product card with an image slider and quickview
* The product form was split into smaller blocks for better layout control
* Typography sizing settings were expanded to cover more sections and blocks
* Spacing controls for padding and section width were added to every section
* Site width and grid padding settings were added at a global level
* Improved the swatch experience on mobile product cards
* Added block-level content control to the Banner section and the Rich Text section

#### Fixes and other improvements

* Improved swatch click experience on mobile

#### Additional information

Learn more about what's new in Pipeline:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Pipeline sections</strong></td><td>Sections included in Pipeline with details and tips</td><td><a href="/files/9gl76nAZiF9cLemmHpuy">/files/9gl76nAZiF9cLemmHpuy</a></td><td><a href="/pages/-Mih9gK8Lv_75eLtFfVK">/pages/-Mih9gK8Lv_75eLtFfVK</a></td></tr><tr><td><strong>New Product Page Layouts</strong></td><td>Learn more about the new Product Page layout options in v6.3</td><td><a href="/files/hqxIlFfZyfJT8O8A89ZC">/files/hqxIlFfZyfJT8O8A89ZC</a></td><td><a href="/pages/-MN-4szM5Wt--9ISA-P8">/pages/-MN-4szM5Wt--9ISA-P8</a></td></tr><tr><td><strong>Updating notes for 6.3</strong></td><td>Additional tips when updating to this version</td><td><a href="/files/eEvARFFhxSQeb8ciqpZF">/files/eEvARFFhxSQeb8ciqpZF</a></td><td><a href="/pages/66XsVlXFu4lSqxWtX3HL">/pages/66XsVlXFu4lSqxWtX3HL</a></td></tr></tbody></table>

## Version 6.2.1 (April 25, 2022)

Version 6.2.1 is a minor bugfix release to resolve an issue where disabling all filters breaks the sort and pagination on collection pages.

#### Fixes and improvements

* Fix sort popdown when filters are disabled.
* Fix pagination load error when filters are disabled.
* Fix issue with slideshow link stacking order in Safari desktop.
* Fix background blur behind cart on Chrome desktop.

## Version 6.2.0 (April 2, 2022)

Version 6.2.0 adds support for cart announcements, upselling products with multiple variants and sibling product swatches, for showing color-related products as swatches in the product form.

#### Added

* Cart announcements - Announce sales and discounts in the cart. [Learn more](broken://pages/hT9LwZoO7dvc8D4f4qas) »
* Add highlighting to Sale Text in the Header menu. [Learn more](/header/header/highlight-sale-menu) »
* Upsell products with multiple variants in a Quickview-style variant selection. [Learn more](/upsell/upselling/upsell-with-quick-view) »
* Siblings - Add support for color siblings which allows you to link directly to other products as product swatches. [Learn more](/siblings/product-siblings) »
* New Auto feature for Variant options. Allow short options to show as buttons and long options as dropdown selects.
* Now with support for custom social icons for niche social networks
* Added icon options to the product form
* Now support for true/false options in collection filters

#### Changed

* Custom content now has an article block.
* Removed max blocks in logo section.
* Optimized swatch and radio button sizes for mobile click area.

#### Fixes and improvements

* Fixed spacing on last Lookbook Section.
* Fixed dutch in german translation for Upsell.
* Fixed CSS compression for faster load times.

## Version 6.1.3 (October 18, 2021)

* Better lazyload performance on "hover" images in collection grid
* Fix button colors on collection list blocks
* Fix product form when title and/or form are hidden
* Add a liquid block to the product form

## Version 6.1.2 (October 11, 2021)

* Fixes Flickity on iOS 15 Safari
* Reduces CLS on iOS webkit for user with VH based hero sections
* Adds aggregateRating to product schema JSON
* Disables slider arrows when no more product slides are available.
* Fixes announcement bar mobile/desktop targeting bug
* Fixes wide-logo scaling on mobile
* Fixes color-aware section padding, reducing padding between color-matched sections

## Version 6.1.1 (September 17, 2021)

* Fixes size chart popup link not showing on select input style
* Fixes meganav parent links needing two clicks in some browsers
* Fixes issue that caused mobile slideshow image to hide
* Fixes vendor and type legacy filters with collection filters
* Fixes routes on blog tags for article page
* **New** global default color palette setting
* **New** rounding add to review summary

## Version 6.1.0 (September 9, 2021)

* **New** announcement bar features including dynamic value to free shipping message, icon column block, marquee, and sliding messages, custom HTML message, and more.
* **New** free-floating announcement section
* **New** Popup section with newsletter and cookie popups
* **New** Flexible accordion section
* **New** Upselling "Buy it with" promotions for products
* **New** Upselling in Cart with metafield support
* **New** Recently viewed section
* **New** Swatches in collection bar filters
* **New** Size charts with metafield support
* Added mobile image option for Banner section (Image with text overlay)

## Version 6.0.0 (August 10, 2021)

* **New** Supports Shopify Online Store 2.0 (OS2) platform
* **New** Support for Shopify's Collection Filtering - Add collection filters in your Navigation admin
* **New** Includes support for sections everywhere - Place sections on all page types including Products, Collections, Blogs, Pages, Cart and more.
* **New** Pickup options for product template
* **New** Free shipping message in Cart
* **New** Customizable contact form
* **New** Gallery and Gallery Text sections - Can be used on all pages

## Version 5.2.1 (July, 7 2021)

* the Bright preset updated for a more feminine style
* Improved demo content for fresh install state
* Fix inability to hide video popup in video section (for background video only)
* Subcollections, improved text/image handling to prevent overlapping

## Version 5.2 (July, 5 2021)

* jQuery deprecation - Greatly improves theme performance
* **New** cart styles added, drawer and popup - [Learn more](/cart/pipeline-cart/cart)
* **New** tab collections added to Featured collection section - [Learn more](broken://pages/-MNVh79268DcllR6cJuJ#how-to-add-collection-tabs)
* **New** rich custom content on product pages - [Learn more](broken://pages/-Me7j2703iBJUzAZiQPV)
* **New** add additional unique content to product pages - [Learn more](https://pipeline.groupthought.com/v/pipeline-5/products/additional-unique-content)
* **New** support added for subscription apps
* **New** predictive search feature added - [Learn more](/search/predictive-search)
* **New** page.about custom page template&#x20;
* **New** page.story custom page template&#x20;
* Improved mobile layout for lookbook page template
* **New** menu-based subcollections - [Learn more](broken://pages/-MddcsMfn4cBt8ZN2zQU)
* **New** custom stickers and badges on collection products - [Learn more](/collections/collection-pages/custom-badges)
* **New** estimate shipping calculator added to cart - [Learn more](broken://pages/-MdyXAtjMZGBkRutbjoO)
* Additional icons added to Icon columns section
* Improved product thumnails layout with horizontal scroll

## Version 5.1 (May, 28 2021)

* Adds support for Shop Pay Installments - [Learn more](https://www.shopify.com/shop-pay-installments)
* Fixes minor slideshow bug on iOS with parallax images
* Fixes minor edge-case issues in product grid and accordions
* Fixes product grid in onboarding layout
* Improves newsletter confirm step layout and policy page layout
* Minor improvements to default content

## **Version 5.01 (November 13 2020)**

* Minified CSS file has better comments
* Supports Linkedin and TikTok icons
* Index-richtext has alignment setting

## **Version 5.0 (November 5 2020)**

* **New** color swatches for collection and product pages  - [Learn more](/products/product-pages/color-swatches)
* **New** header layout styles - [Learn more](/products/product-pages/product-page-layout-options)
* **New** add header content. Add images, products and collections into navigation - [Learn more](broken://pages/-MKaoij3s9DSRPQmJTDc)
* **New** product page layout styles - [Learn more](/products/product-pages/product-page-layout-options)
* **New** product page variant buttons - [Learn more](/products/product-pages/product-page-layout-options)
* Improved product image zoom for mobile and desktop - [Learn more](/products/product-pages/product-zoom)
* **New** inventory countdown on product page
* **New** lookbook page template - [Learn more](broken://pages/-MN-7TWhJ27qS8Fslygy)
* **New** FAQ page template - [Learn more](broken://pages/-MN-BuHy6eHjVlsPpgCf)

## **Version 4.7 (March 30 2020)**

* Adds support for [Shopify Payments multi-currency checkout](https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency)
* Adds support for [Store Languages apps](https://apps.shopify.com/collections/apps-for-store-languages)

## Version 4.6 (February 29 2020)

* Support for Shopify's new product media formats.
* Instagram feed decommission. [Learn more](https://help.shopify.com/en/manual/using-themes/instagram-feed-changes)

## Version 4.5.1 (July 23 2019)

* Add new styles for additional checkout buttons

## Version 4.5 (July 1 2019)

* Add padding and video support to Text columns with images [Learn more](https://help.groupthought.com/article/813-pipeline-new-features#45video)
* New location map styles and zoom control [Learn more](https://help.groupthought.com/article/813-pipeline-new-features#45map)
* Improved appearance of icon section text links with dark backgrounds
* Fixed money formatting for currency conversion apps in add to cart popdown

## Version 4.4 (June 11 2019)

* Transparent header options and Sticky header [Learn more](https://help.groupthought.com/article/813-pipeline-new-features#44sticky)
* New icon columns section - Easily add icons with text [Learn more](https://help.groupthought.com/article/813-pipeline-new-features?preview=5bc6bc28042863158cc783d2#44icons)
* Improved related products suggestions - We've switched the related products feature to use Shopify's new algorithm. Here's more about the new feature by Shopify: [Product Recommendations APIs](https://developers.shopify.com/changelog/product-recommendations-apis-now-available-on-all-plan-types-with-added-support-in-liquid-and-storefront-apis).
* Added support for automatic discounts and buy-one-get-one discounts in the cart. [Learn more](https://help.groupthought.com/article/813-pipeline-new-features#44discount)
* Added product image aspect ratio controls for collection page
* Improved all new single ajax cart

## Version 4.3 (Oct 17 2018)

* Improved tag filtering on the collection page
* Improved product layout settings
* Featured images on pages via blocks
* Background video autoplay option for video section
* Improved height options for collections and blog posts on the home page
* Update table styles - border and bold only for table head
* Update look of footer lines and headings
* Increase visibility of select dropdown on product and collection page

## Version 4.2 (July 4 2018)

* Add Active Merchant payment icons to footer and improve spacing at smaller mid-query sizes
* Better mid-size media queries for hero button image
* Remove default js section stubs
* Better google merchant price formatting, include trailing zeroes
* Address edge case when accent color is black - better styling on wrapper for additional checkout buttons
* Increase size of mobile plus and minus icons and prevent menu expansion from triggering a full page reflow
* Fix bug in video modal introduced in latest chrome version where iframe moves by 10px on hover

## Version 4.1 (May 30 2018)

* Implement the new font picker with fonts from Monospace
* Introduce per-font sizing to make it easier to adjust fonts with different em heights. &#x20;
* Make it easier to switch presets without wiping settings that are not explicitly related to the style of the preset. &#x20;
* Switch newsletter description fields to richtext to make it easier for merchants to link to their privacy policy for GDPR compliance.
* Fix issue with comma price formatting
* Reduce padding under Slideshow when it is the first full-height section on the homepage
* Fix issue where the height of a large "image and text" section would prevent the next section from being shorter than its predecessor.&#x20;

## Version 4.0 (April 3 2018)

* Convert to Slate
* Responsive Images
* Add newsletter and map section to homepage
* Add option to swap image on hover in product grid
* Add support for new Shopify payment buttons
* Increase support for third party currency applications by reducing conflicts in money tags
* Strip \[split] tags from product list item and twitter description
* Escape cart notes to allow HTML in cart notes
* Fix tab content overlap issue on firefox
* Add support for parallax effect on mobile
* Remove liquid tags from JS
* Fix issue with instagram API rate limiting
* Rename files to match Shopify tutorials (shop.js -> theme.js & style.scss -> theme.scss)
* Remove fastclick (causes older Andriod users issues)

## Version 3.1 (January 9 2018)

* Pipeline now supports the [new shopify navigation system](https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu)
* Additional [Aria](https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus) support for navigating with assistive devices
* Removed an english-specific link on the cart page that disabled the selectors for non-english users that also had disabled the popup cart.&#x20;

## Version 3.0 (August 2 2017)

* Corknine Themes is now Groupthought
* Change numeric dropdowns to sliders
* Product section now has blocks for configuring tabs
* Default home page has a better demonstration of the available sections
* Mobile chrome experience is updated to prevent jagged scroll while chrome hides the URL bar
* Product page now has the option to add a sizing chart popup
* Collection template now has the option to add sale, new and sold out stickers to the grid of images
* The general social settings now has an option to add a default sharing image for the homepage
* Update the product variant dropdown to use the new has\_only\_defaults variable instead of the “default” string check
* Always show the image above the text on mobile version of “Image and text” section, regardless of their order in the desktop view
* Allow the product image zoom to show an image that takes the full width of the page

## Version 2.4.1 (July 11 2017)

* Add Shopify Pay logo
* Fix name conflict on matchHeight function
* Add vertical padding between columns on mobile version of columns section
* Decrease banner button size on mobile
* Hide slides while slideshow is loading
* Remove outline on hero scroll arrow

## Version 2.4 (April 17 2017)

* Escape all text settings
* Add block.shopify attributes to blocks missing them
* Add product video functionality via image alt text
* Allow product description split with `[split]`
* Add side-by-side section (image and text)
* Add logo section
* Add columns section
* Add filter toggle to collection mobile view
* Better alignment on first dropdown in the main menu
* Top bar mobile improvements

## Version 2.3 (February 24 2017)

* Add a collection grid section for home page
* Add view all button to the featured collection section on home page
* Improve schema tags on product and article
* Remove outdated image size recommendations
* Indicate sold out items in single variant dropdown
* Unify aesthetic and animations of featured news section with the new collection grid section
* Fix z-index on article featured images for mobile
* Fire variant JS on pageload for more consistent sold-out edge case handling
* Fix color name typo in dropdown icon SVG
* Remove return false in Pipeline.smoothScroll JS to allow additional events on anchor tag clicks
* Show digital orders in account and hide quantity on membership products
* Add wrapper to collection template text without image for better mobile text display

## Version 2.2 (December 15 2016)

* Additional variant fixes
* Include a home page slideshow
* Include zoom on the product page
* Change form selector to basic class selector — allowing language params to be passed into checkout
* Update icons to contain left right slideshow arrows (so slideshow arrows can inherit color from the text)
* Center products in collections containing less that one full row of products
* Add title to the rich text block — allowing it to visually match the other sections

## Version 2.1

* Fix bug in new variant system affecting stores with multiple variant dropdowns where the first variant was added to the cart instead of the selected variant

## Version 2.0

* Add support for the new theme editor
* Convert home page to modular sections
* Change variant code to new system without option\_select.js

## Version 1.7

* Apple Pay support
* Prevent related videos from showing on YouTube videos loaded from Homepage video section

## Version 1.6

* Update Instagram, Google and payment icons
* More reliable variant-image matching for edge cases
* Simplify cart link setttings
* Minor SEO tweaks for Panda and Rankbrain
* Alow standard nav on collections template
* Simplify collections list page and footer colors

## Version 1.5

* Add banner controls for image width and height
* Add parallax option to banner and video section
* Square crop insatgram photos
* Add Instagram controls for photo count
* Add Blog controls for number of posts
* Move video into its own section with identical functionality to banner and youtube support
* New arrow style and animation on Banner
* Add section for optional second page of page content on home page
* Add option to not open the cart modal when a uses adds an item to the cart
* Add product thumbnail photos
* Remove 1px line from below last item on mobile dropdown
* Update icons to include amazon payments
* Allow collection sidebar tags to be removed one by one instead of all at once
* Remove legacy checkout.css file
* Fix issue where featured product would not show on home page if theme settings did not have a featured page
* Fix meganav subheading links on iPad

## Version 1.4

* Replace Instagram integration with new token settings

## Version 1.3

This update removes Instagram integration due to API policy changes, and releases small bug fixes.

* Remove instagram integration
* Load js if fastclick fails
* Remove english word - more
* Fix iOS safari scroll on initial page load issue by updating typekit
* Add default centering on list template
* Fix link element closing order for theme credit list item

## Version 1.2

* Theme settings updated to match Shopify best practices
* Headings use separate font from body font

## Version 1.1

* product home page settings mention four product limit that no longer exists
* hero was locked in full screen - fixed
* Responsive Imges in RTE
* remove columns from homepage
* Support article.image
* Support new Shopify standard theme settings
* Support Apple Wallet gift cards
* Upgraded theme settings for clarity
* Homepage 2 recent blog posts
* Homepage up to six logos of prominent customers/news media/partners/vendors
* Homepage titles for each section
* Homepage section background colors
* Homepage cleaner design for page - split into columns
* Javascript performance improvements
* Constrain wide logos on mobile devices
* Aligned: collection text, product social icons, pagination, footer social links

## Version 1.0.2

* Fixed broken links caused by homepage custom section
* Better vertical spacing for non-white background colors

## Version 1.0.1

* Fixed footer logo alignment
* Fixed jagged scrolling on homepage


# Pipeline sections


# Explore all the sections

Learn more about the sections in Pipeline

### Theme sections

Click to view details of individual sections included with Pipeline. Sorted in order of appearance when adding a new section in the Theme Editor:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="users" data-multiple></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Accordion group</strong></td><td>Styled accordions that can be utilized throughout your shop</td><td></td><td><a href="/files/17dcI1z1RgOQrh6cm5Mf">/files/17dcI1z1RgOQrh6cm5Mf</a></td><td><a href="/pages/JtSk2DfJR2rws41wlX2L">/pages/JtSk2DfJR2rws41wlX2L</a></td></tr><tr><td><strong>Accordion single</strong></td><td>Enhanced accordion with content blocks to build rich FAQ-style sections</td><td></td><td><a href="/files/t2MoaS8DDECAod76EOQx">/files/t2MoaS8DDECAod76EOQx</a></td><td><a href="/pages/TrhCACs4z8v787bu2NAV">/pages/TrhCACs4z8v787bu2NAV</a></td></tr><tr><td><strong>Blog posts</strong></td><td>Feature your latest articles with a horizontal scrolling slider and a wide rage of customization settings</td><td></td><td><a href="/files/TCcTSh1nxCC9jW1k23Vz">/files/TCcTSh1nxCC9jW1k23Vz</a></td><td><a href="/pages/NHqyF3GfyMXExWP8W2JJ">/pages/NHqyF3GfyMXExWP8W2JJ</a></td></tr><tr><td><strong>Collection list</strong></td><td>Animated tiles to feature your featured collections</td><td></td><td><a href="/files/IkCY1JlMAWIIBysxXhhm">/files/IkCY1JlMAWIIBysxXhhm</a></td><td><a href="/pages/eGKjmXjBm5BrKW8VNa66">/pages/eGKjmXjBm5BrKW8VNa66</a></td></tr><tr><td><strong>Collection product grid</strong></td><td>Display a sample of collection products with a modern grid design</td><td></td><td><a href="/files/k1a7qiCu9zPQXvdkzDZ2">/files/k1a7qiCu9zPQXvdkzDZ2</a></td><td><a href="/pages/IzCBBjMIADN7wYac45OS">/pages/IzCBBjMIADN7wYac45OS</a></td></tr><tr><td><strong>Contact form</strong></td><td>Add a full-featured contact form with a wide range of customizable blocks to any page of your site</td><td></td><td><a href="/files/9bEbufijlZwKK76m9wV1">/files/9bEbufijlZwKK76m9wV1</a></td><td><a href="/pages/RKEpUhuI9U3MSZj7IAAL">/pages/RKEpUhuI9U3MSZj7IAAL</a></td></tr><tr><td><strong>Custom code</strong></td><td>Build a custom section with any of your requirements</td><td></td><td><a href="/files/WMwKKKl2ZsVpnVlOVG25">/files/WMwKKKl2ZsVpnVlOVG25</a></td><td><a href="/pages/SCzsElteTABa1xXuAZeE">/pages/SCzsElteTABa1xXuAZeE</a></td></tr><tr><td><strong>Custom content</strong></td><td>A powerful all-in-one flexible section with all the tools you need to design a custom section</td><td></td><td><a href="/files/9E0VswPaPFmpYzfyNttZ">/files/9E0VswPaPFmpYzfyNttZ</a></td><td><a href="/pages/kBYJGns472WLf7IbXhPY">/pages/kBYJGns472WLf7IbXhPY</a></td></tr><tr><td><strong>Featured article</strong></td><td>Powerful block-based section to feature blog posts</td><td></td><td><a href="/files/E68VV3RbLKtzFS4QL5Lb">/files/E68VV3RbLKtzFS4QL5Lb</a></td><td><a href="/pages/pXhJ1RJCrTRmn9p9UtCm">/pages/pXhJ1RJCrTRmn9p9UtCm</a></td></tr><tr><td><strong>Featured product</strong></td><td>A complete product form section to feature a product on any page</td><td></td><td><a href="/files/USxeDG4vTe6wHKcrjRhb">/files/USxeDG4vTe6wHKcrjRhb</a></td><td><a href="/pages/4cBpsX2OTtRSRO6wmz57">/pages/4cBpsX2OTtRSRO6wmz57</a></td></tr><tr><td><strong>Gallery</strong></td><td>Elegant image gallery section for Lookbooks and more</td><td></td><td><a href="/files/3OMImBYmDJyIRoPhyjEy">/files/3OMImBYmDJyIRoPhyjEy</a></td><td><a href="/pages/Vfj9TVt8Zoq33fGuzJZj">/pages/Vfj9TVt8Zoq33fGuzJZj</a></td></tr><tr><td><strong>Gallery text</strong></td><td>Elegant text captioning section with multiple column support</td><td></td><td><a href="/files/Ie2LrBQDbAFylzIjs8Il">/files/Ie2LrBQDbAFylzIjs8Il</a></td><td><a href="/pages/rurXzFBmWdWEm94n7Qk1">/pages/rurXzFBmWdWEm94n7Qk1</a></td></tr><tr><td><strong>Icon columns</strong></td><td>Build icon-based sections with a full set of included SVG commerce icons </td><td></td><td><a href="/files/GVjN9d4zs1J9bAC2dhYK">/files/GVjN9d4zs1J9bAC2dhYK</a></td><td></td></tr><tr><td><strong>Image banner</strong></td><td>Pipeline's powerful block-based hero style image banner section</td><td></td><td><a href="/files/OQtdvE5TvHgSPEBLTxWy">/files/OQtdvE5TvHgSPEBLTxWy</a></td><td><a href="/pages/r9kXcbICTna0YFPIqwnP">/pages/r9kXcbICTna0YFPIqwnP</a></td></tr><tr><td><strong>Image with text</strong></td><td>Single or two-column flexible section with multiple content block options</td><td></td><td><a href="/files/EV5aZaPS2PyzHqffFQeO">/files/EV5aZaPS2PyzHqffFQeO</a></td><td><a href="/pages/bUiAnprFBa01ihSIGX5C">/pages/bUiAnprFBa01ihSIGX5C</a></td></tr><tr><td><strong>Logo list</strong></td><td>Promotion logos and links with an animated marquee feature</td><td></td><td><a href="/files/eMVSfogu3KdbCHeL2hxZ">/files/eMVSfogu3KdbCHeL2hxZ</a></td><td><a href="/pages/KCuYPcloP4nDLa7bpjz8">/pages/KCuYPcloP4nDLa7bpjz8</a></td></tr><tr><td><strong>Map</strong></td><td>Add location and map information to your storefront</td><td></td><td><a href="/files/K7n8Gyc6DMJCQPwq3t2X">/files/K7n8Gyc6DMJCQPwq3t2X</a></td><td><a href="/pages/-MNWUiU1AnwapDawJ0PK">/pages/-MNWUiU1AnwapDawJ0PK</a></td></tr><tr><td><strong>Mosaic</strong></td><td>Arrange a wide variety of Pipeline's blocks to build a unique pattern section</td><td></td><td><a href="/files/iEam05MYq0zoiimIZOik">/files/iEam05MYq0zoiimIZOik</a></td><td><a href="/pages/9nRWLmLHwMnFRs4Dy8w0">/pages/9nRWLmLHwMnFRs4Dy8w0</a></td></tr><tr><td><strong>Newsletter</strong></td><td>Add a quick and simple newsletter sign-up form to any page</td><td></td><td><a href="/files/i7eUA51a4uIcXAb5mfXf">/files/i7eUA51a4uIcXAb5mfXf</a></td><td><a href="/pages/LfJDz0RCHZHM990UiWV3">/pages/LfJDz0RCHZHM990UiWV3</a></td></tr><tr><td><strong>Page</strong></td><td>Add a Shopify Page as content and then style it to match your site design</td><td></td><td><a href="/files/gCn8JSk6R93zLw2A21Wn">/files/gCn8JSk6R93zLw2A21Wn</a></td><td><a href="/pages/lTo2KY7i8r6mgnkmhSrF">/pages/lTo2KY7i8r6mgnkmhSrF</a></td></tr><tr><td><strong>Product grid</strong></td><td>Collection product grid section with mobile and desktop layout options</td><td></td><td><a href="/files/lCx5zUyefFbvLVUU5kEz">/files/lCx5zUyefFbvLVUU5kEz</a></td><td><a href="/pages/dzfHnsbYqkjoAl7cQslk">/pages/dzfHnsbYqkjoAl7cQslk</a></td></tr><tr><td><strong>Product slider</strong></td><td>Display collection products in a single row with a horizontal slider</td><td></td><td><a href="/files/uwaNg7BbNzgBmWGPNdMK">/files/uwaNg7BbNzgBmWGPNdMK</a></td><td><a href="/pages/TXEmnh4JzfT1FrQZCfKA">/pages/TXEmnh4JzfT1FrQZCfKA</a></td></tr><tr><td><strong>Product slider tabs</strong></td><td>Tabbed collection row of featured collections</td><td></td><td><a href="/files/U7g0m5jR5xIVVa3fSBA8">/files/U7g0m5jR5xIVVa3fSBA8</a></td><td><a href="/pages/hLkWFVEtAcSQSCx7vzZq">/pages/hLkWFVEtAcSQSCx7vzZq</a></td></tr><tr><td><strong>Products with image</strong></td><td>Feature specific products with an associated image or video in a unique layout format</td><td></td><td><a href="/files/CNDmtFmBOqFHFUe9Xlvj">/files/CNDmtFmBOqFHFUe9Xlvj</a></td><td><a href="/pages/H7f0Nhdj7bYmQP3T1jhY">/pages/H7f0Nhdj7bYmQP3T1jhY</a></td></tr><tr><td><strong>Recently viewed products</strong></td><td>Add a section of recently viewed products to any page</td><td></td><td><a href="/files/47ffkhMFEXWwEwTv0TZX">/files/47ffkhMFEXWwEwTv0TZX</a></td><td><a href="/pages/qxYe3ytHwTTb4xb5Mfre">/pages/qxYe3ytHwTTb4xb5Mfre</a></td></tr><tr><td><strong>Rich text</strong></td><td>More than just text, loaded with icons, lists, and image blocks</td><td></td><td><a href="/files/azv0axfFvgTBXchDTXku">/files/azv0axfFvgTBXchDTXku</a></td><td><a href="/pages/hXhGEWXnxJNF1AASTQ3F">/pages/hXhGEWXnxJNF1AASTQ3F</a></td></tr><tr><td><strong>Scrolling promotion</strong></td><td>Add horizontal promotions anywhere in your store</td><td></td><td><a href="/files/ctGZ1RKspKGSxBHBqiXo">/files/ctGZ1RKspKGSxBHBqiXo</a></td><td><a href="/pages/Bh0eVbQdbmADoxa6hXKR">/pages/Bh0eVbQdbmADoxa6hXKR</a></td></tr><tr><td><strong>Shop the look</strong></td><td>Interactive shopping tool to choose items from an image</td><td></td><td><a href="/files/ZZ9HiPQJtPx5k08PgSLV">/files/ZZ9HiPQJtPx5k08PgSLV</a></td><td><a href="/pages/8yki8IZ85COfDHFgdmjp">/pages/8yki8IZ85COfDHFgdmjp</a></td></tr><tr><td><strong>Slideshow</strong></td><td>Pipeline's hero-style slideshow section with support for mobile and desktop devices</td><td></td><td><a href="/files/aeUHfSoplrZfRuD7vVmc">/files/aeUHfSoplrZfRuD7vVmc</a></td><td><a href="/pages/VZlIlHOMe7Px6Jeifeyx">/pages/VZlIlHOMe7Px6Jeifeyx</a></td></tr><tr><td><strong>Tabs</strong></td><td>Build compact tabs for displaying information your customers</td><td></td><td><a href="/files/2g8l4DmFTHp69u12ohvB">/files/2g8l4DmFTHp69u12ohvB</a></td><td><a href="/pages/yLamyVeTs5RabIXeLzZ1">/pages/yLamyVeTs5RabIXeLzZ1</a></td></tr><tr><td><strong>Text columns with images</strong></td><td>Flexible column-based section to display evenly sized rows of content with images, popup video, text and call to action buttons</td><td></td><td><a href="/files/GsBjreBGAMK0u41bKIhI">/files/GsBjreBGAMK0u41bKIhI</a></td><td><a href="/pages/DSqHPID4xNbaNe89BSRY">/pages/DSqHPID4xNbaNe89BSRY</a></td></tr><tr><td><strong>Video</strong></td><td>An inline media player for MP4, YouTube and Vimeo videos. Watch videos right in the section without a popup modal. </td><td></td><td><a href="/files/SLE2wIbSDAwtT2r3Yomu">/files/SLE2wIbSDAwtT2r3Yomu</a></td><td><a href="/pages/w81sD4k2k2Bp1eub7R6u">/pages/w81sD4k2k2Bp1eub7R6u</a></td></tr><tr><td><strong>Video banner</strong></td><td>Pipeline's powerful block-based video section with flexible options to display video, headings, text and more</td><td></td><td><a href="/files/hqrtQMADWjGoC6Is7btM">/files/hqrtQMADWjGoC6Is7btM</a></td><td><a href="/pages/uQkMuRiNxvyYH6XAKwLL">/pages/uQkMuRiNxvyYH6XAKwLL</a></td></tr></tbody></table>


# Accordion group

Styled accordions that can be utilized throughout your shop

Pipeline's Accordion group section uses blocks to create individual accordions that are grouped together in one section:&#x20;

<div data-full-width="false"><figure><img src="/files/S36flj0n4uUhOnAU7Ssi" alt=""><figcaption></figcaption></figure></div>

Add this to any page or template when you need an FAQ-style section with questions and answers or to promote product details and features.&#x20;

{% embed url="<https://www.loom.com/share/85c870d148724223962c0475597494bb?sid=ef344baa-84c1-4948-8cda-ee8b5349e8a6>" %}
**Video overview of section and block settings**
{% endembed %}

> ***Tip:*** When using this section outside of the homepage. For example on a Product page, Collection page, Blog posts or Shopify pages. Use the dynamic source icon with a defined metafield to have unique block content.&#x20;


# Accordion single

Enhanced accordion with content blocks to build rich FAQ-style sections

Add fully customizable blocks to accordions including images, icons and more:

<div data-full-width="false"><figure><img src="/files/nrYmYh78SdGmotUb8UgC" alt=""><figcaption></figcaption></figure></div>

Create multiple columns:

<figure><img src="/files/57HkFTQtX4NRUStckQwk" alt=""><figcaption></figcaption></figure>

### Block types

Customize with a range of content blocks including:

* Text column - An all text column
* Image column - Image with optional text
* Icon column - Choose from selection of professionally designed icons with text
* Custom HTML - Add any html code to create a custom column

<figure><img src="/files/eQeZiqPBeLGLTKYG93gU" alt=""><figcaption><p><strong>Adding a block</strong></p></figcaption></figure>

### Section settings

Use the section settings to configure the main heading (question) which is shown in the closed state and open state.&#x20;

<figure><img src="/files/aGBaxk63RUkOu1N56hUs" alt=""><figcaption></figcaption></figure>

With text and background colors, you can customize the look of the section:

<figure><img src="/files/zm4YIctNOiQkRmPjU6an" alt=""><figcaption></figcaption></figure>

Use the section spacing settings to adjust padding:

<figure><img src="/files/DzByVPZ1vRw2Qv4uGt9Y" alt=""><figcaption></figcaption></figure>

### Block settings

Each block contains a set of options to customize how the content appears.&#x20;

> Tip: Use the Photo aspect ratio and Position options with the image block to adjust the size and position of the image. Especially useful for wide or tall images.

<figure><img src="/files/EfugQPie5Bnn3RPCI27w" alt=""><figcaption><p><strong>Shorter aspect ratio and bottom focus of image set</strong></p></figcaption></figure>

The Custom HTML block can be used to add Liquid code, CSS with style tags or custom app code.


# Blog posts

Feature your latest articles with a horizontal scrolling slider and a wide rage of customization settings

Fully customizable section to display the latest blog posts. Manage the number of articles for different device types, image scaling, layout, and more:

Video overview of Blog post settings and options:

<figure><img src="/files/F2DLciZGR8BCnZzrfPde" alt="Blog section"><figcaption></figcaption></figure>

{% embed url="<https://www.loom.com/share/162ae7777d8142ef8b97ddd66aa797c6?sid=bf51c094-49ae-43de-93d2-42bfeaacecb4>" fullWidth="false" %}


# Collections list

Animated tiles to feature your featured collections

Promote collections in a grid or slider format. Pipeline includes several options to customize the design and layout of this section:

<figure><img src="/files/Y2i80HHj3MJ0H10gUsL2" alt=""><figcaption></figcaption></figure>

Mobile carousel for easy browsing:

<figure><img src="/files/aNWjcChf14OqhclYvkGV" alt=""><figcaption></figcaption></figure>

### Section settings

With the section settings, you can customize:

* The section title
* Background color of the section
* Enable desktop carousel, and&#x20;
* Progress bar display
* Grid image scaling for wider or taller images
* Grid sizing for desktop, mobile, and tablet
* Text sizing
* Section padding

### Block settings

Block settings for each block can be configured to:

* Which collection to prmote
* An image override for desktop and mobile
* Overlay settings to improve contrast of text over images
* The product count in the collection
* Several override options to fully customize the display:

<figure><img src="/files/H3px1ZkpeKVN00nXXqgM" alt=""><figcaption></figcaption></figure>


# Collection product grid

Display a sample of collection products with a modern grid design

Collection product grid features a versatile Quick Add drawer and siblings swatches and more:

<figure><img src="/files/4jy3GWzfy50VgEImR28E" alt=""><figcaption></figcaption></figure>

### Mobile options

Mobile devices can be configured to view a carousel or stacked grid images:

<figure><img src="/files/XzX46DlXtUucvi2vwnbq" alt=""><figcaption><p><strong>Carousel version</strong></p></figcaption></figure>

<figure><img src="/files/n3O5ibP2oI8Gn49MeOXY" alt=""><figcaption><p><strong>Stacked grid version</strong></p></figcaption></figure>

### Quick Add

The Quick Add drawer allows customers to view all the product images and easily choose the correct variant option:

<figure><img src="/files/44pxJVyGdQqDH7CndRTn" alt=""><figcaption></figcaption></figure>

### How to use

Video overview of settings, options for this section:

{% embed url="<https://www.loom.com/share/82f8a2055c4d481da7e092ccd49e5251?sid=5130f520-f4cd-46c5-8242-17ce9d3ace3f>" %}


# Contact form

Add a full-featured contact form with a wide range of customizable blocks to any page of your site

Build a simple or completely custom contact form with this section that includes blocks of many types of form elements. Add the section to any Page, Product detail pages, the homepage, blog posts, search, the 404 page, and more:

<figure><img src="/files/7NviI5AutBJOYs9fQFja" alt=""><figcaption><p><strong>Form options including drop-down selections, checkboxes, radio buttons and more</strong></p></figcaption></figure>

Add blocks to customize the form:

<figure><img src="/files/xQCMyOvcwAzIslBxqQMb" alt=""><figcaption><p><strong>Combine with the Rich Text section for a custom header</strong></p></figcaption></figure>

### Section settings

Use the section settings to set up the section's heading, title alignment, text colors, background colors, form width, and form padding:

<figure><img src="/files/PxbGtk3npyfy1Mt3u31p" alt=""><figcaption></figcaption></figure>

Leave the title blank and use a Rich text section above to build a custom heading with an intro for the section:

<figure><img src="/files/FiOgz64kUTzDDLLJ0iMX" alt=""><figcaption><p><strong>Rich text heading and text styled as title and intro</strong></p></figcaption></figure>

<figure><img src="/files/rSPc5GFDizVWwINDO8yP" alt=""><figcaption><p><strong>Rich text kicker and text styled as title and intro</strong></p></figcaption></figure>

### Blocks

The contact form section includes a wide range of form elements that you can use to fully customize the contact form:

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Text line</strong></td><td>Single line form input. Used commonly for name, or address portions.</td></tr><tr><td><strong>Text area</strong></td><td>Multi-line form entry. Can be used in addition to message block</td></tr><tr><td><strong>Telephone</strong></td><td>Pre-formatted phone number entry, single line</td></tr><tr><td><strong>Heading</strong></td><td>Bold text for titles or information. Ideal for breaking up long forms</td></tr><tr><td><strong>Spacer</strong></td><td>Add vertical padding or a line spacer</td></tr><tr><td><strong>Single checkbox</strong></td><td>Checkbox with text. Add once or more for additional checkboxes</td></tr><tr><td><strong>Select dropdown</strong></td><td>Choose one or more from multiple options in a dropdown</td></tr><tr><td><strong>Radio buttons</strong></td><td>Grouped radio buttons, choose only one option from multiple</td></tr><tr><td><strong>Email</strong>*</td><td>Required field for all forms. Collects customer's email address</td></tr><tr><td><strong>Message</strong>*</td><td>Required field for all forms. The main message body</td></tr></tbody></table>

<figure><img src="/files/pXHdECF1ndFTvroVBTGo" alt=""><figcaption></figcaption></figure>

### Block settings

Each block contains options pertaining to the block. Configure each one to fine-tune the form.&#x20;

Example of the heading block settings:

<figure><img src="/files/w73Rw94A7nfDsXnFs1cb" alt=""><figcaption><p><strong>Heading block</strong></p></figcaption></figure>

With the Text line, the label option displays text inside the form field to prompt the customer with what to enter. The label disappears once any text is inputted:

<figure><img src="/files/HZGi4ma3dWvQJRqKeX6t" alt=""><figcaption><p><strong>Text line. Similar settings used for Single checkbox and Telephone</strong></p></figcaption></figure>

The Spacer block has the option to show a line. If unchecked, the spacer will add vertical spacing only without a line:

<figure><img src="/files/tXTi9p6wbeHmiXu7KXLr" alt=""><figcaption><p><strong>Spacer block</strong></p></figcaption></figure>

The Select dropdown block contains settings for the title and each of the dropdown options:

<figure><img src="/files/VcI23D3TJakgYrTqpmg2" alt=""><figcaption><p><strong>Select dropdown. Similar settings are used with Radio buttons</strong></p></figcaption></figure>


# Custom HTML

Build a custom section with any of your requirements

This section allows you to add HTML code as a section to any page or template. Ideal for embedding HTML code from sites like Google Forms, surveys, newsletters, and much more. This can also be used for certain Shopify Apps that require a block of HTML to be added to the store.&#x20;

### How to use

Start by adding the section to your homepage, page, blog, or any template:

<figure><img src="/files/OQvEPydagc4GKAUMiWqm" alt=""><figcaption></figcaption></figure>

In the Section settings, add your HTML code in the Custom HTML area:

<figure><img src="/files/WMwKKKl2ZsVpnVlOVG25" alt=""><figcaption></figcaption></figure>

### Section settings

Use the Section Spacing options to configure the width of the section and padding above and below.&#x20;


# Custom Liquid

Add custom Liquid code or CSS to your theme without editing the theme code

When your theme requires some custom Liquid code to be added like an App Snippet, or custom-written functionality, this section allows you to inject the Liquid code right into your theme.&#x20;

This section will accept HTML and CSS as well:

<figure><img src="/files/GPXVomLbpzrt2hotJdWG" alt=""><figcaption></figcaption></figure>

> ***Tip***: If you are adding custom CSS, these can be used as overrides for the current page only.&#x20;
>
> Ideal if you want certain headers or text changed for the homepage only or a certain page template

### How to use

If you have an App that requires custom code including Liquid, add the section to the homepage or the suggested page/template by the App developer:

<figure><img src="/files/2vf9F2ojq7P6fOc6N0pb" alt=""><figcaption><p><strong>Example on homepage</strong></p></figcaption></figure>

Add the custom code block into the Section settings:

<figure><img src="/files/wDQv6AF1JJRDle5AgK5M" alt=""><figcaption><p><strong>Example of Product Page template</strong></p></figcaption></figure>

&#x20;


# Custom content

A powerful all-in-one flexible section with all the tools you need to design a custom section

Pipeline's most customizable section which includes the most commonly used features, all together in one section.&#x20;

This is a great starting point for many merchants to build a custom look on their homepage and on other pages and templates throughout the store. Start by adding the section and then choosing either one or two blocks to build your design:

> ***Tip:*** Choosing one block will create a full-width style section. Choosing two blocks builds a two-column layout.

<figure><img src="/files/14LHcqIV3uWJSF8GiW4J" alt=""><figcaption></figcaption></figure>

#### Block choices:

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Add one or two image blocks for image columns. Includes overlayed headings, text, and button options</td></tr><tr><td><strong>Text</strong></td><td>Add a custom text column with heading, text, and button options. Each block is a column</td></tr><tr><td><strong>Newsletter</strong></td><td>Newsletter sign-up form, couple with an image block to build a rich sign-up section</td></tr><tr><td><strong>Video</strong></td><td>Display a full-featured background MP4 video with support for popup steaming videos</td></tr><tr><td><strong>Product</strong></td><td>Promote any product in your store, includes easy-to-use custom badge option</td></tr><tr><td><strong>Collection</strong></td><td>Showcase products from a collection in a scrollable product card</td></tr><tr><td><strong>Article</strong></td><td>Showcase any blog articles with options to display an excerpt, author, author image, date, and more</td></tr></tbody></table>

## Example layouts

Below is a sample of single-block and double-block variations when using Pipeline's Custom Content section.&#x20;

### Video and collection

A looping MP4 video from your Shopify files library and a collection block:

<figure><img src="/files/jQJ3F7nRdKJ1ynGwYRST" alt=""><figcaption></figcaption></figure>

### **Image banner**

A hero-style image banner when only one block is used:

<figure><img src="/files/hDPP9Y5tIoKUg3TSLBXl" alt=""><figcaption><p><strong>Single image block</strong></p></figcaption></figure>

<figure><img src="/files/aeqgU0QCwBGePb5UU74V" alt=""><figcaption><p><strong>Image with spection spacing added</strong></p></figcaption></figure>

### **Image and Collection**

Products from the collection are displayed in a slideshow with dots below to indicate the number of products:

<figure><img src="/files/DOClklWdxLEtauoIpcRn" alt=""><figcaption><p><strong>Image block with Collection block</strong></p></figcaption></figure>

### Product and Image

<figure><img src="/files/oBNogxTJ3xyfjdnxaiQi" alt=""><figcaption></figcaption></figure>

### Image and text

<figure><img src="/files/jAdvTkJxK3Z6mSgUt90d" alt=""><figcaption></figcaption></figure>

### Two-column text section

Single block text:

<figure><img src="/files/8FghLM7QOb8OD5LIXbKZ" alt=""><figcaption><p><strong>Use of section color settings used to bring out the section</strong></p></figcaption></figure>

### Image and Newsletter

<figure><img src="/files/hT3XDCfoddPAfOhmQmpd" alt=""><figcaption></figcaption></figure>

### Text and Collection

<figure><img src="/files/FsNuxIJW9XR3pAvo0taA" alt=""><figcaption></figcaption></figure>

Experiment with this flexible section with blocks. Add to your homepage, lookbook, product pages, search, 404 page, blogs, and more.&#x20;

### Additional reference

See the Image with text section for additional information:

{% content-ref url="/pages/bUiAnprFBa01ihSIGX5C" %}
[Image with text](/sections/list-of-sections/image-with-text)
{% endcontent-ref %}


# Featured article

Powerful block-based section to feature blog posts

Promote your blog posts with this full-featured section with many custom blocks to build the right design for your shop:

<figure><img src="/files/y9jBf0Hf6sHaSWdy8SOC" alt=""><figcaption><p><strong>Desktop view</strong></p></figcaption></figure>

Dress up your blog section by featuring an article or placing it wherever you desire including the homepage, product detail pages, and throughout your site.&#x20;

<figure><img src="/files/fqDe9BLjBvMKXWurKnJJ" alt=""><figcaption><p><strong>Mobile view</strong></p></figcaption></figure>

### Section settings

Choose an article from your blog posts and use the image option to override the article's featured image. The position and section height options will help you find the right size for the section and image placement. &#x20;

<figure><img src="/files/oGaIcW3I6mww3aTrbOBC" alt=""><figcaption></figcaption></figure>

The article's featured image is used as the main image asset. Use the image option to use a custom image:

<figure><img src="/files/RimacXppYX7OgOR7569j" alt=""><figcaption></figcaption></figure>

The *image full width* checkbox will toggle between a full-width image and a smaller-sized image with the text section beside:

<figure><img src="/files/fZ618wl0zMw0yuwnjVUe" alt=""><figcaption></figcaption></figure>

The overlay options help text to standout when a text background color is set to transparent:

<figure><img src="/files/j00dW6KVpsM0HwGHx1oY" alt=""><figcaption></figcaption></figure>

### Blocks

Add and arrange the included blocks to customize the message area of the section:

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Kicker</strong></td><td>Toggle options to show the author and date of post</td></tr><tr><td><strong>Heading</strong></td><td>Displays the main headline with a text size option</td></tr><tr><td><strong>Button</strong></td><td>Style options for linking to the article. Default text and link is used when left blank. Override options included. </td></tr><tr><td><strong>Text</strong></td><td>Override excerpt from article with custom text</td></tr></tbody></table>

Blocks are placed in the message area. Section settings control the positioning and styles:

<figure><img src="/files/Elva6k7smGcGYcgPjzLY" alt=""><figcaption></figcaption></figure>


# Featured product

A complete product form section to feature a product on any page

Choose from different desktop layout options including Grid:

<figure><img src="/files/X53Ag62ATiaVu3fhdxRT" alt=""><figcaption></figcaption></figure>

Use blocks to customize the for options and section settings to adjust the layout:

<figure><img src="/files/ZhDR5nuddWv4BPdS7z3V" alt=""><figcaption></figcaption></figure>

Mobile layout options include a carousel or traditional thumbnails:

<figure><img src="/files/oms0bSV49g7JQgDhpoQV" alt=""><figcaption></figcaption></figure>

Use the Alt-text from your product images to build interactive captions for customers.&#x20;


# Gallery

Elegant image gallery section for Lookbooks and more

Quickly build an image gallery utilizing Pipeline's design language. The Gallery section is an easy-to-build section that includes many features to manage the layout, and user interaction:

<figure><img src="/files/2pXqSd9HvJW7YwJfSNNe" alt=""><figcaption></figcaption></figure>

Complement with the Gallery text section to add captions:

<figure><img src="/files/xWNihbptr57xtKCVJGU5" alt=""><figcaption><p><strong>Easily add captions with Gallery text section</strong></p></figcaption></figure>

### Section settings

Use the section settings to adjust image scaling, background color, padding (gutters), multi-image progress bar, items per row for different device types, and section padding:

<figure><img src="/files/UABItXHBtWje1XygTPL5" alt=""><figcaption></figcaption></figure>

Images are sized down if the Items per row setting is set high. Larger images with scrolling are displayed when the Items per row setting is set lower:

<figure><img src="/files/MkLlSrGha1nkEoHYlwhR" alt=""><figcaption></figcaption></figure>

### Block settings

Add image blocks to the section and customize with image choice, positioning, and optional link:&#x20;

<figure><img src="/files/SWjdPvji1PEpkuFVtQcd" alt=""><figcaption></figcaption></figure>

A pop-up video player is displayed when a YouTube or Vimeo link is used.&#x20;

If the link is empty, the image will zoom. You can also link to a local or external page when a URL is used.&#x20;


# Gallery text

Elegant text captioning section with multiple column support

Add styled text captions to complement the Gallery section. Gallery text uses blocks, you can span a caption to display across an entire row or use columns with the blocks added:

<figure><img src="/files/WWxqWYeIpsJbfsMKZKdw" alt=""><figcaption><p><strong>Single block caption spanned across entire row</strong></p></figcaption></figure>

Add a second block to build columns:

<figure><img src="/files/Dnvka1DNKjq3baHV5JNA" alt=""><figcaption><p><strong>2-column caption layout</strong></p></figcaption></figure>

### Section settings&#x20;

Use the section settings to modify the background, number of blocks per row, section width, and section padding:

<figure><img src="/files/kZridgZV3uQysw2RguW7" alt=""><figcaption></figcaption></figure>

### Block settings

Each block can be configured with a heading, heading size, the main caption text, caption text size, and alignment position:

<figure><img src="/files/0h2qDIiOVVbGXAv4jwtZ" alt=""><figcaption></figcaption></figure>


# Icon columns

Build icon-based sections with a full set of included SVG commerce icons

Promote your business advantages with easy-to-build high-resolution SVG icons:

<figure><img src="/files/dZLOX3E1zhqbcg38prGP" alt=""><figcaption></figcaption></figure>

Choose and customize from a rich set of commerce icons or use your own images for a custom icon:

<figure><img src="/files/HJlrO993u8pK3r7x9kAl" alt=""><figcaption></figcaption></figure>

Stacked or Slider options for mobile devices:

<figure><img src="/files/uJjQ7i9cBktZ8CFlhgc2" alt=""><figcaption><p><strong>Mobile slider</strong></p></figcaption></figure>

### Section settings

Use the section settings to design the layout style, icon size, and icon placement:

<figure><img src="/files/Hm36zUwHyUJv8ZhE8izQ" alt=""><figcaption></figcaption></figure>

### Block settings

Each icon column block can be configured with a built-in icon, optional .PNG custom image, icon color, description text, and link:

<figure><img src="/files/LTy6JnsrOONgJXIOwkOb" alt=""><figcaption></figcaption></figure>

Use the section settings for the layout style and block settings for each individual icon details:

<figure><img src="/files/CaoTxqrBpyM1pJLfixuY" alt=""><figcaption></figcaption></figure>


# Image banner

Pipeline's powerful block-based hero style image banner section

Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:

<figure><img src="/files/6P6xd4zpWlivNMtnPISz" alt=""><figcaption><p><strong>Each button block can contain multiple buttons</strong></p></figcaption></figure>

<figure><img src="/files/PoPc7FNI0jE6nM3TGztr" alt=""><figcaption><p><strong>Separate image options for Desktop and Mobile</strong></p></figcaption></figure>

### Section settings

Use the section settings to choose images for desktop and mobile, image position, and section height:

<figure><img src="/files/Bve6NeYI2sPOaoaEciYa" alt=""><figcaption></figcaption></figure>

> ***Tip***: Use the *Image height* setting to view the entire image without any cropping. Especially helpful for mobile devices. All other height options will automatically crop and position the image based on position and height settings selected. The provided mobile image option is designed to help by using a custom image which may work with different height options.

<figure><img src="/files/KajBK1xCioZkHtxJjtyD" alt=""><figcaption></figcaption></figure>

The overlay feature is only applied to the text area, adjust the color and opacity to help the text stand out over the image.&#x20;

Customize the text options and section spacing to finetune the design. The text area can be transparent or contain a background color:

<div><figure><img src="/files/NY8ccyyCH5KENV0sv6wO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EIIiSAYo3YPss9fG6eSY" alt=""><figcaption></figcaption></figure></div>

### Blocks

Add content blocks to customize the Image banner section. Individual blocks can be added multiple times and reordered for complete customization:

<figure><img src="/files/LPZubsqj8b7CAKMMj2uQ" alt=""><figcaption></figcaption></figure>

Add your content into each block and customize using the settings available to each block type. The Buttons block can have multiple buttons, add content to create each required button:

<figure><img src="/files/FbJ88JT53U0k1fNGWGrU" alt=""><figcaption></figcaption></figure>

Buttons are stacked on mobile and horizontal in a row on desktop. For stacked desktop buttons, add a second Button block. The second block will display below the first block:

<figure><img src="/files/YzMztCqlaK4CEgpjhijF" alt=""><figcaption></figcaption></figure>

## Transparent header

Blend your banner image with the header area:

<figure><img src="/files/oOyNpX9Ip6IPkYxcLjSV" alt=""><figcaption></figcaption></figure>

Here are some tips for the perfect transparent header and Image banner combination:

### **Header** section settings

1. Enable with the **checkbox** in the Header settings under Transparent header.
2. Add an alternate logo that works best for the transparent header effect. In our example, we have a white Alternate logo and the standard header logo is black.

<figure><img src="/files/YrU4I1BuMF8eppkCus4l" alt=""><figcaption><p><strong>Header settings</strong></p></figcaption></figure>

### **Image banner** section settings

1. Use the **Full width** option under Section spacing
2. Set **Padding top** to 0px (none)

<figure><img src="/files/Tn4MAHuDfikYVMGiPATh" alt=""><figcaption><p><strong>Image banner section settings</strong></p></figcaption></figure>


# Countdown timer

Introduced in Pipeline 7.2

A countdown time can help bring a sense of urgency to your shopper. Add the countdown timer block to your image banner or other text section and customize it with rich features:

<figure><img src="/files/NnVNugUK9q8nECc3ltwc" alt=""><figcaption></figcaption></figure>

## Countdown settings

Customize the countdown timer based on your store's timezone setting.&#x20;

### End time

Choose a date and time to end the promotion.&#x20;

### Expired time

* Once the countdown has reached the end time, you can display a custom message to your shoppers:

<figure><img src="/files/PpqwYpfsXkRd0O9TJSeG" alt=""><figcaption></figcaption></figure>

* Another option is to hide the section from your store completely. It is ideal for creating a promotional banner and having it expire automatically.

### Text sizes

Use the range sliders to customize the countdown text size for desktop and mobile.&#x20;

### Text words

To customize the countdown text for Days, Hours, Minutes and Seconds - Use the Default theme content editor.&#x20;

* Click on the ellipsis icon (three dots) and choose Edit default theme content:

<figure><img src="/files/TOCFcHo5tkwo4s3bEGk4" alt=""><figcaption></figcaption></figure>

* When the editor loads, type in `countdown` into the filter box to quickly find the text for the countdown text options:

<figure><img src="/files/bkkkjlhcEMTup55SK6oB" alt=""><figcaption></figcaption></figure>

* Modify the text and Save. These changes will apply to all countdown modules in the store.&#x20;


# Collage

Introduced in Pipeline 7.2

The collage block in Pipeline helps you add an extra layer of images over your image banner section. With the shape options, you can create custom designs that resemble stickers or unique image layouts:

<figure><img src="/files/qjNAqqrIUuYT2K6dg4VM" alt=""><figcaption></figcaption></figure>

Add a new collage block for each image. Customize each block independently with settings for:

* Image width
* Shape
* Horizontal and vertical positioning
* Option to display or hide on mobile

The image position sliders allow you to place the block in any position you like over the main banner image. Experiment with sizes, shapes and positions for a completely flexible promotion.&#x20;

### Pipeline image shapes

Video overview of the custom shape options:

{% embed url="<https://www.loom.com/share/bf892561adfa47169125954901b2f269?sid=a8b14647-3bb1-4b4f-9ab8-d31b22e8ccc2>" %}


# Image with text

Single or two-column flexible section

Pipeline's most popular section that's evolved with multiple block types to promote almost anything you can imagine.&#x20;

Multiple layouts and design options to build single and two-column promotions:

<figure><img src="/files/N8wL8rWwI5ercwpRqlka" alt=""><figcaption><p><strong>Desktop Image with Text</strong></p></figcaption></figure>

<figure><img src="/files/9LnY3nnLxnOFFl28V6bD" alt=""><figcaption><p><strong>Mobile stacked Image with Text following</strong></p></figcaption></figure>

### Single block layouts

When a single block is used, the section can be used as a full-width image or text section with padding options:

<figure><img src="/files/Lp1h0bpKsdv5r7u3GKcg" alt=""><figcaption></figcaption></figure>

### Two block layouts

Build two-column desktop sections when a second block is added:

<figure><img src="/files/0f9AtCJMSp4B1x3xEAgY" alt=""><figcaption></figcaption></figure>

Choose from a large selection of block types to design creative sections:

<figure><img src="/files/ijALgwSCcN8UfYsWdAHH" alt=""><figcaption></figcaption></figure>

Each block type has custom settings to customize:

<figure><img src="/files/ZBP3TNgWR3HdMFQcYAmY" alt=""><figcaption><p><strong>Video block settings</strong></p></figcaption></figure>

> ***Tip:*** Use the Background Image option in the video block to display an image while the MP4 video is loading. A looping MP4 video can be displayed, use the URL from your Shopiy Files found under the main Shopify Admin Settings

<figure><img src="/files/LcssUKOEMNxyFB9BZz9q" alt=""><figcaption><p><strong>Collection block settings</strong></p></figcaption></figure>


# Logo list

Promotion logos and links with an animated marquee feature

With Pipeline's Logo list, you can easily build a section with brand logos or promotional images and add them to your shop:

<figure><img src="/files/xakyCihDDdgacrvjnlI0" alt=""><figcaption><p><strong>Logo blocks</strong></p></figcaption></figure>

Animated the images with a scrolling marquee option:

<figure><img src="/files/V0zZtbp3G8nPh1XO5mB3" alt=""><figcaption><p><strong>Desktop and Mobile animation</strong></p></figcaption></figure>

### Section settings

Configure an optional heading, background color, marquee scrolling option, and padding options:

<figure><img src="/files/KhwqHE3AOLmTYhYDhsHP" alt=""><figcaption></figcaption></figure>

Logos are displayed on multiple rows based on the number of logo blocks used. To align all in one row, use fewer logo blocks or enable the animated marquee option to scroll on a single line.

### Block settings

Add logos or images in the block settings. Use the link option to add a page link or external URL. If checked, *Open in new window* will open the link in a new tab or window. Adjust image sizing and padding with the control sliders:

<figure><img src="/files/Mz930Pl1ax6N7kSZ8fAy" alt=""><figcaption><p><strong>If no link URL is provided, there will be no call to action</strong></p></figcaption></figure>

> ***Tip***: Use transparent .PNG images for best results. Alternatively, match the background color with the logo backgrounds.&#x20;


# Map

Add location and map information to your storefront

Provide store and location information with a custom image map or interactive version.

#### Static Image

Add your own custom image and store information.

![Button can link to store directions](/files/-MN_1flOA_8jBsqUk5Rq)

#### Interactive Maps

Use Google's API to add an interactive and styled map:

![](/files/-MNj98MH_6KKahFJEsda)

Learn more about Google's Map API and how to use it:

{% embed url="<https://help.shopify.com/en/manual/online-store/os/using-themes/change-the-layout/theme-settings/map-section-api-key>" %}


# Mosaic

Arrange a wide variety of Pipeline's blocks to build a unique pattern section

Design a custom layout with multiple block types to create custom pages and sections. Add up to three blocks with this section to build patterns that can easily be modified:

<figure><img src="/files/oqpg36PdtULJdG1U5v4Z" alt=""><figcaption><p><strong>Mosaic section used as location links</strong></p></figcaption></figure>

Choose from a range of Pipeline's blocks:

<figure><img src="/files/mUSp7KelXfHKHGd4PHm6" alt=""><figcaption><p><strong>Add various block types</strong></p></figcaption></figure>

Combine multiple sections to display more items:

<figure><img src="/files/qpEoeTuR6p2w0W1qrIWh" alt=""><figcaption><p><strong>Two mosaic sections combined</strong></p></figcaption></figure>

Mobile devices will display a stacked view of the blocks:

<figure><img src="/files/TVofpraRdxzgXKX7pbFq" alt=""><figcaption><p><strong>Stacked mobile view</strong></p></figcaption></figure>

### Section settings

In the section settings, you'll find different layout options to easily change the pattern of your mosaic.

#### First block height

When setting the *First block height* option to Short, the first block in the section is displayed smaller followed by a short second block:

<figure><img src="/files/5VZUpedjMZxirZ5NlUtA" alt=""><figcaption><p><strong>Short first block height</strong></p></figcaption></figure>

Using Tall first will change the layout, beginning with a tall image first image and also pushing the second image to the next column:

<figure><img src="/files/AwgRpEDobauMLlgNsioh" alt=""><figcaption><p><strong>Tall first block height</strong></p></figcaption></figure>

#### Split

The Split option will adjust the column size based on your selection. When Right is selected, the left side is longer, followed by the split and then a narrower column for the right side:

<figure><img src="/files/fIYSny1UmnAhWJCk3viI" alt=""><figcaption><p><strong>Right split</strong></p></figcaption></figure>

The Center option will move the split to the middle:

<figure><img src="/files/UIsOebe1n8gNjLRll8C6" alt=""><figcaption><p><strong>Center split</strong></p></figcaption></figure>

The Left option will move the split to the left side making the first column narrow and the second wider:

<figure><img src="/files/i0fkkJwq7B5uOQPIvHyL" alt=""><figcaption></figcaption></figure>

Use in combination with the *First block height* to transform the layout style:

<figure><img src="/files/jL6lG3FlcgeBjMX3zqkm" alt=""><figcaption><p><strong>Tall and Left</strong></p></figcaption></figure>

### Block settings

Use the block settings for each block type to custom configure individually. Each block has custom text, images, link options, and more.&#x20;

<div><figure><img src="/files/7TSmrW6nTJlKz9OoTV2e" alt=""><figcaption><p>Sample of image block settings</p></figcaption></figure> <figure><img src="/files/3vUmfN8XWFpMCxjCNC4u" alt=""><figcaption><p>Sample of product block settings</p></figcaption></figure></div>


# Newsletter

Add a quick and simple newsletter sign-up form to any page

Pipeline provides various methods for adding a newsletter sign-up option to your shop, including the footer and blocks in various sections. This section allows you to promote your newsletter on any page easily.&#x20;

<figure><img src="/files/OqWcCaLXy32yliqyY7SL" alt=""><figcaption></figcaption></figure>

The newsletter form collects the customer's email address and tags them in your customer base with "Accepts Marketing." When integrated with newsletter apps, you can target these customers with updates. New subscribers will be seen as new Customers in your Shopify admin tab.

### Combine with Rich Text

Add a different header style when combined with the Rich Text section positioned above and reduced section padding:

<figure><img src="/files/Gazoto16GNweesobIAQl" alt=""><figcaption></figcaption></figure>

## Additional newsletter options

The fresh modern Footer design in Pipeline has an option for customers to sign-up, this is a way to have the sign-up option always available throughout the site.

### Footer

<figure><img src="/files/8bGaSRrnaPw4ipdMgQzL" alt=""><figcaption><p><strong>Footer</strong></p></figcaption></figure>

Two other sections that are similar, *Custom content*, and *Image with text* both have a newsletter block that will allow you to build a graphical section to create a beautiful sign-up section.

### Custom content

<figure><img src="/files/bQe5v3TQTqeCIR7bCngv" alt=""><figcaption><p>Custom content</p></figcaption></figure>

> ***Tip:*** The same design can be built with the section: Image with text

See also:

{% content-ref url="/pages/kBYJGns472WLf7IbXhPY" %}
[Custom content](/sections/list-of-sections/custom-content)
{% endcontent-ref %}

{% content-ref url="/pages/bUiAnprFBa01ihSIGX5C" %}
[Image with text](/sections/list-of-sections/image-with-text)
{% endcontent-ref %}

## Sending newsletters

A third-party app from the Shopify App Store will be required for automated emails and the creation of custom mailing lists. The newsletter sign-up forms in all Shopify Themes can only collect the customer's email address and name. Apps help you build newsletters, add mailing lists, and automate sending messages to customers who have signed up.

Shopify email marketing apps can be found here:

{% embed url="<https://apps.shopify.com/categories/marketing-and-conversion-direct-marketing>" %}
Shopify App Store
{% endembed %}

Or search with this query:

{% embed url="<https://apps.shopify.com/search?q=email+marketing>" %}
Shopify App Store
{% endembed %}


# Page

Add a Shopify Page as content and then style it to match your site design

Quickly create a custom section by simply adding a Shopify Page that you've already created in your Shopify Admin's Page editor:

<figure><img src="/files/fA2TFOdAUgtXOrREJuts" alt=""><figcaption></figcaption></figure>

Use Pipeline's section features to style the page:

<figure><img src="/files/0TfyHtvEnK3ZNtFYaR4n" alt=""><figcaption><p><strong>A quick and simple method for creating custom section content</strong></p></figcaption></figure>

### Images

Easily build any type of section including images:

<figure><img src="/files/gCn8JSk6R93zLw2A21Wn" alt=""><figcaption><p><strong>Size chart image from Page content</strong></p></figcaption></figure>

* On mobile devices, the entire image will be shown without cropping:

<figure><img src="/files/KqXAhT71ACYqn4kB6djj" alt=""><figcaption></figcaption></figure>

### Shopify Pages

To edit or view your Pages, you can find them under Online Store in the main Shopify Admin:

<figure><img src="/files/eJWnYCcGrvMQ61lSpGml" alt=""><figcaption><p><strong>Simply add an image in the Page Editor and include a title</strong></p></figcaption></figure>

### Section settings

After selecting a page, use the Section settings to make adjustments like:

* Show or hide the page title
* Text size
* Text and image alignment
* Text color
* Background color
* Spacing and padding

<figure><img src="/files/etzmhdLgu4V9rs6RO26f" alt=""><figcaption></figcaption></figure>


# Product grid

Traditional collection product grid section with mobile and desktop layout options

Feature products from collections with this rich modern product grid section:

<figure><img src="/files/Uv40DdgUVdtfA5xM18hG" alt=""><figcaption></figcaption></figure>

Supports siblings swatches, animated product image slideshow, and Quick Add.

### Quick Add

The Quick Add drawer allows customers to view all the product images and easily choose the correct variant option:

<figure><img src="/files/9U0ozfXA4sEaacYBKN1b" alt=""><figcaption></figcaption></figure>

Section settings include heading title, collection, products per row for desktop and mobile, section background color, a show all button, and section padding.&#x20;

{% hint style="success" %}
Pipeline can show both a Quick Add and Quick View option.&#x20;

* If you have more than one variant option and the swatches option isn't enabled for the "color" variant option, the Quick View feature is shown.
* When the number of variant options is more than 15, or the combined length of the variant options is more than 90 characters, it will show the Quick View feature.
  {% endhint %}

### Section only

The Product grid section only uses section settings to configure. This design is a quick and simple section to feature one collection. For the block version with additional options and to also display multiple collections in one, see the Collection product grid section:

{% content-ref url="/pages/IzCBBjMIADN7wYac45OS" %}
[Collection product grid](/sections/list-of-sections/collection-product-grid)
{% endcontent-ref %}


# Product slider

Display collection products in a single row with a horizontal slider

A full-featured collection slider for a single collection. Includes animated product images, support for siblings swatches, Quick Add, and more:

<figure><img src="/files/l7zAhzW1gjQF7k6euUkc" alt=""><figcaption><p><strong>Product image slide show on hover</strong></p></figcaption></figure>

Customers can scroll through the collection products:

<figure><img src="/files/AOI1F5TWVv2DsmfEuTCq" alt=""><figcaption></figcaption></figure>

Quick Add allows customers to quickly add products to the cart with variant options. Swatches and  siblings are displayed below the price:

<figure><img src="/files/GUOgL1AvrjuMCMjxWzE9" alt=""><figcaption></figcaption></figure>

Mobile customers can swipe through products and interact with siblings and variants:&#x20;

<figure><img src="/files/hQFQVaAlg4E8OJ3WKQxX" alt=""><figcaption></figcaption></figure>

For the tabbed version to feature multiple collections using blocks, see:

{% content-ref url="/pages/hLkWFVEtAcSQSCx7vzZq" %}
[Product slider tabs](/sections/list-of-sections/product-slider-tabs)
{% endcontent-ref %}


# Product slider tabs

Tabbed collection row of featured collections

Feature multiple collections on a single row using tabs for each collection:

<div data-full-width="false"><figure><img src="/files/RCDM5OKZJbXFpkEX4H3w" alt=""><figcaption></figcaption></figure></div>

Use the section settings to manage the number of products per row for all device types:

<div data-full-width="false"><figure><img src="/files/YYJEn9MRtxbuZQLs2may" alt=""><figcaption></figcaption></figure></div>

Mobile carousel allows customers to swipe through products and interact with variants:

<div data-full-width="false"><figure><img src="/files/Ay9jHLmmi9u3co9YKU7Z" alt=""><figcaption></figcaption></figure></div>

The desktop display includes controls to scroll through products and use Quick Add:

<figure><img src="/files/GWFzw33lVk4ti9yp7Hno" alt=""><figcaption></figcaption></figure>


# Products with image

Feature specific products with an associated image or video in a unique layout format

Build a beautiful custom layout with select products from a collection and compliment it with a video or image:

<figure><img src="/files/DIUmZOwAMit1LLyRVNEk" alt=""><figcaption></figcaption></figure>

Choose any number of images from a collection by creating your own product list:

<figure><img src="/files/RuzkfiFHoPYtNdCJ3nGR" alt=""><figcaption></figcaption></figure>

Adjust the number of products per row and limit the total shown in the section settings:

<figure><img src="/files/3V285SrYKXilSqSNpusb" alt=""><figcaption></figcaption></figure>

Use the change button to modify the product list or remove all to select new products:

<figure><img src="/files/lI50P7Df7e6OItLV4OMd" alt=""><figcaption><p><strong>Tipe: Connect to dynamic source when using template</strong></p></figcaption></figure>

### Video

Display an optional MP4 looping video by choosing the URL of a video from your Shopify files library:

<figure><img src="/files/OIHsCIrHfwe1NHOvFv8l" alt=""><figcaption></figcaption></figure>


# Recently viewed products

Add a section of recently viewed products to any page

Remind customers of which products they've been viewing with this section. Products that have been recently viewed will automatically populate in this product grid style section:

<figure><img src="/files/PdrXdAIo0JUXJl8OMj2R" alt=""><figcaption></figcaption></figure>

Section settings will help you customize the layout, heading, and how many products to display.&#x20;


# Rich text

More than just text, loaded with icons, lists, and image blocks

Build beautiful text-based headings or quickly create sections with icons, lists, or images. Rich text is a Pipeline's powerful multipurpose section with a wide range of blocks.&#x20;

Examples of blocks used with the Rich text section:

### Heading

Add a custom heading to introduce the next section below:

<figure><img src="/files/nEIF8uFtv2IdrnFbO5Ea" alt=""><figcaption></figcaption></figure>

### Icons&#x20;

Add the Icons block to build a quick row of rich SVG icons with text:

<figure><img src="/files/EpAJyWqz3oDgBYJ2HWlq" alt=""><figcaption></figcaption></figure>

Use the block settings to choose from a large list of professionally designed premade icons, or add your own image. Additional settings to set the size of the text labels, background color, and more:

<figure><img src="/files/UYr3DZmSCTC32d0CBgCh" alt=""><figcaption></figcaption></figure>

### Icons with text

Another icon-based block with additional text and position-style options:

<figure><img src="/files/hhAqJbwNLldRt4Ic0RYo" alt=""><figcaption></figcaption></figure>

### Text and Image blocks

Combine the text and image blocks to build custom logo promotions:

<figure><img src="/files/jQhZ9l9j4sC84s4P8Qp1" alt=""><figcaption></figcaption></figure>

### Blocks

Add blocks to customize the Rich text section and use on any page or template:

<figure><img src="/files/zZjT90zDcJzhJqIAjbEf" alt=""><figcaption></figcaption></figure>

List of blocks included in Rich Text:

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Kicker</strong></td><td>Styled sub-heading</td><td></td></tr><tr><td><strong>Heading</strong></td><td>Main Pipeline heading style</td><td></td></tr><tr><td><strong>Text</strong></td><td>Description text</td><td></td></tr><tr><td><strong>Buttons</strong></td><td>Call to action buttons</td><td></td></tr><tr><td><strong>Icons</strong></td><td>Row of SVG icons with labels</td><td></td></tr><tr><td><strong>Icons with text</strong></td><td>SVG icons with robust text options</td><td></td></tr><tr><td><strong>List</strong></td><td>Order and unorder lists</td><td></td></tr><tr><td><strong>Image</strong></td><td>Display a custom logo or image</td><td></td></tr><tr><td><strong>Spacer</strong></td><td>Add a line or space between blocks</td><td></td></tr></tbody></table>


# Scrolling promotion

Horizontal scrolling announcement bar style section with custom blocks

Draw attention to your key messages throughout your store with message blocks that help you quickly design custom promotions.&#x20;

<figure><img src="/files/MvkOvDWNaPAxxh0clDS3" alt=""><figcaption></figcaption></figure>

### How to use

Video overview of section and block settings:

{% embed url="<https://www.loom.com/share/0ab7395172654addaa976869a377ace7>" fullWidth="true" %}

### Blocks&#x20;

The scrolling promotion section includes a range of promotion blocks to help you easily build custom and creative messages:

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Text announcement</strong></td><td>Text with formatting options and links</td></tr><tr><td><strong>Free shipping message</strong></td><td>Alert customers how close they are to qualifying for free shipping</td></tr><tr><td><strong>Custom HTML</strong></td><td>Build your own custom message</td></tr><tr><td><strong>Icon column</strong></td><td>Professionally designed icons to select from or add your own image with message</td></tr></tbody></table>


# Shop the look

Show your products in context.

### Setup

The hardest part about a shop the look section is finding an image that wil work on both desktop and mobile. For this reason we included the option to upload two images and have two sets of "hotspot" dots.&#x20;

<figure><img src="/files/AM6gO111SJxkwt2HpMyr" alt=""><figcaption><p>If you choose to use a separate image or a different crop of the same image, you'll need to check the box to enable this feature and upload a second image. </p></figcaption></figure>

If you use a separate mobile image, make sure to set the dot position for both the desktop and mobile image. If you don't have a mobile image, the dot sliders for the mobile image no longer have any effect on the section.&#x20;

<figure><img src="/files/sBJBoGoW2V4kDYZmjzlY" alt=""><figcaption><p>I recommend placing the dot in a position where it's unlikely to be underneath the product card.</p></figcaption></figure>

<figure><img src="/files/VVExx6BCt4nx8t7KGiyE" alt=""><figcaption><p>If you use a separate mobile image, make sure to set the dot position for both the desktop and mobile image. If you don't have a mobile image, the dot sliders for the mobile image no longer have any effect on the section. </p></figcaption></figure>

Mobile cards will open in a popup drawer.

####


# Slideshow

Pipeline's hero-style slideshow section with support for mobile and desktop devices

Showcase your brand and products with Pipeline's powerful slideshow section. Customize your slides to promote products on both mobile and desktop devices.

<figure><img src="/files/cDprTY37oZ3Qc2926Y65" alt=""><figcaption><p><strong>Desktop image setting</strong></p></figcaption></figure>

### Mobile image

Portrait images can be used for mobile devices. Each slide can have a different mobile image:

<figure><img src="/files/fiyrzysUDSMpgE6AUY9F" alt=""><figcaption><p><strong>Mobile image setting</strong></p></figcaption></figure>

> ***Tip***: Use the ***Image height*** setting to view the entire image without any cropping. Especially helpful for mobile devices. Combined with turning off Parallax images in the Theme settings -> Layout under Animations will provide the best results.&#x20;

### Prioritize image loading

When checked, the first image of the slideshow will be prioritized ahead of other theme files. This ensures there's an image displaying in the first fold when shoppers first visit:

<figure><img src="/files/qXY1SYUdwwFJcfZKfL6O" alt=""><figcaption><p><strong>Section settings</strong></p></figcaption></figure>

> ***Tip:*** Check this box for only the **first** section on your homepage. Other sections on the page should remain unchecked.&#x20;

### Multiple buttons

Add the buttons block and configure up to three buttons placed horizontally:

<figure><img src="/files/GUT0rRPwaM1D5uDmjvrE" alt=""><figcaption></figcaption></figure>

### Transparent header

Blend your banner image with the header area:

<figure><img src="/files/oOyNpX9Ip6IPkYxcLjSV" alt=""><figcaption></figcaption></figure>

Set the Padding top range slider to 0px (none) for best results:

<figure><img src="/files/ogm8VAnc2vQBC19qM6nk" alt=""><figcaption></figcaption></figure>

In the Header section settings, enable Transparent header on the homepage:

<figure><img src="/files/YrU4I1BuMF8eppkCus4l" alt=""><figcaption></figcaption></figure>

Also add an Alternate logo that works best with your images. In our example, we've added a white alternate logo. The regular logo is black.&#x20;


# Tabs

Compact tabs for displaying information to your customers

Using tabs is a convenient way to display concise and condensed information. This is a great option to consider when you want to conserve vertical space, as it is an alternative to accordions.

<figure><img src="/files/NOv6h79daHmbQPNzv9Ux" alt=""><figcaption></figcaption></figure>

###

### Create a heading

Combine the **Tabs** section with a **Rich Text** section to build a custom heading:

<figure><img src="/files/PqhqRNIvIR0Vl4hkScBt" alt=""><figcaption></figcaption></figure>

### Adjust spacing

Unique styles can be created by adjusting the Width option in the Section settings:

<figure><img src="/files/GhX6j2b6klY4rYKbfXZe" alt=""><figcaption></figcaption></figure>

### Blocks

Add a plain **Text** block or a **Page** block for the tab content and tab title:

<figure><img src="/files/L7lT4SIRrOIeIYa9HS7m" alt=""><figcaption></figcaption></figure>

Use the block settings to customize the content:

<figure><img src="/files/EHEqERSCU1M2x1zYd3R5" alt=""><figcaption></figcaption></figure>

### Images

When using the **Page** block, rich text and images can be displayed:

<figure><img src="/files/AYo2BEdYEmYAty7wT3BV" alt=""><figcaption><p><strong>Page block added</strong></p></figcaption></figure>

Page blocks can increase the height of the tab section based on the content in the Shopify Page selected.&#x20;

### Mobile

The tab headings become scrollable on mobile when the tab titles are too long to fit the device width:

<figure><img src="/files/hKwvSz15QiiwULNr3X92" alt=""><figcaption></figcaption></figure>

Page block content appears compressed to fit the width of the device. No cropping is used for the images:

<figure><img src="/files/p7ZAJALrUVQr4fWv9ubT" alt=""><figcaption></figcaption></figure>


# Text columns with images

Flexible content in columns

Quickly and easily build column-based rich content with evenly sized rows. Add images, video popups, headings, text, and call-to-action buttons. Each column is designed at the block level to give you full content control.

<div data-full-width="true"><figure><img src="/files/nqAlnw1NyxwUmZr1pqIq" alt=""><figcaption></figcaption></figure></div>

### How to

Video overview of the section and block settings:

{% embed url="<https://www.loom.com/share/7a830162ec4c4dc89a13e68a0f595735?sid=430cbdd6-91f6-482e-a796-741a2d6e4a4f>" fullWidth="false" %}

## Custom shapes

With the shape tool that was introduced in Pipeline 7.2, you can use custom image shapes to create unique, eye-catching designs:

<figure><img src="/files/EHHVr4UMeAGKWqdUiCTT" alt=""><figcaption></figcaption></figure>

### Custom shape video

Video overview on how to create custom image shapes in Pipeline:

{% embed url="<https://www.loom.com/share/bf892561adfa47169125954901b2f269?sid=a8b14647-3bb1-4b4f-9ab8-d31b22e8ccc2>" %}


# Video

Watch full-sized videos with sound and playback controls

The inline video player in Pipeline lets you quickly embed an MP4, YouTube, or Vimeo video right into any page. Let your shoppers view long videos to learn about your brand, products, and services.

MP4 videos uploaded to your Shopify Files can be played in this video section as well as videos from YouTube and Vimeo. &#x20;

## MP4 videos

Play branded MP4 videos from your Shopify Files library with inline player controls.&#x20;

* Upload your brand MP4 videos to the **Shopify Admin -> Content -> Files** storage:

<figure><img src="/files/ycYjd5BYokns8XEeWUHC" alt=""><figcaption></figcaption></figure>

* In the Theme Editor section settings for the Video section, choose your video. The files library picker will display videos from your File library:

<figure><img src="/files/h13iHL7aYnpZid7H6e9l" alt=""><figcaption></figcaption></figure>

## YouTube videos

The Video section can embed inline videos from YouTube. Simply add the Share URL from YouTube to populate the section.&#x20;

Example of a YouTube Share URL: `https://www.youtube.com/watch?v=cDxv-y1XuaA`

<div data-full-width="false"><figure><img src="/files/2seDTZAHJj2gROLPj3eh" alt=""><figcaption></figcaption></figure></div>

## Vimeo videos

Vimeo videos are supported in this inline video player. Use the Vimeo video URL instead of a share URL.&#x20;

Example of Vimeo video URL: `https://vimeo.com/246699695`

<div data-full-width="false"><figure><img src="/files/i0syu81XdFMaoEmBTsJN" alt=""><figcaption></figcaption></figure></div>


# Video banner

Pipeline's powerful all-in-one hero style video banner section

Fully customizable video banner section with options for mobile and desktop devices including support for multiple buttons, heading styles, and text options:

<div data-full-width="true"><figure><img src="/files/lfJLjwLTn1AXNmKbe3dG" alt=""><figcaption></figcaption></figure></div>

Display a banner-style looping MP4 video for desktop and mobile. Customize with optional blocks to display text, headings, buttons, and pop-up YouTube or Vimeo videos.

### How to use

Overview of how to customize and configure the settings in the Video banner section:

{% embed url="<https://www.loom.com/share/62f3a96528b34d65ba99fefc96c76b18?sid=68495632-f143-44a6-a619-d41a6d8387b1>" fullWidth="false" %}

### Blocks

These blocks power the customization options in the Pipeline Video banner section. Add multiple blocks and organize the layout order to build the exact banner video section for your store.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Kicker</strong></td><td>Styled subheading text with size options</td></tr><tr><td><strong>Heading</strong></td><td>Styled heading with size options</td></tr><tr><td><strong>Text</strong></td><td>Standard body text with sizing</td></tr><tr><td><strong>Video popup</strong></td><td>Popup modal with support for YouTube and Vimeo videos</td></tr><tr><td><strong>Buttons</strong></td><td>Custom horizontal buttons with sizes and styles</td></tr><tr><td><strong>Spacer</strong></td><td>Add extra padding and line</td></tr></tbody></table>

### Video banner as an image banner

> *Tip*: The video banner can also be used as a regular image-style banner section

{% embed url="<https://www.loom.com/share/b8a552c0a35c4eeea4d22f2b8de77452?sid=f1ac7e59-29bc-496d-994f-8c123305edb0>" fullWidth="false" %}

> ***Tip:*** To fix the top gap when using a transparent header, adjust the Video banner section settings to `0px` for Padding top:

<figure><img src="/files/RCmO63l3NWIMVO1ofmvm" alt=""><figcaption></figcaption></figure>


# Theme settings


# Global theme settings

Configure Pipeline's site-wide settings and options under the Theme Settings

To customize the appearance of your online store, you can utilize the Theme settings. This feature allows you to modify the typography, colors, social media links, and checkout settings. Any changes you make in the Theme settings will be applied to your entire online store.

## How to

When in the Theme Editor, click on the settings icon to view all the various global settings in Pipeline:

<figure><img src="/files/XbZM7QqdzkRUipDVFaC3" alt=""><figcaption></figcaption></figure>

Take advantage of the various global settings and options to personalize your online store to your liking. These settings will aid you in accessing options available in Sections and Blocks, as well as other features in Pipeline.


# Color

Overview of color options under the Theme settings

You can customize all theme elements, including buttons, links, text, and more, using the color controls. By utilizing the color palettes, you have the option to select from a variety of colors and apply them as presets throughout the theme.

## Overview

<details>

<summary>Settings overview</summary>

* Color options for the Announcement bar
* Header colors
* Light, Dark, and Bright palettes (including Add to Cart button)
* Default colors for supplementary pages
* Footer color choices
* Sub-footer color choices
* Contrast adjustment

Tip: The Add to Cart button color can be changed by using the Primary accent color in each palette.&#x20;

</details>

Access the Color settings by opening the Color accordion under Theme Settings:

<figure><img src="/files/Ca0Esvd3FBgcPXx5ivVk" alt=""><figcaption></figcaption></figure>

## Choosing colors

Each grouping will have a set of color swatches and dynamic source icons:

<figure><img src="/files/zOFm8vJdco39yk5yCdo3" alt="" width="297"><figcaption></figcaption></figure>

#### Swatch

Clicking on a swatch (large color circle) will display a color picker where you can choose a color or enter a hex color code:

<figure><img src="/files/EFji02S1FoTvuempDlph" alt="" width="298"><figcaption></figcaption></figure>

#### Dynamic source

Optionally, you can preselect brand colors in the Shopify Admin settings and use the Dynamic source icon to select colors:

<figure><img src="/files/npbkXWSisdX8faefsc3Z" alt="" width="375"><figcaption></figcaption></figure>

#### Brand colors

To set up the brand colors, use the **Settings** option in the main **Shopify Admin**:&#x20;

<figure><img src="/files/cpEhzH4TOz6kxVCp7VhC" alt="" width="563"><figcaption></figcaption></figure>

## Announcement bar

Choose the background and text colors for the announcement bar.

## Header

Choose the background and text colors for the main header area.&#x20;

### Border color

The border color is used to build a separation between the header area and the page content. This is helpful for Pages and Blogs. Also if your homepage doesn't start with a banner style section:

<figure><img src="/files/q4ALEz5ZpGlRcq6fq8tN" alt="" width="563"><figcaption></figcaption></figure>

### Sale text

The sale text option is a color you can choose to highlight a navigation menu item:

<figure><img src="/files/EYO1vWFcW5NDukIMfVwu" alt="" width="563"><figcaption></figcaption></figure>

By default, if you have any menu item called "**Sale**", the chosen color option will be used. The menu item can be anywhere in your navigation:

<figure><img src="/files/SxWWMa2imfbLIaucvFWO" alt="" width="563"><figcaption></figcaption></figure>

#### How to change the Sale text to a different word

To change the trigger word from "**Sale**" to another name, you can choose "**Edit default theme content**" by selecting the three dots at the top:

<figure><img src="/files/FEJs3dEsKFUr68bjgmn1" alt="" width="563"><figcaption></figcaption></figure>

Then modify the value for **Highlight links** to a different menu item name:

<figure><img src="/files/h56CPS5H4PatpnAg3GQm" alt="" width="563"><figcaption></figcaption></figure>

> **Tip**: When searching for this value, type-in `highlight` all in lowercase letters to quickly find the right field. Using a capital letter may result with no values.&#x20;

## Color palettes (Light, Dark and Bright)

Sections, blocks, and other elements within Pipeline have various color options that you can easily modify. By providing multiple color palettes in the Theme Settings, Pipeline gives you the ability to select your brand colors for each of these palette styles. Palette styles are available throughout the theme.&#x20;

## Add to Cart Button

#### Primary accent color

A good example is using the primary accent color options for Light, Dark, and Bright. This setting lets you configure the primary call-to-action button colors for different styled pages.&#x20;

When using a light background page, you can adjust the **Primary accents** color setting under the **Light** palette:

<figure><img src="/files/QmzuDD0nFrVWRf8pe84b" alt="" width="563"><figcaption><p><strong>Add to Cart and Buy it Now buttons - Primary Accents</strong></p></figcaption></figure>

On a **dark** background, you can set a different color option for your Add to Cart and Buy It Now buttons by using the **Dark primary accents** selection:

<figure><img src="/files/UYIebODmbSYDl0upMp82" alt="" width="563"><figcaption><p><strong>Add to Cart and Buy it Now buttons - Dark Primary Accents</strong></p></figcaption></figure>

## Default colors

Used to set background colors for account pages, 404 pages, and other pages without settings. Choose a palette color option to configure these pages.&#x20;

## Footer and Sub-footer

Pipeline includes two footer sections to help promote key features in the main footer and secondary information in the sub-footer. Use the color options to add contrast or separation if desired:

<figure><img src="/files/WTDJiMTdwtBBYe96Eawz" alt=""><figcaption></figcaption></figure>

## Contrast adjustment

Use this checkbox to improve contrast when similar colors are used. Ideal for improving visual accessibility.&#x20;

## Learning videos

Learn more about Pipeline's Color settings with this learning course by Sunbowl Academy. Create a login and learn now:

{% embed url="<https://academy.sunbowlsystems.com/courses/take/learn-pipeline/lessons/40819574-color>" %}
**Direct link to Theme Settings - Colors**
{% endembed %}


# Typography

Overview of typography options under the Theme settings

With the Typography and Typography Advanced settings, you have the freedom to personalize the font styles, sizes, and letter casing for your entire store.

## Overview

<details>

<summary>Settings overview</summary>

* Font choices for Headings, Body text, and Accents

Typography Advanced settings include:

* Element preset choices
* Uppercase: Letter spacing, toggles for headings, body text, accent text, top navigation, buttons, and title kickers (sub-headings)
* Range sliders to control the size of headings, body font, and the accent font

</details>

Video overview of **Typography** options and **Typography Advanced** settings:&#x20;

{% embed url="<https://www.loom.com/share/0ff9e2bf7c8243d795cbf38a7ac3d01e?sid=aa9fe64f-e71e-4358-b8d3-805f3e8c71f5>" %}
**Video covering font options and Advanced settings**
{% endembed %}

Reference for font styles:

### Heading

<figure><img src="/files/5VxHgWd3ZcxtGvkoRf7c" alt=""><figcaption></figcaption></figure>

### Body

<figure><img src="/files/qyhha9hwDUPMlP1VScKA" alt=""><figcaption></figcaption></figure>

### Accent

<figure><img src="/files/JYKERfqZEUMBAupqGb9V" alt=""><figcaption></figcaption></figure>

### Learning videos

Learn more about Pipeline's Typography and Typography Advanced settings with this learning course by Sunbowl Academy. Create a login and learn now:

{% embed url="<https://academy.sunbowlsystems.com/courses/take/learn-pipeline/lessons/40819575-typography>" %}
**Direct link to Theme Settings - Typography**&#x20;
{% endembed %}


# Layout

Overview of layout options under the Theme settings

Within the theme, the layout settings offer the ability to adjust multiple layout aspects using various controls.

## Overview

<details>

<summary>Settings overview</summary>

* Page width
* Grid column spacing for sections with columns
* Page spacing
* Button radius
* Animations including text scrolling, hover animations, and parallax images

Tip: The parallax setting can help you reduce image cropping when combined with the Image height setting at the section level.&#x20;

</details>

Video overview of layout controls in the theme settings:

{% embed url="<https://www.loom.com/share/a72f07ff9a2943a8b9be627f5ff72382?sid=31ff2f9b-ba09-46ff-89cd-d024c6144dcf>" %}

{% hint style="info" %}
In the video, you'll learn how to achieve zero-cropping for your images.
{% endhint %}

<details>

<summary>Reference for reducing image cropping</summary>

* Set the section height to the "Image height" setting. &#x20;
* Turn off animations for Parallax images in the Layout settings.

</details>


# Search

Overview of search options under the Theme settings

To customize the search feature for your store, you can switch between a predictive search version which includes search suggestions, and a non-predictive version.&#x20;

## Overview

<details>

<summary>Settings overview</summary>

* Toggle predictive search feature

Tip: Using the Shopify Search and Discovery app, you can customize the predictive search results.&#x20;

</details>

Video covering both search options:

{% embed url="<https://www.loom.com/share/abb6da23d42f4d69bb6d3d2c186a40e7?sid=f57ab3ab-060c-4538-bde0-2f068764f629>" %}

### How to customize predictive search results

For custom search results, we recommend you use the official (free) Shopify app:&#x20;

{% embed url="<https://apps.shopify.com/search-and-discovery>" %}

Once you have the app installed, use the Search settings to build Product boots and Synonyms:

<figure><img src="/files/OfcfRCnflYFVP8ZBzu7v" alt=""><figcaption></figcaption></figure>

Using the app is simple, here is a video demonstrating how to build a sample Product boost and how to create a Synonym group:

### Video demonstrating Product boosts and Synonyms

{% embed url="<https://www.loom.com/share/4c72589fada6426ebec312a33506da17?sid=3a63f318-70fb-4a7e-b2de-303191dc0ba7>" %}


# Product card

Overview of the product card options under the Theme settings

Each item in a collection is represented by a product card. Pipeline offers a variety of options to customize the appearance and behavior of these cards.

## Overview

<details>

<summary>Settings overview</summary>

* Layout, text alignment
* Image slideshows (on hover)
* Image scaling, how images appear on the product grid, and managing how images are cropped and sized.&#x20;
* Swatches, toggles, and shape
* Quick view and Quick add features
* Siblings, toggle to display and toggle for the cutline
* Product badges, toggles, and configuration
* Color background and foreground for badges, Quick Add/View buttons, slideshow indicators
* Star ratings when using the Shopify Product Reviews app

</details>

Complete **video** overview of product card options and settings:&#x20;

{% embed url="<https://www.loom.com/share/615339301cb14bbe91c4e6cd054de3db?sid=a0649609-278f-4a5c-b4e4-137de787f414>" %}

### Product ratings

When you have the Shopify Product Reviews app installed, you can toggle to show the star rating and rating count:

#### Star rating checked:

<figure><img src="/files/R1lfb0NV1eWFyKq7zsV0" alt=""><figcaption></figcaption></figure>

#### Star rating and count both checked:

<figure><img src="/files/alUbty4twX4OroUnFy8d" alt=""><figcaption></figcaption></figure>

## Speed performance

When using Color Swatches or Siblings, products with a large number of swatches or siblings can degrade the Collection page loads. If your products have complex variants and colors, we recommend turning off the option to display swatches in the Product Card settings:

<figure><img src="/files/arJEESWQ9ugjIVr0nh3V" alt=""><figcaption></figcaption></figure>


# Product form

Overview of the product form options under the Theme settings

The Product form is the essential section of the Product page and Quickview drawer to help customers select options and add items to the cart. You can use these global settings to adjust certain elements. Other settings are found right on the main Product form in the Product templates.

## Overview

<details>

<summary>Settings overview</summary>

* Sale discount style, badge options to display percent off or dollar value
* For the variant option style, choose between buttons or dropdown

Tip: The sale badge will only appear when the Compare-at price is larger than the Price set in the product setup

</details>

Video of product form options:

{% embed url="<https://www.loom.com/share/19e68a5ee1d4428a88421ac4d00437b0?sid=63ceeaca-7908-438f-98d2-19ebd5754047>" %}

**Tip**: To display the Sale badge on a Product page, the Price block must be added:

<figure><img src="/files/nF62g8fWS6JbPGArND2T" alt=""><figcaption><p><strong>Price block has been added and is not hidden</strong></p></figcaption></figure>


# Cart

Overview of the cart options under the Theme settings

In the cart settings, you can manage how your cart is displayed, functions, and behaves with the help of various controls.

## Overview

<details>

<summary>Settings overview</summary>

* Cart styles and toggle options
* Empty cart link
* Free shipping message and customization
* Custom cart message
* Cart colors&#x20;
* Additional checkout buttons

</details>

Video walkthrough of all cart settings:

{% embed url="<https://www.loom.com/share/e3f08c18f9864dcb9ec61806d4ef93e4?sid=4c765c54-6d5f-4d16-a2d7-acfc05fce150>" %}

## Changes in the Cart settings

As of Pipeline 7.1, most of the Cart settings have **moved into the Cart page settings**:

<div data-full-width="true"><figure><img src="/files/Ajoxe4fyUULxXGGVEKgi" alt=""><figcaption></figcaption></figure></div>

### Updated settings

Settings available in the **Theme Settings -> Cart** now include:

<figure><img src="/files/Yp5NLHo7LNLA23k3ur2p" alt=""><figcaption></figcaption></figure>

* Cart type selector
* Free shipping threshold setting


# Social media

Overview of the social media options under the Theme settings

These settings allow you to manage which social media icons with links are displayed on your store.

## Overview

<details>

<summary>Settings overview</summary>

* Add links to popular social media sites, these will automatically generate an icon
* Add a custom icon and link

</details>

When you add the URL, include the full address including `https://` Pipeline will automatically add the social media icon. If a field is blank, no icon is displayed:

<figure><img src="/files/YJLa7WOV2vpJN3lQo2R8" alt=""><figcaption></figcaption></figure>

If you have a custom social media network icon you'd like to display, Pipeline provides you with three additional link and image options:

<figure><img src="/files/szlSBxqoIdqqWG9waMjI" alt=""><figcaption></figcaption></figure>

For custom icons, use a 100x100 PNG image with transparency.&#x20;


# Currency

Overview of the currency options under the Theme settings

With Pipeline, you can exhibit the conversion rates of various currencies to your customers. After setting up the currencies on your Shopify Admin, you can utilize the Currency settings in the Theme settings to customize the display preferences.

## Overview

<details>

<summary>Settings overview</summary>

* Choose to display the country name and currency code or currency code only
* Display currency code along with all prices

</details>

Video overview of currency display options:&#x20;

{% embed url="<https://www.loom.com/share/6aacc66d458c443c9fdb34ac803dc899?sid=106af539-0507-4134-ad37-4afa29e056fd>" %}

### Currency setup

To configure your store to use multiple currencies, use the Shopify Admin -> Settings -> Markets to set up which currencies your store will support. Conversions are done by Shopify and not the theme.&#x20;

<figure><img src="/files/fL36duhzxy6GsiVBfOmR" alt=""><figcaption><p><strong>Shopify Admin -> Settings</strong></p></figcaption></figure>

{% hint style="success" %}
Note: Only stores using **Shopify Payments** can make **Full** use of this feature.&#x20;
{% endhint %}

To learn more about currency markets, Shopify provides an article on their support site about their Markets feature:

{% embed url="<https://help.shopify.com/en/manual/markets/>" %}
Link to Shopify Support
{% endembed %}


# Favicon

Overview of the favicon option under the Theme settings

To personalize the appearance of your desktop browser tabs, you have the option to upload an icon image that will be displayed as an icon.

## Overview

<details>

<summary>Settings overview</summary>

* Choose a PNG image from the Files library to represent your shop's favicon

Tip: Modern desktops and mobile devices and use the same image as a desktop or dock icon.&#x20;

</details>

### Step 1

The first step is to create a square PNG image with your brand logo. The size can be 512x512, 192x192, or even as small as 32x32. A larger size like 512x512 will display better on phones and desktops.&#x20;

### Step 2

Upload the PNG image to your Shopify Files library:

<figure><img src="/files/amapUOmGj3u2VM2e5ghN" alt=""><figcaption></figcaption></figure>

### Step 3

In the Theme Editor -> Theme settings -> Favicon, choose the image:

<figure><img src="/files/8TqzUTTCpfmLdYkWsm0q" alt=""><figcaption></figcaption></figure>

**Save** your settings to complete. &#x20;


# Advanced

Overview of the advanced options under the Theme settings

Within the advanced settings, it is possible to personalize which collections will remain hidden from the search function.

## Overview

<details>

<summary>Settings overview</summary>

* Collections to exclude from the search
* Wildcard exclusions&#x20;

</details>

### Exclude collections

Enter the collection handle of a collection you wish to exclude from searches. These can be special collections created for demonstration, wholesale, etc.&#x20;

The collection handle is found in the Search engine listing section of the Collection (bottom) set up in the Shopify admin:

<figure><img src="/files/0NjFSdmyfOI6tB8E8nSo" alt="" width="563"><figcaption></figcaption></figure>

You can exclude multiple collections, and separate each one by a comma and space:

<figure><img src="/files/9P0CeUrcFH4M9VOoc1b3" alt=""><figcaption></figcaption></figure>

### Exclude collections if they contain

Wildcard exclusion. Use this for autogenerated collections, Siblings, etc.&#x20;

This setting also uses the collection handle. However, only a portion of the handle. For example, if your sibling collections all begin with `sibling--` followed by unique names, then you can add `sibling--` or even `sibling` here.&#x20;


# Checkout

Overview of the checkout options under the Theme settings

When it comes to customizing the Checkout stage, Shopify only offers a few basic branding features. This is because Shopify places strict limitations on the level of customization that can be done in order to ensure a secure, private, reliable, and high-performance shopping experience for all customers on the platform.

Pipeline includes the settings that are available to you by Shopify to brand and customize the look of the Checkout page.&#x20;

## Overview

<details>

<summary>Settings overview</summary>

* Add a branded hero banner
* Add and position a company logo
* Choose a background image or color setting for the Main content area
* Choose a background image or color setting for the Order entry area
* Configure font choices for Headings and Body text
* Set up colors for Accents (links, highlights, checkmarks), Buttons, and Error messages

</details>

Customers using Shopify Plus have access to advanced tools for modifying the checkout process, whereas other plans have certain limitations.

### Available customizations:

* A custom banner image at the top of the Checkout page.
* Brand logo, with position and size options:

<figure><img src="/files/3ogNzaItdKpF8Ps9FIQX" alt=""><figcaption><p><strong>Checkout banner area</strong></p></figcaption></figure>

* Main content area background image or
* Background color:

<figure><img src="/files/kyStHEE5TeFYxcUGySx1" alt=""><figcaption><p><strong>Main content area</strong></p></figcaption></figure>

* Order summary background image or
* Background color:

<figure><img src="/files/G8c3ZjVzwVcU98Uewh9c" alt=""><figcaption><p><strong>Order summary area</strong></p></figcaption></figure>

* Font selection for headings in the Checkout,
* Font selection for the body text:

<figure><img src="/files/WWbbGiGgO8BH4S4piY25" alt=""><figcaption><p><strong>Checkout typeography</strong></p></figcaption></figure>

{% hint style="info" %}
Font options are limited to Shopify's set font library for checkout. There is no option to upload your own checkout fonts.&#x20;
{% endhint %}

* Color setting for Accents (links, highlights, and checkmarks)
* Buttons
* Error messages

<figure><img src="/files/NicWJxAr6OgOVn1OidTz" alt=""><figcaption><p><strong>Color settings</strong></p></figcaption></figure>


# Custom CSS

Overview of Custom CSS usage in the Theme settings

Easily customize your store's overall appearance by utilizing the Custom CSS entry form. By adding valid CSS entries, you can successfully modify the default styles of your chosen theme.

## Overview

<details>

<summary>Settings overview</summary>

* Global CSS entries without editing code

</details>

Example of a CSS entry made in the Theme settings:

<figure><img src="/files/Fa8YKjMRSau0AfmHY9Md" alt=""><figcaption><p><strong>Color override for grid text</strong></p></figcaption></figure>

{% hint style="info" %}
Please note, this is different from the section-level options.
{% endhint %}

If you need to target CSS for individual sections only, use the entry form that's included at the section level.&#x20;

### Video - How to use Custom CSS&#x20;

{% embed url="<https://www.loom.com/share/c6d9650fbed345179b5582af8db67bcb?sid=616a39f1-128d-43e0-bb04-63bfc7afbae6>" %}

### Learn more about Custom CSS

Click the link below to view Shopify's official documentation about customer CSS:

{% embed url="<https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css>" %}


# Theme style

Overview of Theme style preset options under the Theme settings

Pipeline provides four preset options that serve as a starting point for users to try out and unleash their creativity. These choices come with preselected color schemes, font styles, spacing, and other features. You can experiment with these styles without affecting any of your theme's content, making them useful when setting up your store for the first time.

## Overview

<details>

<summary>Settings overview</summary>

* Choose a preset theme style to apply sitewide.&#x20;

Tip: Presets will not affect your content, only theme design elements

</details>

Video walkthrough for Theme style presets:&#x20;

{% embed url="<https://www.loom.com/share/459eaab59235467890d9ab0bf5e196ac?sid=5f48bd66-2286-43bc-95ef-f421f767b16c>" %}

{% hint style="info" %}
Remember to save any settings you've already made before choosing a preset. Certain elements like colors and theme settings will be replaced when using a preset. None of your content will be changed.&#x20;
{% endhint %}


# Announcement bar


# Settings and colors

Announcement bar settings and layout options

View how to customize the general settings and colors for the announcement bar in Pipeline:

{% embed url="<https://www.loom.com/share/5942a0466798477193565db22df6c6f9?sid=cf2efa07-f39a-43ce-a7d3-23766475e5f5>" fullWidth="true" %}

### General settings

Text size controls how large the text is within the announcement bar.&#x20;

#### Layout

Choose between the animation styles for the announcement bar.&#x20;

#### Slider

Slider fades the current message out and fades in a new message when multiple messages are enabled. The Autoplay speed setting determines when messages rotate.

#### Marquee

Marquee option will auto-scroll messages across the browser or device width.

![](/files/-MicYgIb9iRIMba-sszA)

#### Section spacing

Provides padding to the top and bottom of the announcement bar. This helps you make the bar larger in size or tighter.&#x20;


# Free shipping message

Dynamic message to encourage increased items per transaction

### Spend value, how close to free shipping

Automatic spend value is updated in the announcement bar to help your customers know how close they are to free shipping. The spend value changes as items are added to the cart:

![Amount left to spend for free shipping](/files/-MibxOh472QmJIhDllXn)

![Congratulations message when reached](/files/-MibxUYXIvkve74RUD2i)

{% hint style="success" %}
Use to encourage add-on sales and increased quantities&#x20;
{% endhint %}

## How to setup

**Add** or **Show** the Free shipping message block under the Announcement bar. Use the **Expand icon** on the left of the Announcement bar to open the blocks:

![Use the eye icon to show or hide message](/files/-MicLD5GrHskxKqm9QdE)

Modify the message text as needed. Keep the `|| amount ||` custom short-code to reference your set value from the Cart settings.

```
Spend ||amount|| more for free shipping.
```

To adjust the free shipping value, navigate to **Theme settings** and then choose **Cart**:

![Minimum spend for free shipping](/files/-Mibzw9-a8Surt8kseWC)

### Target Page

Display free shipping messages to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site. Target your message based on where customers are browsing your site:

![](/files/-MicP7w0RfV0vMcmJAXW)

{% hint style="success" %}
Create different announcement bars with custom messages for various pages of your site.
{% endhint %}

### Target Referrer

![](/files/-MicPExlC-o5dkMHUrVv)

Target a specific audience by using Target Referrer. Your announcement bar will only appear when the customer arrives at your site from a certain path or location.&#x20;

{% hint style="success" %}
Enable when running a promotion on another site.
{% endhint %}

{% hint style="success" %}
Use to provide a custom message related to the source promotion
{% endhint %}

### Target Device

Target only certain devices or create a custom announcement bar message for mobile devices and another for desktop browsers.

![](/files/-MicPI07LqNHPKJ5R2Mf)

{% hint style="success" %}
Enable to display custom announcement messages for mobile and desktop.
{% endhint %}


# Text announcement

Flexible announcement message bar with targeting options

Add single or multiple text announcement bars with links to promote your offers:

![](/files/-MiccDuzmZ7bMzxfngqV)

### Target Page

Display custom announcement messages to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site. Target your message based on where customers are browsing on your site:

{% hint style="success" %}
Create different announcement bars with custom messages for various pages of your site.
{% endhint %}

### Target Referrer

Target a specific audience by using Target Referrer. Your announcement bar will only appear when the customer arrives at your site from a certain path or location.&#x20;

{% hint style="success" %}
Enable when running a promotion on another site.
{% endhint %}

{% hint style="success" %}
Use to provide a custom message related to the source promotion
{% endhint %}

### Target Device

Target only certain devices or create a custom announcement bar message for mobile devices and another for desktop browsers.

{% hint style="success" %}
Enable to display custom announcement messages for mobile and desktop.
{% endhint %}


# Icon column

Announcement messages that standout with a range of icons or any image with targeting options

> Feature added in Pipeline 6.1

Add an icon or custom image to your announcement bars and include links to promote your offers:

![Icons animate in on first appearance](/files/-Mico8jIgLQuduwgPGOl)

### Icon options

Choose from a selection of icon options:

![](/files/-MicpX9rpNKIrN_bRj1r)

Use the color setting to add color and contrast to your message.

### Custom image

Add an image or logo from your Shopify image library to customize the look:

![Alternative image width slider can modify the image width inside the bar.](/files/-MicqTuD1wxogePV63a4)

### Target Page

Display custom announcement messages to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site. Target your message based on where customers are browsing on your site:

{% hint style="success" %}
Create different announcement bars with custom messages and icons for various pages of your site.
{% endhint %}

### Target Referrer

Target a specific audience by using Target Referrer. Your announcement bar will only appear when the customer arrives at your site from a certain path or location.&#x20;

{% hint style="success" %}
Enable when running a promotion on another site.
{% endhint %}

{% hint style="success" %}
Use to provide a custom message related to the source promotion
{% endhint %}

### Target Device

Target only certain devices or create a custom announcement bar message for mobile devices and another for desktop browsers. Use custom icons or images for different devices.

{% hint style="success" %}
Enable to display custom announcement messages for mobile and desktop
{% endhint %}


# Custom HTML

Use HTML to build custom announcement messages with targeting options

> Feature added in Pipeline 6.1

Build custom announcement messages and use targeting options to provide complete customization for your promotions.

![](/files/-MicfqMUGwe-nCWeiti_)

### Target Page

Display custom announcement messages to your customers only when the customer is browsing a certain page, product, collection, or blog post on your site. Target your message based on where customers are browsing on your site:

{% hint style="success" %}
Create different announcement bars with custom messages for various pages of your site.
{% endhint %}

### Target Referrer

Target a specific audience by using Target Referrer. Your announcement bar will only appear when the customer arrives at your site from a certain path or location.&#x20;

{% hint style="success" %}
Enable when running a promotion on another site.
{% endhint %}

{% hint style="success" %}
Use to provide a custom message related to the source promotion
{% endhint %}

### Target Device

Target only certain devices or create a custom announcement bar message for mobile devices and another for desktop browsers.

{% hint style="success" %}
Enable to display custom announcement messages for mobile and desktop.
{% endhint %}


# Header


# Header styles

Pipeline includes several header styles and configuration options

Flexible layout options allow you to easily configure your brand logo, menu items, and links.

<div data-full-width="false"><figure><img src="/files/oQgv4UKCdbpHrWl3MUmn" alt=""><figcaption><p><strong>Preset - Menu | Logo | Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/HCJPQoptHdcu2UaDj7Ls" alt=""><figcaption><p><strong>Preset - Logo | Menu | Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/2ejY4ADO3K3HdGMuqy8N" alt=""><figcaption><p><strong>Preset - Logo | Spacer | Menu + Cart</strong></p></figcaption></figure></div>

<div data-full-width="false"><figure><img src="/files/L8grLUPDLsLNFKED4N4w" alt=""><figcaption><p><strong>Preset - Mobile drawer menu</strong></p></figcaption></figure></div>

## Menu | Logo | Cart

This style places the brand logo in the middle with navigation on the left and account, search, and cart on the right:

<div data-full-width="false"><figure><img src="/files/7dJkHtgicykQKAAxUSbk" alt=""><figcaption></figcaption></figure></div>

***

## Logo | Menu | Cart

This style places the brand logo to the left with the navigation in the center. Account, search, and cart icons are placed to the right of the navigation:

![](/files/ALrbNoPchPNGW9udXkWj)

***

## Logo | Spacer | Menu + Cart

This style places the brand logo to the left, and adds spacing to push the navigation on the right next to the cart:

<figure><img src="/files/sL62J1V02qSrFEFoGBHW" alt=""><figcaption></figcaption></figure>

***

## Mobile drawer menu

This style adopts the mobile design pattern used on all mobile devices. This style is the cleanest option, hiding the navigation into a mobile-style drawer and keeping consistency between mobile and desktop:

![Navigation slides out when opened ](/files/-MibPDJ_k7pIzvzyD848)

## How to

Choose a layout option from the Header style drop-down:

![](/files/-MibIzUq9_Tch6v1ZXTb)

Customize the style using search and icon checkbox options:

![Cart, Search and Account can be displayed as icons](/files/-MibJ67HDgGkqKoBYQHV)

## Toubleshooting large menus showing mobile mode

Certain conditions can lead to the mobile menu showing instead of the desktop menu. \
1\) Too many items in the menu will force the mobile menu to show. This depends on the size of the screen and the number of menu items. It would also include the length of the menu items. Viewing the theme inside the theme editor can also result in this issue since the theme editor sidebars reduce the page width. Reducing the text length or the number of top-level menu items can help. \
2\) Another issue may be the type of device. If the device is a touch device - then we may show the mobile menu. The mobile menu is more suitable for touch devices. For example, using a 2 in 1 device can lead to this issue even in desktop mode

## Examples

Additional examples combining layout and icons or text:

<div data-full-width="true"><img src="/files/-MibQXWPnE8-P6Ti0-e5" alt="Menu | Logo | Cart, using icons option"></div>

<div data-full-width="true"><img src="/files/-Me76YUVWfaQ1WrBLuKN" alt="Logo | Spacer | Menu + Cart"></div>


# Icon styles

Introduced in Pipeline 7.2 are new header icon options

Pipeline includes a wide range of modern and classic icon styles for the header.&#x20;

## Video overview of icon styles

{% embed url="<https://www.loom.com/share/30b53820dbc348c58d538f4f33168425?sid=f1eba187-ef49-46d2-87c6-44ce855368e5>" %}

## Reference from video

Examples of modern and classic icon styles in Pipeline. Click on any image to view a larger version.&#x20;

### Modern Basket

<figure><img src="/files/unF2KPgbthUZwf34ogHT" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ZHKho9EAEQMxqi2z0TcE" alt=""><figcaption></figcaption></figure>

### Modern Bag

<figure><img src="/files/TyJwl80CWkAnPmruWWDk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2Fg1kZQiiPpghvO11uwb" alt=""><figcaption></figcaption></figure>

### Modern Cart

<figure><img src="/files/u0O7T8O3j22TRJgXaP5e" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/rLd7EMjbYwKCMBGpGQyd" alt=""><figcaption></figcaption></figure>

### Classic Basket

<figure><img src="/files/gm9ajfOikLvGcojR2Nm3" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6QF4gV95jBAanlM9WUb6" alt=""><figcaption></figcaption></figure>

### Classic Bag

<figure><img src="/files/PI95wPcnKArf57Ni1IJs" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CrD6MbRayIlFhy2bbJN1" alt=""><figcaption></figcaption></figure>

### Classic Cart

<figure><img src="/files/bkwW6jdqQPe3W7ffeH4a" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/hAhawd9OYZ6NJan7WGoA" alt=""><figcaption></figcaption></figure>


# Toolbar

Slimline addition to the header with plenty of extras to include

Adding the toolbar block to the header section provides you with additional content you can display right above the header area:

<div data-full-width="true"><figure><img src="/files/bzyTO8T3kXK5H5wnEQ0e" alt=""><figcaption></figcaption></figure></div>

The block settings for the Toolbar include tools you can active and customize:

### Announcement text

<div data-full-width="false"><figure><img src="/files/PaiOftXDQKH8pjhk2uM2" alt=""><figcaption></figcaption></figure></div>

### Secondary menu

<div data-full-width="false"><figure><img src="/files/7JZ0Z2Iut2xTR5D0tBn4" alt=""><figcaption></figcaption></figure></div>

Choose to display the secondary menu on desktop and mobile with the toggle checkboxes.

### Language selector

Stores that have set up multiple languages can display a dropdown menu for customers to choose a support language.&#x20;

Use the Settings in your Shopify Admin to configure Languages:

<figure><img src="/files/P8EF5aXkznosvxvjnv61" alt=""><figcaption></figcaption></figure>

### Currency Selector by Country / Region

<div data-full-width="false"><figure><img src="/files/tClUAXVFgEWjYgPb2i1w" alt=""><figcaption></figcaption></figure></div>

Stores using Shopify Payments can display a dropdown for the currencies that have been set up under Markets.&#x20;

Learn more about currency setup in Pipeline:

{% content-ref url="/pages/nrMrHgFUoZHewh6YDGWY" %}
[Currency](/settings/theme-settings/currency)
{% endcontent-ref %}


# Navigation images

Enhance your navigation menu with images, products and collections

With Pipeline, incorporating images into your Navigation is a breeze. You have the option to create a drop-down menu with images only or a mix of menu items and images.

Customers will be able to find your featured products faster and easier with these promotions:

<div data-full-width="false"><img src="/files/FhDisF6DvTP7PQzLlIc4" alt="Collection products in navigation"></div>

Images, products, and collections are added as blocks to the Header. Choose which menu item numerically and add content.&#x20;

### Blocks

Add from a range of block styles with various options to customize your navigation:

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Add any image from your library with an optional heading, button and link</td></tr><tr><td><strong>Product</strong></td><td>Select a particular product to display with instant Add to Cart functionality</td></tr><tr><td><strong>Collection</strong></td><td>Add a group of products instantly to the header navigation</td></tr></tbody></table>

### Video

A complete overview of how to add, position, and customize header blocks in Pipeline:

{% embed url="<https://www.loom.com/share/273bc913041a4e25964f1ec9818f0f4d?sid=22545dcd-cc57-4813-bdcc-ff6b38e993db>" fullWidth="true" %}


# Collection block

Add products from a collection directly into your navigation

Instantly add products from a collection to your mega-menu or drop-down menu.

#### Mega-menu example

<figure><img src="/files/W0fF24opZ7GTpkrLWMeH" alt=""><figcaption><p><strong>Collection products added below</strong></p></figcaption></figure>

#### Drop-down menu example

<figure><img src="/files/nVkRN9sC496yfUkDTKZG" alt=""><figcaption><p><strong>Collection images added next to menu items. Quick add and Siblings shown</strong></p></figcaption></figure>

Customers can take advantage of the Quick Add and Siblings features when products are listed from a Collection in the navigation.&#x20;

> *Tip*: Sort the collection in the Shopify admin -> Products -> Collection to display the correct order in the header. You can also create a custom collection just for displaying certain products and order in the navigation

### How to

After adding the Collection block, you will need to link it to a menu item in your navigation. Here are details on how to link to the right position:

{% content-ref url="/pages/IyuarbRPaBanyFapxN2t" %}
[Linking to menu items](/header/header/linking-to-menu-items)
{% endcontent-ref %}


# Linking to menu items

Map rich header blocks to your navigation

When using the Image, Product, and Collection blocks in the header, you'll need to map these blocks to a menu item in your navigation.&#x20;

Here are some tips on how to choose the correct position for these blocks.&#x20;

### How to

Each of these blocks will have an option for "Link position in main menu". Use the dropdown to choose from the list.

* Your first top-level menu is equal to **Item 1**, our example "Shop"
* The second top-level menu is equal to **Item 2**, our example "Lookbooks"
* The third top-level menu is equal to **Item 3** (and so forth), our example "Contact"

This collection is mapped to "Item 2" which is the second menu item, "Lookbooks":

<figure><img src="/files/NYkmHCaJge3xxF07DTjM" alt=""><figcaption></figcaption></figure>

Once you have mapped to a menu item, the block will display that content (Image, Product, or Collection) in the drop-down or mega-menu that you've chosen.&#x20;

### Additional examples:

Item 1

![Example of Item 1 in navigation.](/files/-MKaoTVh_MZo5h30eQoI)

Item 2

![Example of Item 2 in navigation](/files/-MKaryOQ6LL4Sie5DWvq)

### Video

Overview of adding header blocks and mapping to menu items:

{% embed url="<https://www.loom.com/share/273bc913041a4e25964f1ec9818f0f4d?sid=a42eaa1e-941b-4ba6-8887-86d42f316922>" fullWidth="true" %}


# Transparent header

Bring attention to your media

Extend your hero banner or video banner right into the header area. Adding transparency to the header can give you a more sleek appearance and enhances the visual appeal of your store. Also bringing more attention to your brand and products:

<figure><img src="/files/HCJPQoptHdcu2UaDj7Ls" alt=""><figcaption></figcaption></figure>

When you activate transparency along with the sticky header feature in Pipeline, a frosted header background effect is applied:

<div data-full-width="false"><figure><img src="/files/uJh7t8f3NJGxzSm4Kef6" alt=""><figcaption></figcaption></figure></div>

## Transparent header logo

In the above example, a white logo is added to the Header settings under "Transparent header logo". The regular logo for the header is the dark logo. The dark logo is used on all regular pages (unless you choose to use transparency on pages outside of the homepage).&#x20;

Example of a regular Product page:

<figure><img src="/files/soLpZ48wcEtR73cG2N7L" alt=""><figcaption><p><strong>Uses the regular Header dark logo</strong></p></figcaption></figure>

Transparency can be activated on select page styles, this can work well if you used banners on all of those page types:

<figure><img src="/files/RRwBX6wRLQBlIcFyyaZn" alt=""><figcaption><p><strong>White logo is used on pages with transparency</strong></p></figcaption></figure>

## Fix top gap when using a transparent header

When using an Image banner, Slideshow, Video banner, or similar section as your first section. You might notice a gap or padding at the top that affects the transparent header:

<figure><img src="/files/gqVPo3HZ6xDZt084S19Q" alt=""><figcaption></figcaption></figure>

Simply, adjust the top padding on the section settings for your Image banner, slideshow, video banner, or other section:

<figure><img src="/files/qZXlXXqaPixY9Zt1SOX5" alt=""><figcaption></figcaption></figure>


# Sticky header

Allow quick access to navigation at all times

Using a sticky header on your store offers several advantages that can enhance the user experience, improve navigation, and potentially increase conversions. A sticky header refers to a navigation menu or header that remains fixed at the top of the webpage even as the user scrolls down:

![Choose from different scroll behavior options](/files/uJh7t8f3NJGxzSm4Kef6)

### Benefits

Some of the benefits of using a sticky header include:

* **Improved navigation**: A sticky header ensures that the primary navigation menu is always accessible and visible to users, regardless of where they are on the page. This makes it easier for visitors to find essential links, product categories, and other important information, reducing the chances of them getting lost or frustrated.
* **Enhanced user experience**: Users can quickly access various parts of your website without having to scroll back up to the top. It streamlines the navigation process and provides a smoother browsing experience, which can lead to increased user satisfaction.
* **Space optimization**: Shopify store themes often have limited space, especially on mobile devices. A sticky header allows you to use the available space more efficiently by stacking the header elements neatly. This is particularly valuable on mobile, where screen real estate is limited.
* **Easy access to Search and the Cart**: Users can quickly search for products or click on the cart icon to bring up the Card drawer or page.&#x20;

### Sticky header scroll behavior

Pipeline includes these options in the header settings:

1. Default - No sticky header
2. Sticky header - Sticky on down scroll and on up scroll
3. Sticky header only on scroll up - Sticky behavior occurs only as the customer starts to scroll upwards on the page.


# Highlight sale menu

Pipeline includes a feature to highlight a menu item in your header navigation

Highlighting a Sale menu item in your Shopify store can offer several advantages that can enhance the shopping experience for your customers and potentially boost sales.

With Pipeline, you can choose a color from the Theme Settings to highlight specific menu items like the Sale menu item:

<div data-full-width="true"><img src="/files/kqqjJUJW6UQhauV0PE9s" alt=""></div>

### How to setup

Use the Sale text color option in the Theme settings -> Color to configure the color to use:

<figure><img src="/files/EYO1vWFcW5NDukIMfVwu" alt=""><figcaption></figcaption></figure>

> *Tip*: the Sale menu item can be anywhere in your navigation:

<figure><img src="/files/SxWWMa2imfbLIaucvFWO" alt=""><figcaption></figcaption></figure>

### Different menu item names

To change the trigger word from "**Sale**" to another name, you can choose "**Edit default theme content**" by selecting the three dots at the top:

<figure><img src="/files/FEJs3dEsKFUr68bjgmn1" alt=""><figcaption></figcaption></figure>

Then modify the value for **Highlight links** to a different menu item name:

<figure><img src="/files/h56CPS5H4PatpnAg3GQm" alt=""><figcaption></figcaption></figure>

> **Tip**: When searching for this value, type-in `highlight` all in lowercase letters to quickly find the right field. Using a capital letter may result with no values.

Multiple links can be added, separate with a comma:

![](/files/mZTmu9EUiywl3b5RX0Al)


# Collection images

Show collection images when using a mega-menu

Populate your mega-menu with the corresponding image from a collection. Pipeline offers another method and design for adding images to your navigation:

<figure><img src="/files/s9yPzfL3QGWnmvejMlmH" alt=""><figcaption></figcaption></figure>

If your mega-menu has a Collection as a top-level menu item. You can pull the Collection image directly from the Collection into the navigation.&#x20;

## How to

### Step 1

The first step is to ensure you have a Collection image chosen and set in your Collection setup:

<figure><img src="/files/feiHzT7FtC0F7RREtC6D" alt=""><figcaption></figcaption></figure>

### Step 2

Next, ensure you have the same Collection as a top-level menu item in your mega-menu under Navigation.&#x20;

<figure><img src="/files/xSU5ednB8pdG5yTbPRXg" alt=""><figcaption></figcaption></figure>

***Tip:*** When building a mega-menu, the very top menu item, "Shop" is Level 1. Nested inside "Shop" are Level 2 menu items, "Bottoms", "Sweaters" and "Tops". These will be the columns in your mega-menu. Under each of these are additional menu items which are Level 3

<div><figure><img src="/files/Op0ZN5jOlzemAFA3kOF4" alt=""><figcaption></figcaption></figure> <figure><img src="/files/W2Tuk3xVuLEHN4I9So8c" alt=""><figcaption></figcaption></figure></div>

### Step 3

In the Header section settings, check the option to use Collection images:

<figure><img src="/files/yDPcXfOgKpf6zzle0Rt2" alt=""><figcaption></figcaption></figure>

Adjust the Collection image height slider to best fit the style of Collection images you have.&#x20;


# Pipeline footer


# Footer

Build a rich beautiful footer for your store

Design a beautiful footer to match your brand and provide key information for your visitors. With Pipeline's footer blocks, you can easily create and organize content in the footer area:

<div data-full-width="true"><figure><img src="/files/TPRKA0oRqe3Y6CC0gZaD" alt=""><figcaption></figcaption></figure></div>

### Blocks

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Link list</strong></td><td>Add a menu from your Shopify Navigation setup</td></tr><tr><td><strong>Newsletter</strong></td><td>Build a rich newsletter form for customers to signup to Marketing emails</td></tr><tr><td><strong>Text</strong></td><td>Add text content in column</td></tr><tr><td><strong>Image</strong></td><td>Addition image that can be placed in the menu columns</td></tr><tr><td><strong>Page</strong></td><td>Add content from an already created Shopify Page</td></tr></tbody></table>

### How to use

We cover customization options and settings in this video walk-through:&#x20;

{% embed url="<https://www.loom.com/share/4a8c401ead2c4385bffe40ab00e002c3?sid=bf561d7e-cdfb-4154-aea3-6e06c7edc905>" fullWidth="true" %}


# Subfooter

Add additional elements below your footer

The subfooter is a space where you can add supplementary or secondary information for your customers to access while keeping the regular footer less cluttered and better organized.&#x20;

<figure><img src="/files/kS90JgKPtT6CIQ9NxUBi" alt=""><figcaption></figcaption></figure>

### How to use

We cover the subfooter settings and options in this video walkthrough:&#x20;

{% embed url="<https://www.loom.com/share/e0544c5a83a440f486d3a97877062890?sid=f38385e3-67e1-4990-b133-ad13463b9629>" fullWidth="true" %}


# Product pages


# Pre-orders

Replace the add-to-cart button with a pre-order button using metafields

Pipeline can display a "Pre-order" button on any of your products without having to create a custom product template. We use a metafield that you can define easily and then start using the feature. Simply toggle on/off any product that needs to display the "Pre-order" button.&#x20;

On the main product page, the Add to Cart button is replaced with a Pre-order button:

<figure><img src="/files/1grvKrStBKoaRBHiHHdJ" alt=""><figcaption></figcaption></figure>

## How to

There are a few basic steps to set up and start using the pre-order feature. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings, **define a product metafield**. The Content type is **True or false**.&#x20;
2. In the Product Setup, **toggle the setting to true** for any product you wish to display the "Preorder" button.&#x20;
3. Under Shopify Admin -> Payments, ensure your store can Manually capture payment
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="/files/s6Zbe0qqCPEEH00MUDWg" alt=""><figcaption></figcaption></figure>

* Use the "**Add definition**" button to create a new product definition
* For the Name, use "preorder" or "Preorder" (no hyphen/dash)
* Change the Namespace and key from `custom.preorder` to **`theme.preorder`** (important):

<figure><img src="/files/11wAxXsZA76lbXOydXc4" alt=""><figcaption></figcaption></figure>

* Verify that you've changed to **`theme.preorder`**
* Add an optional description
* Click on **Select type**, type in "true", and then choose "**True or false**":

<figure><img src="/files/zvZe38vEC6WjoILXsFGI" alt=""><figcaption></figcaption></figure>

* Verify that your settings look like the following:

<div data-full-width="true"><figure><img src="/files/g5FIIZh5WQmi0BXcds1W" alt=""><figcaption></figcaption></figure></div>

* Use the **Save** button to complete.&#x20;

### Step 2

Now your can toggle on/off the setting on any of your products (the fun part).

* Under the **Shopify Admin -> Products**, choose a product. &#x20;
* Scroll to the bottom of the product setup, and to the Metafields section, here you'll find the new Preorder field.
* Toggle **On** to make that product display a "Pre-order" button on the product detail page.&#x20;

<figure><img src="/files/DaeFD02K2AZFRrT1mcwf" alt=""><figcaption></figcaption></figure>

### Step 3

Shopify recommends that you manually capture payments if selling products that are not ready to ship. Contact Shopify Support for any assistance with your Payments setup. Here is a support article from Shopify:

{% embed url="<https://help.shopify.com/en/manual/orders/get-paid>" %}

## Bonus setup

You can add a custom product badge called "Pre-Order" to display on your collection pages or any section that used the Product Card:

<figure><img src="/files/5ajsjyAdshUH9MPyfiM7" alt=""><figcaption></figcaption></figure>

Follow our instructions on how to create a custom badge in Pipeline to easily add this feature:

{% content-ref url="/pages/-MddpQI7VSO2H5hYrfYq" %}
[Badges / Stickers](/collections/collection-pages/custom-badges)
{% endcontent-ref %}


# Breadcrumbs

Create custom breadcrumbs in Pipeline for individual products

With Pipeline, you can create and display custom product breadcrumbs for every product you offer. This feature enables shoppers to easily navigate back to a specific collection that you have configured.

<div data-full-width="true"><figure><img src="/files/KyJklUHvS3tdevTuicae" alt=""><figcaption></figcaption></figure></div>

### Advantages

Using a custom breadcrumb helps resolve issues:

* Subcollections
* SEO links for when products are linked from both /products/ and /collection/&#x20;
* Home breadcrumbs

## How to create

> Custom breadcrumbs with metafields support added in **Pipeline 7.1**

A few basic steps exist to set up and start using custom breadcrumbs. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings -> Custom data, define a **product metafield**. The Content type is Collection, List of collections (easy step).&#x20;
2. In the Product Setup, **choose a collection from a list** for any of your products that will be displaying a product breadcrumb.&#x20;
3. In the Theme Editor, ensure that the option to **Show breadcrumbs** is checked and the dynamic data source is linked.&#x20;
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="/files/s6Zbe0qqCPEEH00MUDWg" alt=""><figcaption></figcaption></figure>

* Use the "**Add definition**" button to create a new product definition
* For the Name, use any name you like. We will use "Breadcrumbs" in our example.&#x20;
* Click on the Select type button and type in "Collection", then select **Collection**:&#x20;

<figure><img src="/files/CosvcqWteGG71RLLTixF" alt=""><figcaption></figcaption></figure>

* Choose **List of collections** (important):

<figure><img src="/files/pK7g0ntLODN9zuNOi40U" alt=""><figcaption></figcaption></figure>

* Press the **Save** button to complete

### Step 2

After creating the Breadcrumbs metafield, we can now choose from a list of collections in our Shopify Admin -> Products, then pick a product to configure the custom breadcrumb:

{% embed url="<https://www.loom.com/share/dd9b6888c6d6485ea6b95414995fa027?sid=3d96397b-6312-4d7b-8864-cb299f0d6cfa>" fullWidth="true" %}

### Step3

In the Theme Editor, we can activate Breadcrumbs and link to our metafield:

{% embed url="<https://www.loom.com/share/94c3a77be9b146e391f5c2bff089c483?sid=99298aac-aec5-4fe9-82c2-08ad972e9d42>" fullWidth="true" %}

> ***Tip:*** Products without a metafiled value in the Product set up, won't display a breadcrumb.&#x20;

## Basic version

If your store only requires one source collection, you can use the basic setup.

### How to

In the Theme Editor under the default Product template, you can simply choose **one** collection from the list of collections and that will display on all your products. No metafield setup is required.&#x20;

<figure><img src="/files/ZJMh2rpwPWc6zlbrAqlg" alt=""><figcaption></figcaption></figure>

The chosen collection will appear on **All** your product pages.&#x20;

* You can create multiple product templates to only show with certain products.&#x20;
* Toggle on and off with the **Show breadcrumbs** checkbox.&#x20;


# Tabs and accordions

Organize your product description with easy to use tabs and accordions

With Pipeline, you can display your product description in either a tabbed or accordion format. Enhance customer confidence in your products and brand by adding supplementary content to your product pages.

<figure><img src="/files/mUI6h6D8A0913YX4lSH6" alt=""><figcaption><p>Product description accordions</p></figcaption></figure>

## How to use

Start by clicking on the **Product description** section on any product template, to open the product description section settings:

<div data-full-width="false"><figure><img src="/files/V9O4SFCVpBQaCFyv8PIt" alt=""><figcaption></figcaption></figure></div>

## Layout style

Under Layout, you can choose between:

* **None** - Only shows the product description and no additional tabs or accordions.
* **Tabs** - Displays tabbed style content beginning with the product description.
* **Accordions** - Displays the accordion style expand and collapse content beginning with the product description.

<figure><img src="/files/tXwRT1VuuW1NVQJxMrKo" alt=""><figcaption></figcaption></figure>

### None

Choosing **None** will remove the tabs/accordion formatting and only show the Product description from the product setup in your Shopify Admin -> Products:

<figure><img src="/files/WejI11BwxqMtZ9jMIgIe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Enable read more**

Manage the amount of content shown:

* Unchecking the "Enable read more" displays all the Product description content.
* Check the option to condense content and add a "Read more" link.
  {% endhint %}

### Tabs

Choosing Tabs will display a tabbed version of your content. The Product description, when enabled will be the first tab followed by additional tabs you can create within the current section settings:

<figure><img src="/files/tYD3JNqstHg9SwONaf7e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Show description**

The Product description from your product setup in the Shopify Admin -> Products can be shown or hidden as the first tab.&#x20;

* When unchecked, the content is not pulled from your product setup.&#x20;
  {% endhint %}

### Accordions

The accordions option displays the content in expanding and collapsing FAQ-style accordions. When "Show description" is checked, the first accordion displays the Product description from your product set up, followed by additional content that you can create in the current section settings:

<figure><img src="/files/JM0Kmd19DNW2FvqwKskW" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Icon description**

You can choose from pre-made and professionally designed icons to include before the tab/accordion title, similar to the icon block.&#x20;

\
**Open by default**

* When checked, the first accordion is expanded by default.&#x20;
* When unchecked, all accordions are collapsed.&#x20;
  {% endhint %}

## Creating tabs and accordions

The Product description section settings include the ability to create additional tabs/accordions, these are created under **Sections**. Begin with Section 1:

* Add a **Tab heading**
* Optionally choose an Icon, which is displayed at the start of the title.
* Add text information into **Tab text**

<figure><img src="/files/bVcs8OzBubdEsI4tPZFb" alt=""><figcaption></figcaption></figure>

* Repeat for Section 2, Section 3, etc. to create additional tabs/accordions.&#x20;

## Removing tabs and accordions

To hide a tab/accordion:

* Erase the **Tab heading** content.&#x20;
* You can keep the Tab text if you plan to show the tab again in the future.&#x20;

<figure><img src="/files/u3VnpTkhZ5OftNlE2mAP" alt=""><figcaption><p><strong>"Care" accordion is hidden</strong></p></figcaption></figure>

To completely remove a tab/accordion:

* Remove content from **both** the Tab heading and Tab text

You can replace it with new content if desired or leave it blank to remove the tab/accordion entirely.&#x20;

## Important message about unique content

{% hint style="info" %}
The tabs/accordions created in these **Sections** will appear on **all** product pages.\
This results in the **same** tab/accordion content that is displayed with your products using the default Product template.&#x20;

* This is standard behavior when adding content into the Theme Editor sections for the default Product template.&#x20;
* Shopify provides a couple of different methods to help you add **unique** content to a group of products or individual products.&#x20;
  {% endhint %}

### Product templates

To share content with only **certain** products:

* You can create an additional product template and assign that template to certain products. Tab content is unique to only products that have that product template assigned to them.&#x20;

### Dynamic source

For **unique** content with each product, you can use metafields or metaobjects methods:

* Use Metafields and customize the Tab heading and Tab text for any of your products. This allows you to add a custom tab title and tab content right from the Product setup in the Shopify Admin -> Products. \
  \
  or,<br>
* Metaobjects, which allows you to centrally manage all your tab content in one place. With Metaobjects, you can add all your tab content entries in one place and then later modify that content right from the same place. You no longer have to update each Product in the product setup.&#x20;

## Unique Content - How to setup

Using Shopify's Dynamic data source feature and metafields, you can display custom tab content for any of your products.&#x20;

### Metafields method

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings -> Custom data, define a **product metafield**. for the Tab Title. The Content type is Single-line (easy step).&#x20;
2. Define a **second** **product metafield**, this one for the Tab Content. The Content type is  Multi-line text.&#x20;
3. Link the two metafields in the Theme Editor under the Product description section using the Shopify dynamic source icon for the Tab title and Tab content.&#x20;
4. The last step is to add a tab heading and tab content in the Shopify Admin -> Products, for any of your products that wish to display a custom tab. Simply add the content under the Metafileds section of the Product setup.&#x20;
   {% endhint %}

Begin in the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="/files/JarsD3A2tXZAWlwXMGXe" alt=""><figcaption></figcaption></figure>

Here you can create (define) two metafields for the Unique Tabs setup:

* Tab Title
* Tab Content&#x20;

.The Tab Title can be set to use "Single-line text" whereas the Tab Content metafield should be "Multi-line text" to add longer text content in the tab:

<figure><img src="/files/z3dtrvIEgfLWnUtfTdIg" alt=""><figcaption></figcaption></figure>

### Video tutorial

All the steps required to create the two Tab title and Tab content metafields, and also how to use them with your products:

{% embed url="<https://www.loom.com/share/a6713f4c685e41e1b4dcc375a49f33e1?sid=477cf840-0e42-4890-abcd-3a1cceda9436>" %}

#### Tip for editing metafield content&#x20;

You can quickly modify the metafield content for any product when in the Theme Editor by simply clicking on the linked metafield in the section settings:

![Opens the metafield information for current product](/files/-Mj-WlXhOu1RsU_WjuaS)

### Metaobjects method

We have a full video overview on how to set up a Metaobject, add entries (tab headings, tab content, link to your products, and change the content at a later time:

{% content-ref url="/pages/lnDp3IMaTtv71rTCfurZ" %}
[Tabs with metaobjects](/products/product-pages/tabs-with-metaobjects)
{% endcontent-ref %}

###


# Tabs with metaobjects

Create custom unique tabs and manage the content centrally

With Shopify's Metaobjects feature, you can now create unique product tabs and accordions for individual products and also manage the content in one place.&#x20;

If you need to change your tab/accordion tab connect that's assigned to a few or many products, you can now update that content centrally all at once with metaobjects.&#x20;

## Video Overview

We'll show you how to create custom tab/accordion titles and content in this video and also update the content centrally:

{% embed url="<https://www.loom.com/share/fdb27d5ab6de42318bc73bd61f25a3a6?sid=4d080239-f31d-4e80-b757-d3137d3cf8e5>" %}


# Product page layout options

Use Pipeline's product page layout controls to customize the look and design of your product pages.

> Introduced in Pipeline 6.3

### Stacked

Display large product images on the left column, customers can scroll through images while the right column containing the product form and detailed information remains stick in view:

<figure><img src="/files/ZfNtGj0rFlc7Utuhj8js" alt=""><figcaption></figcaption></figure>

### Grid

Showcase your product images in this modern Grid design layout. Two images per row with two columns are displayed. Similar scrolling effect to the Stacked option where the product form and details remain in view while the shopper is viewing product images:

<figure><img src="/files/llD7tqMce1HbEfZjtAYw" alt=""><figcaption></figcaption></figure>

### Mosaic

Combines the Stacked view with the Grid view. Display a large-sized version of the featured product image, followed by the Grid design with two images per row and two columns:

<figure><img src="/files/c3U5vZNKFiVw5j1vq1E5" alt=""><figcaption></figcaption></figure>

### Showcase with vertical thumbnails

Smaller thumbnails to showcase all product images. This style presents the thumbnail images on the left, positioned vertically. Clicking a thumbnail changes the main product image:

<figure><img src="/files/CuAqqWOqTXZfs45aP2wS" alt=""><figcaption></figcaption></figure>

### Showcase with horizontal thumbnails

A classic design to display a large version of the current featured image with small-sized thumbnails placed below the main image:

<figure><img src="/files/t9r1HEj8SSCYrTUZ8qnP" alt=""><figcaption></figcaption></figure>

## Image width&#x20;

#### Half

Increase the Product form area by adjusting the Image width option to **Half:**

<figure><img src="/files/F2pYYoPP8JwJVoJX6rwl" alt=""><figcaption><p>Half increases Product Details column</p></figcaption></figure>

#### **Wide**

For a larger area to feature the product images, choose the **Wide** option:

<figure><img src="/files/wmvA4TUY6ZIvr1uj6Fhq" alt=""><figcaption></figcaption></figure>

### **Image spacing**

Adjust the whitespace around images to increase or reduce spacing:&#x20;

<figure><img src="/files/HpbyVVbiYTqyNGZnxCcB" alt=""><figcaption><p>Increased spacing around images in Grid view</p></figcaption></figure>

## Mobile Layout

Pipeline includes multiple layout options for mobile devices to choose from.&#x20;

### Carousel

A clean minimal design to swipe through product images:

<figure><img src="/files/W06vbJRfPLfjXR2eCv3u" alt=""><figcaption></figcaption></figure>

### Showcase without thumbnails

Adds an indicator overlay with dots representing the number of product images in the carousel:

<figure><img src="/files/Mad3G39n6IrHBG2xZUZT" alt=""><figcaption></figcaption></figure>

### Showcase with horizontal thumbnails

Displays the thumbnails below the carousel with additional navigation:

<figure><img src="/files/6gDmNZ2YJ5tNnVcSFOPp" alt=""><figcaption></figcaption></figure>


# Product zoom

Pipeline's product zoom feature allows desktop and mobile shoppers to zoom in to areas of your product images.

![](/files/-MjAwi_iLFrQ_7I3LpO0)

Using large product images will help display greater detail of your products when customers use the image zoom feature.&#x20;

Shopify recommends square product images 2048 x 2048 pixel size and a maximum size of 4472 x 4472 pixels.

### Disable zoom

To toggle the zoom feature, click on **Product page** for settings:

![](/files/-MjAxPSBJlEUm-Qv4vQt)


# Inventory count down

Pipeline can display a count down message when the last 10 items are in stock

![Message is displayed when current variant is 10 items or less](/files/-MjBAyV8nFy8f8g8KG97)

To enable, add the '**Sizes and remaining**' block to the Product page section:

<figure><img src="/files/brvJI7swimOgnsWtnWmz" alt=""><figcaption></figcaption></figure>

Configure under the **Inventory message** section of the block settings. Options include:

* Toggle message
* Show when low or always show
* Adjust the trigger for the 'Show when low' option
* Block padding

<figure><img src="/files/FObpJNk3vVZxXljuFpWJ" alt=""><figcaption><p>Sizes and reminaing block settings</p></figcaption></figure>

### Product setup

In your product setup, ensure Track quantity is checked to track inventory:

{% hint style="info" %}
Continue selling when out of stock - If this is checked, the inventory countdown message won't appear since the customer can still buy. Uncheck to display the countdown message.&#x20;
{% endhint %}

![](/files/-MeDNf7o8OtPGWaILQfj)


# Size charts

Display a pop-up size chart to help customers find the right choice to purchase

With Pipeline, you can display a size chart page as a popup on any or all your product pages. Pipeline includes an option to select a Shopify Page as a size chart for all your products or use multiple Shopify Pages and customize each product to use a custom size chart page when using metafields.&#x20;

{% hint style="info" %}
If the "Form" block isn't available use the "Sizes and remaining" to select the size chart page.
{% endhint %}

![Example of using one Size Chart page on all products](/files/-MjBCrwnwO2Y2KyYdrbu)

### Single size chart for all product pages

This method allows you to instantly add any Shopify page as a size chart popup to all your product pages when using the default product template.&#x20;

Click on **Form** to view the theme block settings and select a Shopify Page you've created for the popup size chart.&#x20;

For best results, create a size chart page in your Shopify Admin which includes a wide range of sizes. Use that page as your size chart page option.&#x20;

### Multiple Size Charts - Custom size chart for individual products

> Feature added in Pipeline 6.1

If your store has multiple size charts, Pipeline can use metafields to customize which size chart page is displayed for each of your products. For example, this is ideal when displaying a size chart for Women's products and another for Men's products. See below for how to setup.&#x20;

### Link placement and language support

By default, Pipeline will place the size chart link next to a variant option called ***Size***. If Pipeline doesn't see a variant option labeled ***Size***, the link will be placed below the quantity selector.&#x20;

If your store uses a different label name or is spelled differently for various languages, you can use the Language Editor to update the value from ***Size*** to another value. This will ensure the size chart link is mapped to the variant option you prefer and appears next to that variant option:

![The label "Size" can be updated in the Language Editor](/files/-MkNnATAYwfSDUnwpa3s)

Only one variant name option is supported, you cannot add multiple names in this language editor field.&#x20;

## How to setup custom size charts for individual products

Begin by creating as many size chart pages as needed in your Shopify Admin Page editor. If you have an image already created for your size chart, add that to the content section of the page:

![Example page when using an image](/files/-MjBXenTRGJfNGMuWUrw)

![Example page when using a table using the Page editor](/files/-MjBJMSAgTxqDS_TqbON)

### Create a reference metafield

The next step is to define a **Product** metafield using **Page** as the **Reference type**:

![Allows you to assign any page to your products](/files/-MjBKAgNdUzI9XI6riE3)

### Connect the size chart metafield

After the size chart metafield has been created, simply choose that as your Dynamic data source in the Theme Editor:

![Use the Form theme block to configure](/files/-MjBNcqEJxvwTJfd6jC8)

### Setup products

Your products will now have a Metafields section at the bottom. Use this to select which size chart page should be displayed when a customer is viewing this product.&#x20;

![Choose which size chart to display for each product in the Product setup](/files/-MjBQNxCwPKGsxXl2C2I)

This allows you to choose which size chart each individual product will display in the popup.&#x20;

![Men's size chart associated with men's shoes only](/files/-MjBXO24sYRvpkSnNK1O)

### Videos about setting up metafields

To learn more about setting up metafields, we recommend viewing our videos located on the Cart upselling:

{% content-ref url="/pages/-Mj8rvAMcv0HnLKmlYqD" %}
[Cart upselling](/upsell/upselling/cart)
{% endcontent-ref %}

## Alternate usages&#x20;

Products without a size variant will display the size-chart link lower down, just above the add to cart button, and also styled as a badge. If any of your products are not using the size variant, you can repurpose this feature to be used as a badge with a link to promotional or brand information:

![Badge styled link used](/files/-MeXLQyVUWgkvEEuiwyh)

##


# Unique product content

Using product templates to display custom sections with different products

Shopify includes a Default template for all your products. When using this template, you can customize how your products are displayed, the content that's shown. With Online Store 2.0, you can add any of the rich sections included in Pipeline right on your product detail page. This helps you build beautiful and rich product pages.&#x20;

Since the Default product template is used for all your products, the same supporting assets are shown on ***all*** product pages. Luckily there are a couple different methods to change how our product pages appear for different products. Two main methods are:

* Product metafields
* Product templates&#x20;

The difference between these methods is helpful to understand:

#### Product metafields

{% hint style="success" %}
Product metafields can be used to add dynamic content to existing sections and blocks. This method allows you to have a layout that's constant on various product pages but change the content.
{% endhint %}

An example would be a product detail page with an Image and text section below the product form. The image and text content can be unique for each or multiple products with metafields. However, the layout would not change, only the content.&#x20;

**Product templates**

{% hint style="success" %}
Product templates hold layout information and content. When using multiple product templates, we can have a completely different look for different products.&#x20;
{% endhint %}

An example would be product types. If your store is selling a mix of product types like soft goods and hard goods, you may want a completely different layout for each one.&#x20;

### Using product templates for unique layout and content

Adding addition product templates can provide an easy solution to displaying different layout styles and content within your shop. Creating product templates are simple and easy to use. \
\
Video walk-thorough on steps to creating product templates in Pipeline:

{% embed url="<https://www.loom.com/share/32607932896a4d4eb0db60562b3141ff>" %}

There are two main steps (easy) involved with working with multiple product templates:

* Create a new product template in the Theme Editor.
* Assign products to the new templates.

After creating new templates, you simply assign them to various products. Create as many templates as needed.&#x20;

{% hint style="info" %}
Think of Product templates as tools for building layouts and Metafields for unique content inside those layouts. They can be utilized together.&#x20;
{% endhint %}

The video example above is a very basic use of product templates. You won't necessarily need to create a new template for each product. Simply use metafields to change the content in each template and use a couple or a few product templates for the layout. Metafields allow you to change content like images and text (within a section) without the need for another template.&#x20;


# Alt-text sizing information

Display an expanding caption over any of your product images

> Feature introduced in Pipeline 6.5

Pipeline features an animated caption toggle which is overlayed on product images which include alt-tag information:

<figure><img src="/files/JT8ucnWfutfMI6RaoZ2I" alt=""><figcaption><p>Zoom icon is left of the sizing icon</p></figcaption></figure>

### How to setup

In your **Shopify Admin** under **Products**, add Alt-text captions to your product images. Click on the handle icon for each image and add your caption:

<figure><img src="/files/H9mC9RrELdd6K80wz0A6" alt=""><figcaption></figcaption></figure>

Edit and save the caption information under alt text:

<figure><img src="/files/pXZkeC5VjHaNciiyxFPC" alt=""><figcaption></figcaption></figure>

Next, in the **Theme Editor** under the default Product template (or any product template), click on  **Product page** to view the settings. Next, scroll down under **Media** and ensure alt-text toggle is checked:

<figure><img src="/files/w6IlwpPwJl9kPr6cpNyK" alt=""><figcaption></figcaption></figure>

Customize the icon with the included icon library built-in to Pipeline. The icon appears only when an image contains alt-text information. Customize each product image to display unique captions.&#x20;


# Swatch size

Introduced in Pipeline 7.2

The size of variant swatches and sibling swatches can be adjusted on product pages:

### Siblings size

* Click on the Siblings block under the Product page
* Adjust the Sibling size slider to the preferred size width

<figure><img src="/files/tm2i1rPcUURYvVRdvkAV" alt=""><figcaption></figcaption></figure>

### Variant size

* Click on the Variant options block under the Product page
* Adjust the Color swatch size to the preferred size

<figure><img src="/files/LdeTY6G4hSiJyLsi8Nod" alt=""><figcaption></figcaption></figure>


# Color swatches (legacy)

Add visually appealing color and color swatches

{% hint style="info" %}
Shopify has released support for swatches that can be edited from the product page, making this feature unnecessary. Pipeline released support for Shopify native swatches in version 7.5.0 and Pipeline will maintain support for legacy swatches until version 8.0.0
{% endhint %}

## New swatches

**A very brief primer on what you need to know about the new system.** [Shopify Docs Here](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields).

<figure><img src="/files/FoG6tj92WyJIdQ6RTkVC" alt=""><figcaption><p>You can now edit the color swatches from the product page</p></figcaption></figure>

\
\
If the color is set to white, the swatch will show an extra border.&#x20;

<div align="left"><figure><img src="/files/k3hBldTW1RByPs759bKv" alt="" width="188"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/VE5MxJUp0GSWXAcyaaiw" alt="" width="183"><figcaption></figcaption></figure></div>

You can edit the swatch color in the shopify product admin, and updating a color reference will update it for all products using that color.&#x20;

<figure><img src="/files/gLqzsArNs7qHV2PFyqUV" alt=""><figcaption></figcaption></figure>

When editing a swatch you have the ability to select a color or an image. Images will override colors. If both are set, the image will show. <br>

### Migrating to the new system

{% hint style="info" %}
To enable swatches, put your product in a category. Once categorized, you can connect your "Color" product option to the Color metafield for that type of product.&#x20;
{% endhint %}

The new swatches in Shopify are powered by Shopify's [categorization system](https://shopify.github.io/product-taxonomy/). To enable swatches, you'll need to put your product in a category. In the image below we will update from an old category to the new kind that supports swatches:

<figure><img src="/files/eAa4KlEabeWyrKLqU45I" alt=""><figcaption><p>Retired categories will not enable swatches. You'll need to update to the new categories. </p></figcaption></figure>

Once that's done we can "Connect metafield" and select "Color" from the dropdown:

<figure><img src="/files/BpL0VtIGtBLmeCVFrbqL" alt=""><figcaption><p>The "Connect metafield" button will only show once a category has been selected. </p></figcaption></figure>

<figure><img src="/files/ajmO1DoesLwYoBJoJkKO" alt="" width="159"><figcaption><p>Select "color"</p></figcaption></figure>

<figure><img src="/files/GKEKtUJ2qAJ3QFHjxwqX" alt=""><figcaption><p>If your color names are standard, the swatches will be mapped automatically. </p></figcaption></figure>

Not all categories support color swatches. You can see a list of categories that have "Color" swatches [here](https://shopify.github.io/product-taxonomy/releases/unstable/attributes/?attributeHandle=color). \
\
Once the color metafield is connected, you'll be able to edit swatches in the Shopify admin, add images, and manage colors more easily.&#x20;

### Compatibility and upgrade window

Once your swatches are confugured, Pipeline will display color variants as swatches on product pages and collections. The design for the new swatch system and the legacy system is identical. We don't recommend using them together but they are visually identical.&#x20;

![Color swatches can be used when product variants have colors](/files/-Mj4Xx_DM2LbjqPshiKz)

![Product grid listing on Collection page](/files/-Mj4YnXxfmD8qcyU4UFy)

Legacy swatches will be supported until Pipeline V8.0.0

***

## Legacy swatch documentation

Manage color swatch settings under the Product grid in the Theme settings:

![Color swatches can be used when product variants have colors](/files/-Mj4_SGyIOFIuTCYuBC_)

{% hint style="success" %}
Pipeline will detect if your variant label is `Color` or `Colour` and automatically display swatches
{% endhint %}

### Customize the trigger words

To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:

![Change trigger words by using the Language Editor](/files/-Mj4ai8reloUOlz2Ayp4)

Trigger words are the variant label names in your product setup, these are matched with the Language editor:

![Tip: Products that have two color variants like "Top" and "Bottom" can be added to this list.](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa35d4bcff47e0017d2ebd5/file-LUmZIomcVP.jpg)

Quick access to the Language Editor:

![Click on the three dot ellipsis icon at the top of the Theme Edtior](/files/-Mj507S0Hi9uZ6-ny8ua)

### Swatch color names

Pipeline can easily detect simple color names and convert them to swatches. There are a total of 140 color names Pipeline can detect, all other more complex names will be represented by a default grey color swatch. You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches:&#x20;

{% embed url="<https://groupthought.com/pages/swatch-colors>" %}
Click to view list of supported default color names
{% endembed %}

Swatches are generated using the variant color names. If you have simple color names or color names that are listed in the above list, Pipeline will display that color on the product page as a swatch:

![Swatches are generated using these variant color names](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5f98cca752faff0016af447b/file-iBM1tkmGuG.jpg)

If your variant color name is not listed in the above list, a default grey color swatch will be used:

![](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5f98dd21c9e77c001621c25a/file-WEQyLICa2V.jpg)

## **Customizing**

If your products have color names other than the listed colors in the [Color names list](https://groupthought.com/pages/swatch-color-names), you can add your own color names and values or upload images to the Assets folder:

### Add custom color names and values to swatches.json

Use the `swatches.json` file located in the **Assets** folder to add your own custom names and HEX color values:

![](/files/-Mj51mosCg2cwptPdHHl)

For example, to change the color displayed for Ink, we can change the HEX value of `#696969`:

```
    {
      "ink": "#696969"
    },
```

Change to a darker black:

```
    {
      "ink": "#323232"
    },
```

To find additional HEX color codes, visit:  <https://colorhunt.co>

{% embed url="<https://colorhunt.co>" %}

### Add custom images to the assets folder

With Pipeline, you can upload your own custom swatch images and display them on product and collection pages:

![Product page form displaying swatch image](/files/-Mj5N-zvbY_ZBINOc5QV)

How to:

{% hint style="success" %}

* Create a small square image (60x60 or 100x100 for best results)
* Upload to the **Assets** folder
* Modify `swatches.json` to include your color name and image
  {% endhint %}

### Avoid spaces in the filename

{% hint style="info" %}
We recommend if your image has spaces, replace them with an underscore or dash:\
\
Instead of "**Light Navy.png**" use "**light\_navy.png**" or "**light-navy.png**"
{% endhint %}

For the JSON file, your multiword variant can look like this:

```
    {
      "Light Navy": "light_navy.png"
    },
```

The variant name can have spaces. However, we recommend for the **filename of the image, use an underscore or dash instead of a space**.&#x20;

### Video tutorial

We demonstrate uploading a custom image to use as a swatch:

{% embed url="<https://www.loom.com/share/7a00f088bcb74b31a0b27e2714d3a4df>" %}

Reference from the video:

```
    {
      "Sea Jungle": "sea-jungle.png"
    },
```


# Collection pages


# Subcollections

Promote related collections on any collection page

Promote additional collections on your existing collection pages. Subcollections can help your customers find related collections or promoted collections at the top of the collection page.&#x20;

Example of subcollections, we are promoting the "Cardigans", "Cashmere", and "Cotton" collections when viewing the Sweaters collection page:

<figure><img src="/files/Gt0jczyVxxqomVdxjLSa" alt=""><figcaption></figcaption></figure>

Another example of using Subcollections can be, to help display additional brands. If a customer is viewing products by a certain brand, you can display product groups of that brand or competing brands.&#x20;

## Two options in Pipeline

Pipeline offers two methods for adding Subcollections to the Collection template: a fast method and a more flexible method that allows for greater customization.

## Basic method

The first method and basic method is to simply choose Collections from the Subcollections list in the Theme Editor (feature added in Pipeline 7):&#x20;

<div data-full-width="true"><figure><img src="/files/xgmV8QXxb3YbsRVXuYuQ" alt=""><figcaption></figcaption></figure></div>

Using this method will display the same chosen collections on all your collection pages. This might work for smaller stores or situations where you're only promoting the same collections on each of your Collection pages.&#x20;

## Full customization

Pipeline also supports using a dynamic data source for Subcollections. When you use a collection metafield, you can easily choose which collections are shown for each individual Collection page.&#x20;

This gives you full customization abilities including showing Subcollections only with certain Collection pages. The setup is fairly simple.

### Step 1

Let's being by creating a Collection metafield in the Shopify Admin.&#x20;

Choose Settings -> Custom data -> Collections

<figure><img src="/files/iacuj7mtIa1rg55Gd2hS" alt=""><figcaption></figcaption></figure>

> *Tip*: Be sure you choose **Collections** when creating this metafield

* Choose the **Add definition** button to start creating the Collection metafield.
* Add a Name, you can use any name you like for this metafield. We've used `sub-collection`
* After adding a name, you can optionally add a description
* Choose **Select type**, scroll down, and pick **Collection**:

<div data-full-width="true"><figure><img src="/files/a4f4uEcOOM5jD9wchzaa" alt=""><figcaption></figcaption></figure></div>

* After choosing Collection, for the type pick **List of collections** (important)

<div data-full-width="false"><figure><img src="/files/FnryiCgfzRSqmMinRqVj" alt=""><figcaption></figcaption></figure></div>

Press the **Save** button to complete

### Step 2

Now we can customize each of our collections with unique Subcollections. Here is a video walkthrough on how to complete our setup and choose individual collection lists:

{% embed url="<https://www.loom.com/share/841524755a084e648680e9297b176c26?sid=d8d07b57-ea60-467d-a18e-11afd40138c7>" fullWidth="true" %}

<details>

<summary>Steps covered in video</summary>

* Shopify Admin -> Products -> Collections, choose a collection, and add a list of collections to cross-promote in the metafields section.
* In the Theme Editor, connect the dynamic data source for subcollections.

</details>

You can now choose custom lists of collections for any of your collection pages. Simply return to the Shopify Admin, Collections, and choose a list of collections for any of your existing collections.&#x20;


# Badges / Stickers

Display pre-built and custom product badges on the Product Card

Pipeline includes a set of pre-made product badges or sometimes known as stickers. These are displayed on the product cards which appear most commonly on Collection listings:

<div data-full-width="true"><img src="/files/rnxpmC16NNwiVHtfbodN" alt="Custom Black Friday badge"></div>

## Sale badge

The sale badge/sticker is automatically generated and can be displayed in two styles:

* A savings badge. This displays "Save" followed by the percentage like "Save 21%". The savings percentage is automatically calculated by Pipeline.&#x20;
* A standard "Sale" badge. This is a regular badge indicating that the product is discounted.

### How to&#x20;

* Set the **Compare-at price** to be **larger** than the regular product Price:

<figure><img src="/files/hxgB4AjtRgc4JrlZiqXU" alt=""><figcaption></figcaption></figure>

* Choose "Show sale badges"
* Optionally check "Show sale amount" for the percent discount style badge

<figure><img src="/files/VILtFRjwJ1C4P8VZGryB" alt=""><figcaption></figcaption></figure>

### Sold out badge

Pipeline can automatically display a "Sold out" badge if you are tracking inventory with your products and the item is out of stock:

<figure><img src="/files/CiVGi881COodWMe9T8hq" alt=""><figcaption></figcaption></figure>

## Custom badges

Pipeline allows you to create your own custom badges which will be displayed on all product grid views including collections, navigation, related items, and sections.

### How to create

There are a few basic steps to set up and start using custom badges. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings, **define a product metafield**. The Content type is Single line text (One value)
2. In the Product Setup, **add a value to each product** to generate a custom badge. Each product can have a different badge if desired.
3. In the Theme Editor, ensure that Custom badges are enabled under Theme Settings -> Product Card.&#x20;
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="/files/s6Zbe0qqCPEEH00MUDWg" alt=""><figcaption></figcaption></figure>

* Use the "**Add definition**" button to create a new product definition
* For the Name, use "Badge" or "badge"
* Change the Namespace and key from `custom.badge` to **`theme.badge`** (important):

<figure><img src="/files/oGMkvPwhkaMraMepZDEX" alt=""><figcaption></figcaption></figure>

* Verify you've changed that to **`theme.badge`**
* Add an optional description
* Click on "Select type" and choose "**Single line text**"

<figure><img src="/files/dd2MaFyGojUM4QFR5G8L" alt=""><figcaption></figcaption></figure>

* Choose "**One value**"
* Verify your definition looks like the following:

<figure><img src="/files/F8Js3NLM7FaitWZoZegR" alt=""><figcaption></figcaption></figure>

* Press the **Save** button to complete

### Step 2

Add sticker information to products (fun step).&#x20;

* In the **Shopify Admin -> Products**, choose any product that you'd like to display a custom badge on.&#x20;
* Scroll to the bottom of the product setup, to the Metafields section, and add your sticker value to the new field called "badges" or "Badges":

<figure><img src="/files/S9pL36Xxqvg3mneF3jE2" alt=""><figcaption></figcaption></figure>

* Use the **Save** button to complete.
* Continue for any other products you'd like to add badges to.&#x20;

### Step 3

In the Theme Editor, use the Settings icon for the **Theme Settings**. Next, open the **Product Card** section:

<figure><img src="/files/f4VDybSsJIX4EE15oFnj" alt=""><figcaption></figcaption></figure>

Check the option to **Enable custom badges** in the Product badges group:

<figure><img src="/files/9uKekm8SAZAC9uO3gA4d" alt=""><figcaption></figcaption></figure>

### Result

You can now view the custom product badges that you created:

<div data-full-width="true"><figure><img src="/files/BDnYVky0H6peSsoVUj80" alt=""><figcaption></figcaption></figure></div>


# Custom filter options

Enhance product filter with your own custom filters

Pipeline offers the ability to create powerful filtering options to help shoppers find products and product features within collections. Easily build custom filter options using metafields and combine them with other filter tools like color, size, availability, price, and more.&#x20;

Custom filter options are dynamically displayed by Pipeline, keeping the filter area clean and only displaying valid filter options:&#x20;

<figure><img src="/files/YVcg4z3nOl6HFCQ1t799" alt=""><figcaption></figcaption></figure>

## How to setup

There are a few very basic steps needed to create and use custom filter options. Here is a quick breakdown:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings, **define a product metafield** for each filter group. The Content type is Single line text (List).
2. In the Product Setup, **add values to each product** to match any custom filters you've created.
3. Use the Shopify Search and Discovery app to enable the filter.&#x20;
4. Using the Theme Editor, add the **Filters block** to Collection template.
   {% endhint %}

Each step is covered in detail below.&#x20;

### Step 1

Each filter group is created by defining a product metafield. In the example above for "Fabric", that is one filter group and can have multiple values. Plan out and create as many Filter Groups as needed. Each one is done by defining a product metafield with the Content-type set to Single line text (List)

* Start in the Shopify Admin under Settings -> Custom data
* Define a new Product metafield
* Choose a name that will be associated to the filter, we'll use "Fabric" in our example.
* Use **Single line text** and **List of values** for the type:

<div data-full-width="false"><img src="/files/jyrP6Q19NXO5jqOMKuGz" alt="Shopify Admin -> Settings -> Metafields"></div>

* Define a new product metafield for each collection filter group. For example, we created a second one called "Fit".&#x20;

### Step 2

Now that we've created custom filters in the metafield setup, we can begin adding values to our products.&#x20;

In the Shopify Admin -> **Products**, add values to your Products with the newly created metafields:

<figure><img src="/files/balDtabwlITE9ESzNsxh" alt=""><figcaption></figcaption></figure>

* Add values to each of your products that match the criteria for your custom filters
* Products can have multiple values using the list. For example, if a product had multiple fabrics, we can add them to the Fabric list.&#x20;

> **Remember**: Each product will need a value in order for that product to appear in a custom filter list.&#x20;

### Step 3

The next step is to connect your custom filters in the Shopfy Search and Discovery app.&#x20;

{% embed url="<https://www.loom.com/share/b59590fb291e4f22bec3d0b4c0141c74?sid=12376e02-3053-4cd2-9db8-28168f30a2c6>" fullWidth="true" %}

The Search and Discover app is available for free from Shopify:

{% embed url="<https://apps.shopify.com/search-and-discovery>" %}

### Step 4

The final step is to add the **Filters block** to the Collection template. Using the Theme Editor (Customize theme), navigate to a collection page or collection template and verify that the Filters block has been added and is visible (not hidden).

When the Filters block is added and active, all filter tools become available to shoppers that are configured in the Searcy and Discovery app.&#x20;

<figure><img src="/files/bQRasIuWGSBtaBHhmyto" alt=""><figcaption></figcaption></figure>


# Collection sorting

Display options to sort products in the current collection

Customers can choose to view products with various sort options on a Collection page:

<div data-full-width="true"><figure><img src="/files/FsNe3fEGoHNnNMHxLaZN" alt=""><figcaption></figcaption></figure></div>

You can manage the default sort for each individual collection.&#x20;

## How to

In the Shopify Admin -> Products -> Collections, you can choose a Collection and modify the default display order:

<figure><img src="/files/KEsHbuqFnvGVzgyvtevJ" alt=""><figcaption></figcaption></figure>

### Manual sorting

To customize exactly the order in which products are displayed, use the sort type: Manually.

Use the drop-down, and change to "Manually":

<figure><img src="/files/wabLTEZPNLER9y19C5On" alt=""><figcaption></figcaption></figure>

Use the handle icon and then drag-and-drop to reposition the product order:

<div data-full-width="false"><figure><img src="/files/t3ZZebzolAmdX7nQlwWI" alt=""><figcaption></figcaption></figure></div>

### Disable sorting options

You can hide the sorting controls by un-checking the "Show collection sorting" option in the section settings:

<figure><img src="/files/a48SIaukZal1GYFGLHsu" alt=""><figcaption></figcaption></figure>


# Layout options

Customers can change the layout view of collection pages with the Collection Control bar.

## Product card layouts

The Collection Control bar can display layout options for shoppers to change their collection view dynamically. Choose from two to four images per row on desktop and one to two on mobile.

### Desktop layouts:

![Most images per row, smaller sized images](/files/dK1FU7AqdCmhNHwhomOX)

![Three images per row, images are larger](/files/2jFKkBFE1ll809VgqrXb)

![ Two images per row, largest image size option](/files/FryGc3bjkt2sYHDFj0Or)

### Mobile layouts:

There are two options for mobile, two images per row and one image per row.

![Two products per row, mobile](/files/rUzvy6IZc0fgUOsTvM83)

![Single product, larger images](/files/U9XiIWzT3Kyq8yVbtoji)

### Default view for customers

You can set the default view for your customers in the section settings. Customers can then change the view style by using the Control bar.&#x20;

<div data-full-width="true"><figure><img src="/files/7GoihFx30lG1AAorh9w3" alt=""><figcaption></figcaption></figure></div>

* You can hide or show the image layout buttons in the Control bar with the "Show product layout buttons option" toggle.&#x20;
* The Products per page slider lets you manage how many products are displayed on each collection page. Pagination is added when multiple pages are available to shoppers.&#x20;


# Pipeline Cart


# Cart types

Choose the type of cart that matches your brand, services, and customer types. Pipeline offers four cart types that you can select from:

* Cart drawer
* Cart popup
* Cart page
* App compatible page

Beyond the style, these cart types can be an important part of your customer's shopping experience. Explore these cart types to find the one that fits your business needs.&#x20;

The cart type can be easily changed in the **Theme Settings** under **Cart**:

<div data-full-width="false"><figure><img src="/files/pxLkk00qPxRwPDDoHJIZ" alt=""><figcaption></figcaption></figure></div>

## Customizing the cart

The cart features and setting options are based on which type of cart you've selected.&#x20;

### Drawer and popup cart types:

The overlay group versions, Cart drawer, and Pop up are configured when you choose "**Cart Drawer**" under the **Overlay** group.&#x20;

<figure><img src="/files/4ZM09V45O52CjUC9KPgZ" alt=""><figcaption></figcaption></figure>

### Cart page with sections

The Cart page and App-compatible versions are both managed from the Cart section settings under Cart. The Page style can be fully customized with Pipeline's Section library:

<div data-full-width="true"><figure><img src="/files/46o3kATuRU5B6FhQUdXI" alt=""><figcaption></figcaption></figure></div>

## App-compatible page

This cart type can be used for developers to customize the core functionality of the Cart page. It's also the best option if you are using any Shopify App that is targeted to use features of the Cart.&#x20;


# Cart page

Fully customizable cart page packed with features to increase conversions

Customize and design your Cart page using any of the professional sections available in Pipeline. Provide the details to help your shoppers reach checkout or add a few additional items to the cart. We also include some Cart extras to help with that final experience before making the transaction.&#x20;

## Cart page components&#x20;

### Sections

The Pipeline Cart age can include rich sections from our Sections library included in the theme. You can add sections to help deliver that final message to our customers. Any of the popular sections in Pipeline can be added to the Cart page.&#x20;

<div data-full-width="false"><figure><img src="/files/DhpX23TBYNl58i2f1UND" alt=""><figcaption></figcaption></figure></div>

### Section Examples

* Add **Icon columns** (shown in the above example) to build confidence in your brand
* The **Accordion group** (shown above after the checkout button) can provide key details to customers with frequently asked questions.&#x20;
* The **Accordion single** section is also another nice feature where you can include rich images with those questions and details.&#x20;
* Developers can use the **Custom HTML** or **Custom Liquid** sections.&#x20;
* The **Scrolling promotion** section (shown in the image below) can help deliver flash sale messaging and urgency to buy. The free shipping message can be moved into this section:

<figure><img src="/files/HYcQampKR7K7HP5qkttM" alt=""><figcaption><p><strong>Accordion group and Scrolling promotion with free shipping message</strong></p></figcaption></figure>

Sections can be placed above and below the main Cart section which contains the order details and call-to-action area. Pipeline offers a wide range of sections for you to fully customize the Cart experience for your customers.

### Order details

<figure><img src="/files/o1HKuhO9TMhmSYGAuC5U" alt=""><figcaption></figcaption></figure>

The main area of the Cart contains the order details including:

* A thumbnail of the product variant chosen.&#x20;
* Name of product
* Size or variant selected
* Sale type, for example, pre-order item
* Color variant
* Product vendor
* Remove item button
* Price
* Quantity selectors with the current value
* Total

The Quantity selectors and product vendor are optional and can be managed in the Cart section settings.&#x20;

### Order total and additional components

Following the order details, the Cart page displays the main subtotal, Checkout button with Shipping and Taxes message. Additional components which are optional can also be displayed including:

* **Display Free Shipping message** -This dynamic message informs customers how close they are to qualifying for free shipping. The threshold is set in the Theme Settings -> Cart. The message text is configured in the Cart section settings along with a toggle to show or hide.&#x20;
* **Custom Cart message** - A badge-styled message box where you can display a coupon code or other short important information.
* **Additional Checkout buttons** - Show or hide the additional payment methods like Apple Pay, Google Pay, Amazon Pay, and PayPal.
* **Cart notes** - Include a mini-input form for customers to add additional notes with their order like engraving details or custom information regarding products ordered.&#x20;
* **Estimate shipping** - An accordion-based shipping cost calculator with country and region lookup. Prices are based on your shipping prices configured in the main Shopify Admin settings.&#x20;

<figure><img src="/files/7yrjZKMnVbN6aZbPndi1" alt=""><figcaption><p><strong>Additional Cart Components</strong></p></figcaption></figure>

### Cart Section Settings

Use the Cart section settings to configure the optional Cart components:

<div data-full-width="true"><figure><img src="/files/46o3kATuRU5B6FhQUdXI" alt=""><figcaption></figcaption></figure></div>

#### Empty cart link

{% hint style="info" %}
The Empty cart link has been moved to the Theme Settings -> Cart

You can customize the default link for shoppers to use if their cart is empty when viewing the cart. This is an opportunity to send them to a collection with special promotions or featured products.&#x20;
{% endhint %}




---

[Next Page](/llms-full.txt/1)