# Support

## Themes <a href="#get-support" id="get-support"></a>

If you want to learn more about our Shopify themes you've come to the right place. Not sure which theme to pick - take a look at our [comparison chart](/general/theme-comparisons) otherwise click below to get more details on the theme your using.&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Paper</strong></td><td>For large catalogs storefronts</td><td></td><td></td><td><a href="/spaces/PJlTTtkiYsDIt9ISlkeW/pages/QhbJbioCyXsk1c77JeAa">/spaces/PJlTTtkiYsDIt9ISlkeW/pages/QhbJbioCyXsk1c77JeAa</a></td></tr><tr><td><strong>Space</strong></td><td>For maximum visual impact</td><td></td><td></td><td><a href="/spaces/T8P5o2xn9hR3RTkWu2FN/pages/QhbJbioCyXsk1c77JeAa">/spaces/T8P5o2xn9hR3RTkWu2FN/pages/QhbJbioCyXsk1c77JeAa</a></td></tr><tr><td><strong>Keystone</strong></td><td>For B2B and wholesale storefrots</td><td></td><td></td><td><a href="/spaces/8sXwSf3sLGWt80kGN8d9/pages/QhbJbioCyXsk1c77JeAa">/spaces/8sXwSf3sLGWt80kGN8d9/pages/QhbJbioCyXsk1c77JeAa</a></td></tr><tr><td><strong>Slab</strong></td><td>For a completely modular theme experience</td><td></td><td></td><td><a href="/spaces/GnixyIfIYFWroNtVmZo6">/spaces/GnixyIfIYFWroNtVmZo6</a></td></tr></tbody></table>

## Apps <a href="#get-support" id="get-support"></a>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Pallet</strong></td><td>Create and manage B2B pricing groups</td><td></td><td></td><td><a href="/spaces/PJlTTtkiYsDIt9ISlkeW/pages/QhbJbioCyXsk1c77JeAa">/spaces/PJlTTtkiYsDIt9ISlkeW/pages/QhbJbioCyXsk1c77JeAa</a></td></tr></tbody></table>

## Get support <a href="#get-support" id="get-support"></a>

Email support is available Monday to Friday with a typical 3-day response time.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Contact support</td><td><a href="/pages/YG06LNDFlIQrOtPuh7gU">/pages/YG06LNDFlIQrOtPuh7gU</a></td></tr></tbody></table>


# Contact support

Email support is available Monday to Friday with a typical 3-day response time. Shopify support is often the best option for platform issues or third party integrations.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Contact theme support</td><td><a href="https://brickspacelab.com/pages/contact">https://brickspacelab.com/pages/contact</a></td></tr><tr><td>Contact Shopify support</td><td><a href="http://help.shopify.com/">http://help.shopify.com/</a></td></tr></tbody></table>

## Our support policy

Our support includes bug fixes and questions about built-in features and functionality. Our support does not include third party app integrations or theme update installations.

| What we cover                                            | What we don't cover                                               |
| -------------------------------------------------------- | ----------------------------------------------------------------- |
| ✅ Questions about our themes features and functionality. | ❌ Design or code customizations.                                  |
| ✅ Help setting up a theme's built-in features.           | ❌ Installing theme updates.                                       |
| ✅ Fixing bugs or issues in unmodified themes.            | ❌ Issues with the Shopify admin .                                 |
| ✅ Call support via scheduled meetings.                   | ❌ Transferring customizations to an updated theme.                |
| ✅ 1-on-1 onboarding via scheduled meetings.              | ❌ Fixing and troubleshooting issues related to custom theme code. |
|                                                          | ❌ Support for integrations or third party apps.                   |
|                                                          | ❌ Changes to theme code done via Shopify's AI Toolkit             |


# Tips for contacting support

Use this page when you are not sure how to reach Brickspace or what to include so the team can answer quickly.

## Where to open a request

* **Theme support and pre-sales questions:** use the contact options on [Brickspace Lab — contact](https://brickspacelab.com/pages/contact) (same destination linked from [Contact support](/general/contact-support)).
* **Shopify billing, domains, or checkout errors outside the theme:** contact [Shopify Help Center](https://help.shopify.com/) first.

Brickspace documents each product in this help center (Paper, Space, Keystone, Slab, Pallet). Searching the hub for your theme name plus a feature (for example “Keystone variant images”) often surfaces a guide immediately.

## What to put in your first message

Incomplete tickets slow everything down. Include:

* **Store URL** (myshopify.com domain is fine).
* **Theme name and version** if you know it (**Online Store** > **Themes** > **…** > **Edit theme code** header, release notes, or the email receipt).
* **Whether the theme was customized** (you or a developer edited **Edit code**, or apps inject scripts). If yes, say what changed at a high level.
* **Steps to reproduce** the issue, starting from your homepage.
* **Screenshots or a short video**, especially for layout bugs on mobile.

## If you use a chat widget or AI assistant

Automated flows sometimes ask you to “create a ticket” without opening a text box clearly. Scroll the widget, look for **Message** or **Reply**, and paste the bullet list above. Sending a blank submission does not create a useful record, and the team cannot follow up.

## Grant access when support asks

If support needs to view your theme settings, use the store access process described in [Store access request](/support/store-access-request). Do not post passwords in email.

## What to expect

Response times and scope are summarized in [Contact support](/general/contact-support), including what Brickspace covers versus what requires a developer or Shopify.

## Related reading

* [Test responsive layouts without publishing the theme](broken://pages/1D7qoOKbRtxAEngEkb4L).
* [Recover from third-party theme code changes](broken://pages/hgWE4sjckHbJn7NrUSv0).
* [Support policy for modified theme code](broken://pages/OI1XiLfrx4wqTK4utzZE).
* [How third-party apps affect theme styles](broken://pages/IwYqOwtPQhZDNgtjEQgY).


# Theme comparisons

Not sure which theme to pick - take a look at our comparison chart. If you can't decide and want some more help reach out to our support team.&#x20;

Slab is not included in this comparison - head over to the [complete feature list](/slab/feature-list) to see all available features and blocks for slab.&#x20;

## Theme basics

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Lightning fast pages</strong><br>Built with performance best practices and page pre-loading when hovering over any link.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Search engine optimized</strong><br>All pages and content are built with SEO-optimized best practices. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Keyboard accessibile</strong> <br>All features and functionality can be used with keyboard navigation.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Screen reader support</strong><br>All content is accessible to screen readers for an inclusive browsing experience.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Dynamic content</strong><br>Use metafields and dynamic content inside sections and blocks.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Global shopping</strong><br>Supports Shopify Markets so customers can browse in their local language and currency.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Flexible price settings</strong><br>Remove trailing zeros and currency symbols for a simplified look.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Device specific visibility</strong><br>Customize visibility on almost every section for mobile and desktop separately.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Drag and drop sections</strong><br>Fully supports Shopify OS2.0 drag-and-drop sections.</td><td>true</td><td>true</td><td>true</td></tr></tbody></table>

## Navigation features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Multi-announcement bar</strong><br>Feature multiple promotions using the simple announcement bar.Multi-announcement bar</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Nested mega-menu</strong><br>Extensive nested navigation to show all your store's content in an easy-to-digest design.</td><td>true</td><td>false</td><td>true</td></tr><tr><td><strong>Nested drawer menu</strong><br>Multi-page drawer menu with optional content blocks to feature text, images or videos. </td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Fixed floating menu</strong><br>A minimal floating menu bar that can open the cart or menu drawers. </td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Real-time search</strong><br>Help customers find what they're looking for by displaying search results as they type.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Featured blocks</strong><br>Include additional blocks within your desktop or mobile navigation to highlight important content</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Sticky header</strong><br>Ensure your header bar is always visible.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Dynamic scroll header</strong><br>Set your header bar to be hidden while scrolling down and revealed when scrolling up.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Section group support</strong><br>Remove or inject any section to create custom layouts in your header and footer.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Always visible cart sidebar</strong><br>A sticky cart sidebar that can be expanded and collapsed giving shoppers an easy way to view their cart while browsing. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Always visible menu sidebar</strong><br>A fixed menu sidebar for easy navigation across all pages.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Search with keyboard shortcut</strong><br>Use cmd+k to instantly to start searching.</td><td>false</td><td>false</td><td>true</td></tr></tbody></table>

## Collection features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Easy filtering</strong><br>Works with Shopify's Search &#x26; Discovery app for easy setup filters.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Tag-based filtering</strong><br>Let customers filter a collection page results based on product tags.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Filter location</strong><br>Set the filter to appear as a sidebar or topbar.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Quick add</strong><br>Easily add items to your cart without navigating to a product page.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Quick add table</strong><br>Customers can quickly add many items to their cart by updating quantities in a table.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>List view</strong><br>View collection results in a list view.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Custom metafield columns</strong><br>Display additional custom metafields inside a product table.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Collection blocks</strong><br>Add content and media blocks within your collection grid.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Infinite scrolling</strong><br>Load more collection results as you scroll near the bottom of the page.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Custom product badge</strong>s<br>Display custom product badges using tags or metafields.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Sale badges</strong><br>Highlight product discounts with percent or amount sale badges. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Inventory count</strong><br>Show total product inventory count remaining when below a certain amount. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product taglines</strong><br>A short description that can be displayed under each product title. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Image cropping</strong><br>Set product images to crop to square, portrait or landscape. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Second image on hover</strong><br>Show the second product image while hovering.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Video support</strong><br>Show videos for each product card when used as the featured media or second media.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Image slider</strong><br>A slider to show multiple photos for each product card.</td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Content on hover</strong><br>Only show product card content such as the price and title while hovering. </td><td>false</td><td>true</td><td>false</td></tr></tbody></table>

## Product features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Sibling products</strong><br>Display sibling products linked as swatches.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product upsells</strong><br>Display automatic or manually selected product upsells.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product bundles</strong><br>Sell multiple items together on one product page. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Image zooming</strong><br>Get a closer look at product images with a zoomable gallery. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Multimedia gallery</strong><br>Display images, videos and 3d files in a single media gallery.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Supports app blocks</strong><br>Easily add third-party apps to your product template using app blocks.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Rich block support</strong><br>Build your own product template using any of our existing blocks like tabs, accordions and drawers. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Store pickup</strong><br>Show inventory availability and different locations. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Inventory warning</strong><br>Show a warning message when there's a limited supply of inventory left. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product customizations</strong><br>Collect product customization details like an engraving for a ring. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Related products</strong><br>Show automatic product recommendations.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Quick order table</strong><br>Show each variant in a seperate table row giving customers a quick option to add many variants at once. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Combined listing (Shopify +)</strong><br>Create and display combined listing products. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Quantity pricing (Shopify +)</strong><br>Display custom quantity pricing and volumn rules </td><td>false</td><td>false</td><td>true</td></tr></tbody></table>

## Cart and checkout features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Minimum order value</strong><br>Set a minimum cart value to unlock the checkout.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Unified cart view</strong><br>Display all cart variants grouped under each product.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Cart upsells</strong><br>Display a collection of products to upsell.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart editing</strong><br>Let customers quickly change variant options for items in their cart. E.g. swap one size for another. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Checkbox upsells</strong><br>A simple checkbox that can be used to upsell one-click upgrades such as shipping insurance or gift wrapping. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart notes</strong><br>Let customers easily add a note to their order.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Progress bar</strong><br>Showcase free shipping discount when customers spend a certain amount. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Content blocks</strong><br>Display custom content to highlight promotions or offers in your cart. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Share cart</strong><br>Let customers easily share their cart by copying and sharing a URL. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Device specific control</strong><br>Set specific cart types for mobile and desktop. E.g. show a cart alert on mobile and a cart drawer on desktop.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart drawer</strong><br>Display the cart in a slideout overlay drawer.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart alert</strong><br>Display the cart in a smaller alert overlay.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart sidebar</strong><br>Display the cart in a sticky sidebar.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Cart redirect</strong> <br>Redirect customers to the cart page.</td><td>true</td><td>true</td><td>true</td></tr></tbody></table>

## Blog features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Comments</strong><br>Let customers leave a comment on a blog post.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Easy sharing</strong> <br>Display a URL that can be easily copied to share a blog post.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Recent articles</strong><br>Show recently published blog articles to encourage further engagement.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Tag filtering</strong><br>Additonally filtering to easily show blog posts with a specific tag.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Table of contents</strong><br>Let customers easily jump to different headings in a blog post.</td><td>false</td><td>true</td><td>true</td></tr></tbody></table>

## Account features

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Sign in with Shop</strong><br>Let customers sign in with their Shop account.</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Force sign up</strong><br>When enabled the site won't be accessible unless logged into an approved account.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Approve customers with tags</strong><br>Control which customer accounts have access to view restricted content using tags. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Approve customers with B2B (Shopify +)</strong><br>Control which customer accounts have access to view restricted content by approved B2B accounts. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Placeholder settings</strong><br>Restricted content can be displayed with placeholders or be hidden. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Hide products with tags</strong><br>Products with matching tags will be hidden from customers who are not logged into approved accounts.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Hide prices with tags</strong><br>Products with matching tags will have hidden prices from customers who are not logged into approved accounts. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Hide blog posts</strong><br>Blog posts with matching tags will be hidden from custoemrs who are not logged into approved accounts.</td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Advanced account drawer</strong><br>Quick access to all account details in a slideout drawer. Easily re-order and view order history. </td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>B2B account switcher</strong><br>Let customers easily switch between different B2B locations so they can easily place orders.</td><td>false</td><td>false</td><td>true</td></tr></tbody></table>

## Sections

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Banner</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Split banner</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Search banner</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Discount banner</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Slideshow</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Video</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Countdown</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Rich text</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Collage</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Slider</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Collapsible content</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Marquee</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Icon grid</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Logo list</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Testimonials</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Testimonial grid</strong></td><td>false</td><td>true</td><td>true</td></tr><tr><td><strong>Testimonial slider</strong></td><td>false</td><td>true</td><td>true</td></tr><tr><td><strong>Email sign-up</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Image hotspot</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Image comparison</strong></td><td>true</td><td>false</td><td>false</td></tr><tr><td><strong>Tabs</strong></td><td>false</td><td>true</td><td>true</td></tr><tr><td><strong>Navigation slider</strong></td><td>true</td><td>true</td><td>false</td></tr><tr><td><strong>Navigation links</strong></td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Contact form</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Contact form</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Sign-up form</strong></td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Store locator</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product table</strong></td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Featured product</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Alternative collection grid</strong></td><td>true</td><td>true</td><td>false</td></tr><tr><td><strong>Featured collection grid</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Featured collection slider</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Collection list grid</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Collection list slider</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Blog posts grid</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product comparison</strong></td><td>false</td><td>false</td><td>true</td></tr><tr><td><strong>Comparison table</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Recently viewed</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Product list</strong></td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Block reveal</strong></td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Image reveal</strong></td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Static chat</strong></td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Text highlight</strong></td><td>false</td><td>true</td><td>false</td></tr><tr><td><strong>Custom liquid</strong></td><td>true</td><td>true</td><td>true</td></tr></tbody></table>

## Support

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Free support</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Free updates</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>1-on-1 onboarding</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Unlimited free trial</strong></td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Over $2000 of partner discounts and offers</strong></td><td>true</td><td>true</td><td>true</td></tr></tbody></table>

## Development

<table><thead><tr><th></th><th width="100" data-type="checkbox">Paper</th><th width="100" data-type="checkbox">Space</th><th width="100" data-type="checkbox">Keystone</th></tr></thead><tbody><tr><td><strong>Familiar codebase</strong><br>Built using Tailwind and Alpine for a easy jumping off point for any custom development work. </td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Custom liquid sections</strong><br>Use the custom liquid section to inject your own code or install third-party apps</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>App extension friendly</strong><br>Easily install app extensions for dynamic content without writing a single line of code</td><td>true</td><td>true</td><td>true</td></tr><tr><td><strong>Developer toolkit</strong><br>Get free access to our source code using our developer toolkits. </td><td>true</td><td>true</td><td>true</td></tr></tbody></table>


# Store access request

If you contact our support team we may ask for a collaborator access code. This will give us the ability to request access to parts of your Shopify account. With this we're able to investigate support issues much better. This is a much safer way to share account access - you'll always remain the admin and have the ability to revoke access at any time.&#x20;

## How to get a collaborator access code

To obtain a Shopify collaborator request code, go to your Shopify admin, navigate to **Settings > Users and permissions**, then scroll down to the Collaborators section and click **Generate new code**.&#x20;

Visit the Shopify help center to [learn more about Collaborator accounts](https://help.shopify.com/en/manual/your-account/staff-accounts/security/collaborator-accounts).<br>

1. From your Shopify admin, go to **Settings** > **Users**.
2. Click **Security**.
3. Click the 4-digit code to copy it to your clipboard.
4. Provide the 4-digit code to your collaborator.


# Hire a Shopify developer

## When to hire a Shopify developer <a href="#h_0170420437" id="h_0170420437"></a>

Consider hiring a Shopify developer when:

* Your theme can’t support the layout or feature you need.
* You’re running into app conflicts, bugs, or performance issues.
* You need custom sections, advanced layouts, or unique functionality.
* You want a more polished, flexible, and conversion-focused storefront.
* You have the budget and want to save time instead of figuring everything out yourself.

If you’re working with a smaller budget, start with your theme’s built-in tools and only invest in custom development when there’s a clear opportunity to improve the shopping experience.

## What we can help with <a href="#h_de1600cfc6" id="h_de1600cfc6"></a>

Our team offers three services for merchants who want help launching, improving, or growing their Shopify storefront.

#### **Storefront Launch**

Launch a polished Shopify storefront without spending weeks learning your theme, rebuilding templates, or worrying about every design decision.

* Store setup by the same team that designed and built your theme.
* A polished storefront configured around your brand and products.
* Proven layouts designed to improve product discovery, conversion, and shopping experience.

[↳ Learn more](https://brickspacelab.com/pages/services)

#### **Storefront Development**

Keep improving your Shopify storefront without hiring in-house, waiting on one-off quotes, or letting small development tasks pile up.

* Ongoing Shopify development from the team behind your theme.
* One active feature or improvement worked on at a time.
* No fixed cap on development requests during your monthly plan.

[↳ Learn more](https://brickspacelab.com/pages/services)

#### **Storefront Optimization**

Improve your Shopify storefront every week with a dedicated team handling the strategy, testing, design, and development work.

* Weekly A/B testing and implementation focused on measurable storefront improvements.
* Design, accessibility, performance, and UX audits to uncover what should be prioritized.
* Ongoing Shopify development included, so insights turn into real updates.

[↳ Learn more](https://brickspacelab.com/pages/services)

## Our development partners <a href="#h_a3f4ea6baf" id="h_a3f4ea6baf"></a>

For all other development needs we recommend working with our partners.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>TaskHusky</strong><br>Hire TaskHusky to complete customizations with their in-house development team. Contact them to get a free quote.</td><td><a href="https://www.taskhusky.com/pages/brickspace-labs">https://www.taskhusky.com/pages/brickspace-labs</a></td></tr><tr><td><strong>Storetasker</strong><br>Get paired with a Shopify freelancer in just a few hours and execute projects of any size. Pricing is per-project, starting at USD $75/hour.</td><td><a href="https://www.storetasker.com/?ref=brickspace/">https://www.storetasker.com/?ref=brickspace/</a></td></tr><tr><td><strong>Shopexperts</strong><br>Get a team of Shopify designers and developers with a stacked skillset. Pricing is by the task or by the hour with quotes starting at USD $85/hour.</td><td><a href="https://app.shopexperts.com/client/new-project?ref=brickspace-lab">https://app.shopexperts.com/client/new-project?ref=brickspace-lab</a></td></tr></tbody></table>


# Affiliate program

This is your chance to earn commission anytime your clients use one of our themes. This program is great for agencies, freelancers and other companies working directly with Shopify brands.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Apply now</td><td><a href="https://tally.so/r/3qa8V5">https://tally.so/r/3qa8V5</a></td></tr><tr><td>Submit referral</td><td><a href="https://tally.so/r/waepd2">https://tally.so/r/waepd2</a></td></tr></tbody></table>

## Benefits

* **Earn rewards** - You’ll get a $50 commission for each purchase you refer to us.
* **Get access to private Discord** - Join our private Discord for direct access to the Brickspace Lab team and other Slab developers.
* **Get exclusive discounts** - You’ll get access to our full list of third-party discounts and offers. You can share with any of your clients even if they are not a theme customers.


# Developer program

If you're a Shopify developer, freelancer or agency and want to get your hands on the Slab theme for free here's your chance. Apply to become a partner and you'll get free access to the Slab Shopify theme.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Apply now</td><td><a href="https://polar-check.vercel.app/apply">https://polar-check.vercel.app/apply</a></td></tr></tbody></table>

## Benefits

* **Free Slab access -** Use Slab for free on your development store.
* **Get access to private Discord** - Join our private Discord for direct access to the Brickspace Lab team and other Slab developers.
* **Get exclusive discounts** - You’ll get access to our full list of third-party discounts and offers. You can share with any of your clients even if they are not a theme customers.


# Design program

If you’re an ecommerce designer looking for a way to showcase your work, apply to become a design partner. You’ll get free access to the Slab Shopify theme along with demo content to help you build your preset.

You can submit presets built with any Shopify theme to Catalog. You'll earn $200 for every approved preset published. Presets created with Slab earn a higher payout of $300.

Presets should include, at minimum, a homepage, collection page, and product page design. You can browse existing presets for [inspiration and examples](https://catalog.cool/themes/slab).

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Apply now</td><td><a href="https://tally.so/r/RGVMpJ">https://tally.so/r/RGVMpJ</a></td></tr></tbody></table>

## Benefits of becoming an affiliate

* **Free Slab access -** Use Slab for free on your development store.
* **Earn rewards** - You’ll get between $200-$300 for every approved preset you publish.
* **Get exclusive discounts** - You’ll get access to our full list of third-party discounts and offers. You can share with any of your clients even if they are not a theme customers.


# Terms of service

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”, “**we**”, “**us**”, “**our**”)

**Contact:** <hello@brickspacelab.com>

These Terms of Service (“**Terms**”) govern your access to and use of:

* our websites and marketing pages at <https://brickspacelab.com> (the “**Site**”);
* our Shopify-related products and services, including the **Slab** theme and **Catalog** (together with the Site, the “**Services**”); and
* any accounts, subscriptions, or licenses you obtain from us in connection with the Services.

By accessing or using the Services, creating an account, or purchasing a subscription or license, you agree to these Terms. If you do not agree, do not use the Services.

Additional terms may apply to specific products (for example, software license agreements for Slab and Catalog). If there is a conflict between those product-specific terms and these Terms on a point they expressly cover, the product-specific terms control for that product.

***

## 1. Who may use the Services

You may use the Services only if you:

* are at least the age of majority in your jurisdiction (18 in Ontario);
* have authority to bind yourself or the organization you represent; and
* comply with these Terms and applicable law.

If you use the Services on behalf of a company or other entity, you represent that you have authority to accept these Terms on its behalf.

***

## 2. Accounts and eligibility

You may need an account to access certain Services. You agree to provide accurate information and keep it current. You are responsible for safeguarding credentials and for activity under your account.

We may suspend or terminate accounts that violate these Terms, our **Acceptable use policy**, or applicable law, or that present security or abuse risk.

***

## 3. Orders, subscriptions, billing, and taxes

**3.1 Fees.** Paid Services are offered on the terms displayed at checkout or in your order (including price, billing cycle, and renewal). You authorize us and our payment processors (for example, Stripe and, where applicable, Shopify’s billing mechanisms) to charge your chosen payment method.

**3.2 Taxes.** Fees are exclusive of applicable taxes unless stated otherwise. You are responsible for taxes imposed on your purchase other than taxes based on our net income.

**3.3 Renewals.** Unless otherwise stated at purchase, subscriptions renew automatically for successive periods equal to the initial term until you cancel in accordance with our [**Refund and cancellation policy**](/legal/refund-cancellation-policy).

**3.4 Payment failures.** We may suspend access to paid features if payment fails until payment succeeds or the subscription is cancelled.

***

## 4. License to software (Slab and Catalog)

Your rights to use Slab, Catalog, and related software are governed by the applicable **Software license agreement**:

* [Software license agreement — Slab](/legal/software-license-slab)
* [Software license agreement — Catalog](/legal/software-license-catalog)

Those agreements explain scope (including per-store or account limits), restrictions, ownership, and what happens on termination. Your purchase or installation does not transfer ownership of the software to you.

***

## 5. Acceptable use

You agree to comply with our [**Acceptable use policy**](/legal/acceptable-use-policy), which is incorporated into these Terms by reference. Among other things, you must not misuse the Services, interfere with other users, attempt unauthorized access, scrape or resell access contrary to your agreements, or use the Services for unlawful storefront activity.

***

## 6. Third-party services (including Shopify)

The Services integrate with or depend on third-party platforms and tools (including **Shopify**, payment processors, hosting providers, and analytics). Your use of those third-party services is subject to their terms and policies. We do not control Shopify or other platforms and are not responsible for their availability, policies, or actions.

If you participate in Shopify’s partner or app ecosystems, you remain responsible for complying with **Shopify’s Partner Agreement**, Theme Store requirements, API terms, and other Shopify policies that apply to merchants and partners.

***

## 7. Intellectual property

**7.1 Our IP.** The Services, including software, documentation, branding, and our preset libraries and templates (subject to your rights in your own content), are owned by Brickspace Lab or our licensors and are protected by intellectual property laws.

**7.2 Your content.** You retain ownership of content you provide (for example, store content, uploads, and configurations). You grant us a limited license to host, process, and display that content as needed to provide the Services and support you.

**7.3 Feedback.** If you provide suggestions or feedback about the Services, we may use them without obligation to you.

***

## 8. Confidentiality

If we provide non-public information under an NDA or as marked confidential, you will protect it and use it only as permitted. Standard Service functionality and marketing materials are not confidential unless expressly stated.

***

## 9. Privacy

Our [**Privacy policy**](/legal/privacy-policy) describes how we collect, use, and disclose personal information in connection with the Services. By using the Services, you acknowledge that practice.

***

## 10. Disclaimers

**To the fullest extent permitted by applicable law**, the Services are provided **“as is”** and **“as available”** without warranties of any kind, whether express, implied, or statutory, including implied warranties of merchantability, fitness for a particular purpose, title, and non-infringement.

We do not warrant that the Services will be uninterrupted, error-free, or free of harmful components, or that defects will be corrected. You use Shopify themes, apps, and storefront configurations at your own risk as to compatibility, performance, and compliance with law in your jurisdiction.

Some jurisdictions do not allow certain disclaimers; in those jurisdictions, disclaimers apply to the maximum extent permitted.

***

## 11. Limitation of liability

**To the fullest extent permitted by applicable law:**

**11.1 Cap.** Brickspace Lab’s total aggregate liability arising out of or relating to the Services or these Terms will not exceed **the greater of (a) the amounts you paid to Brickspace Lab for the Services in the twelve (12) months before the claim arose, or (b) one hundred Canadian dollars (CAD $100)** if you had no fees in that period.

**11.2 Excluded damages.** In no event will Brickspace Lab be liable for any indirect, incidental, special, consequential, exemplary, or punitive damages, or for lost profits, revenues, data, or goodwill, whether or not advised of the possibility of such damages.

**11.3 Basis.** The limitations apply regardless of theory (contract, tort, negligence, strict liability, or otherwise) and even if a limited remedy fails of its essential purpose.

If applicable law does not permit certain limitations, they apply to the maximum extent permitted.

***

## 12. Indemnity

You will defend, indemnify, and hold harmless Brickspace Lab and its directors, officers, employees, and contractors from claims, damages, losses, and expenses (including reasonable legal fees) arising out of: (a) your content or storefront; (b) your breach of these Terms or applicable law; or (c) your misuse of the Services or third-party integrations.

***

## 13. Suspension and termination

We may suspend or terminate access to the Services if you materially breach these Terms, create risk or legal exposure for us, or if we discontinue a Service with reasonable notice where practicable.

Upon termination, rights granted to you cease except those that by nature should survive. Sections that by their nature should survive (including intellectual property, disclaimers, limitation of liability, indemnity, governing law, and disputes) survive termination.

Details regarding refunds and data on cancellation are in our [**Refund and cancellation policy**](/legal/refund-cancellation-policy).

***

## 14. Changes to the Services or Terms

We may modify the Services or these Terms. For material changes to the Terms, we will provide notice by posting an updated version on the Site or by email where appropriate and updating the “Last updated” date. Continued use after the effective date constitutes acceptance of the revised Terms, except where prohibited by law.

***

## 15. Governing law and disputes

These Terms are governed by the **laws of the Province of Ontario** and the **federal laws of Canada** applicable therein, without regard to conflict-of-law rules.

Except where prohibited by applicable consumer protection law, the courts located in **Toronto, Ontario** have exclusive jurisdiction over disputes arising from these Terms or the Services. You consent to that venue. **Before filing a claim**, the parties agree to attempt in good faith to resolve disputes informally by contacting <hello@brickspacelab.com> for at least thirty (30) days.

If you are a consumer in a jurisdiction that gives you a non-waivable right to sue in local courts or to invoke mandatory local protections, those rights remain available to the extent required by law.

***

## 16. General

**16.1 Entire agreement.** These Terms, together with the policies and product licenses linked or incorporated here, constitute the entire agreement between you and Brickspace Lab regarding the Services.

**16.2 Assignment.** You may not assign these Terms without our consent. We may assign them in connection with a merger, acquisition, or sale of assets.

**16.3 No waiver.** Failure to enforce a provision is not a waiver.

**16.4 Severability.** If a provision is invalid, the remainder remains in effect.

**16.5 Language.** The English version governs if there is a conflict with translations.

***

## 17. Contact

Questions about these Terms: **<hello@brickspacelab.com>**

Registered address:

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528


# Privacy policy

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”, “**we**”, “**us**”)

**Contact (privacy inquiries):** <hello@brickspacelab.com>

This Privacy Policy describes how Brickspace Lab collects, uses, discloses, and retains personal information in connection with our websites (<https://brickspacelab.com>), our products (**Slab**, **Catalog**), and related support and sales activities (collectively, the “**Services**”).

This policy is designed to align with Canada’s **Personal Information Protection and Electronic Documents Act** (**PIPEDA**) and applicable provincial requirements. If you are in the European Economic Area or UK, additional rights may apply under GDPR; see **Section 10**.

***

## 1. Who this policy applies to

This policy applies to:

* **Visitors** to our Site;
* **Customers** who purchase or subscribe to our Services; and
* **Authorized users** of accounts associated with our Services (for example, staff on a merchant’s team).

If you do not agree with this policy, please do not use the Services.

***

## 2. Personal information we collect

The personal information we collect depends on how you interact with us. It may include:

| Category                       | Examples                                                                                                                                                         |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Identity and contact**       | Name, email address, company name, role                                                                                                                          |
| **Account and authentication** | Account identifiers, login metadata, session data                                                                                                                |
| **Billing and transaction**    | Billing address, payment transaction IDs (payment card data is handled by our payment processors, not stored by us except as needed for receipts and accounting) |
| **Support and communications** | Messages you send us, support tickets, call or chat logs                                                                                                         |
| **Usage and technical**        | IP address, device/browser type, approximate location derived from IP, pages viewed, referring URLs, timestamps, diagnostics and error logs                      |
| **Product-specific**           | Store identifiers or Shopify-related IDs needed to deliver Slab/Catalog, configuration data, and usage tied to your subscription                                 |

We collect personal information **directly from you**, **automatically** when you use the Site or Services, and **from third parties** such as Shopify or payment processors where you connect accounts or complete purchases.

***

## 3. Purposes for collection and use

We use personal information for purposes that include:

* Providing, operating, securing, and improving the Services;
* Creating and managing accounts; authenticating users;
* Processing payments and fulfilling subscriptions or licenses;
* Customer support and responding to inquiries;
* Sending transactional messages (receipts, security notices, legal updates);
* **Marketing**, where permitted—such as product updates or newsletters if you opt in or where soft opt-in applies under law;
* Analytics and product analytics to understand usage and improve performance and UX;
* Detecting and preventing fraud, abuse, and security incidents;
* Complying with legal obligations and enforcing our terms;
* Aggregating or de-identifying information so it no longer identifies you.

We limit collection to what is reasonable for these purposes.

***

## 4. Legal bases (where GDPR applies)

Where GDPR applies, we rely on one or more of: **performance of a contract**; **legitimate interests** (such as securing our Services and understanding aggregate usage), balanced against your rights; **consent** (where required—for example, certain marketing or non-essential cookies); and **legal obligation**.

***

## 5. Disclosure and subprocessors

We may disclose personal information:

* **Service providers** who assist us under contractual safeguards—including **Google LLC** (Google Analytics), **Meta Platforms, Inc.** (advertising and analytics pixels), **Shopify Inc.** (commerce platform, Shopify Payments, storefront hosting, analytics, and related services), **Intercom, Inc.** (customer messaging and support), **GitBook** (documentation hosting), **Vercel** (API infrastructure used for marketing forms), and other providers we use for hosting, email delivery, payment processing, analytics, customer support tooling, and error monitoring;
* **Shopify** and ecosystem partners, as needed to deliver integrations you enable;
* **Professional advisers** (lawyers, accountants) under confidentiality;
* **Authorities** when required by law or to protect rights, safety, and security; and
* **Business transfers** in a merger, financing, or sale of assets, subject to appropriate protections.

We do not sell your personal information as a standalone commercial asset. We may use advertising or analytics tools that process personal data as described in their policies; see **Section 9 (Cookies)**.

A current list of material subprocessors is available **on request**—email **<hello@brickspacelab.com>** with “Subprocessors list” in the subject. We may publish an updated list on our website from time to time.

***

## 6. International transfers

We may process or store information in **Canada**, the **United States**, or other countries where we or our service providers operate. Where required, we use appropriate safeguards (for example, contractual clauses) for cross-border transfers.

***

## 7. Retention

We retain personal information only as long as necessary for the purposes above, including legal, accounting, and dispute-resolution needs. Factors include:

* the duration of your account or contract;
* statutory limitation periods;
* security and fraud monitoring; and
* anonymization where feasible.

When retention ends, we delete or de-identify information subject to limited exceptions (for example, backups until overwritten).

***

## 8. Security

We implement reasonable technical and organizational measures appropriate to the sensitivity of the information we handle. No method of transmission or storage is completely secure; we cannot guarantee absolute security.

***

## 9. Cookies and similar technologies

We use cookies and similar technologies for essential functionality, preferences, analytics, and (if enabled) marketing. For details and choices, see our [**Cookie and consent guidance**](/legal/cookie-consent).

Where PIPEDA or other law requires consent for non-essential cookies, we obtain consent through our banner or settings before loading those technologies.

***

## 10. Your rights (access, correction, deletion)

**Under PIPEDA**, you have the right to request access to your personal information and to challenge its accuracy and completeness. You may request correction where information is inaccurate.

You may also ask us to **delete** personal information we hold about you, subject to legal exceptions (for example, records we must retain for tax or dispute purposes).

**Requests:** Email **<hello@brickspacelab.com>** with “Privacy request” in the subject. We may verify your identity before responding. We will respond within **30 days** where PIPEDA applies, unless an extension is permitted.

**Where GDPR applies**, you may also have rights to object, restrict processing, data portability, and to withdraw consent where processing is consent-based. You may lodge a complaint with a supervisory authority.

***

## 11. Children

The Services are not directed to children under the age of majority. We do not knowingly collect personal information from children. If you believe we have, contact us and we will delete it.

***

## 12. Automated decision-making

We do not use automated decision-making that produces legal or similarly significant effects solely based on automated processing.

***

## 13. Changes to this policy

We may update this Privacy Policy from time to time. We will post the revised version on the Site and update the “Last updated” date. For material changes, we may provide additional notice (for example, email or in-product notice).

***

## 14. Contact and complaints

**Brickspace Lab — Privacy**\
Email: **<hello@brickspacelab.com>**\
Address:

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528

If you are not satisfied with our response, you may contact the **Office of the Privacy Commissioner of Canada** (OPC) at <https://www.priv.gc.ca>.


# Software license — Slab

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”, “**Licensor**”)

**Product:** **Slab** — a Shopify Online Store theme and related updates, documentation, and support offerings made available by Brickspace Lab (“**Slab**”).

This Software License Agreement (“**Agreement**”) is between Brickspace Lab and you (“**Licensee**”). It governs your license to install and use Slab subject to Shopify’s platform rules and your purchase terms.

By purchasing, downloading, installing, or using Slab, you agree to this Agreement. If you use Slab on behalf of an organization, you bind that organization.

***

## 1. License grant

Subject to payment of applicable fees (where required) and ongoing compliance with this Agreement and Shopify’s terms:

**1.1 Limited license.** Licensor grants Licensee a **non-exclusive, non-transferable, revocable** license to use Slab **only** in object code form **for a single Shopify store** (or the number of stores expressly stated at purchase) that Licensee owns or lawfully operates.

**1.2 Updates.** Licensor may provide updates, patches, or new versions. Unless stated otherwise, they are licensed under this Agreement and may replace earlier versions.

**1.3 Documentation.** Licensee may reproduce reasonable portions of documentation solely for internal use in connection with Slab.

***

## 2. Restrictions

Licensee must **not**:

* copy Slab except as necessary for installation and backup on Licensee’s systems;
* reverse engineer, decompile, disassemble, or attempt to derive source code from Slab, except where mandatory law permits;
* circumvent technical limits, licensing checks, or entitlement mechanisms;
* rent, lease, sublicense, sell, redistribute, or transfer Slab or rights under this Agreement **except** as Shopify’s Theme Store or partner policies expressly allow (for example, legitimate assignment when transferring a store);
* use Slab to build a competing theme marketplace or to train machine learning models on Licensor’s proprietary assets without written consent;
* remove or alter proprietary notices or branding embedded in Slab by Licensor;
* use Slab in violation of law, Shopify policies, or Licensor’s [**Acceptable use policy**](/legal/acceptable-use-policy).

***

## 3. Shopify dependency

Slab operates within **Shopify’s Online Store** environment. Licensee’s use of Shopify is governed by **Shopify’s terms**. Licensor does not control Shopify and is not responsible for Shopify APIs, checkout, availability, or policy changes.

***

## 4. Ownership

**4.1 Licensor IP.** Slab, including code, designs (excluding Licensee content), preset configurations shipped with Slab as Licensor assets, documentation, trademarks, and updates, is owned by Licensor or its licensors.

**4.2 Licensee content and configurations.** Licensee retains ownership of **Licensee’s own** storefront content, products, media, and merchant-specific settings **entered through** Slab or Shopify’s editor. Licensee grants Licensor a limited license to process such content only as needed to provide the Services.

**4.3 Presets and customizations.** Configurations, JSON or theme settings, and merchant-created presets **built using Slab’s intended customization tools** remain Licensee’s responsibility as to content; they do not grant Licensee ownership of Slab’s underlying software or Licensor’s stock preset library assets. Licensee may not claim ownership of Licensor’s codebase or resell Slab’s proprietary starter assets as standalone products.

***

## 5. Third-party components

Slab may include third-party open-source or licensed components subject to their respective notices. Licensor provides attribution where required.

***

## 6. Support and SLA

Support scope, channels, and response targets are as described on **<https://brickspacelab.com>** or in your order. Unless expressly stated in writing, **there is no uptime SLA** for Shopify-hosted storefront rendering; Shopify operates hosting.

***

## 7. Term and termination

**7.1 Term.** This Agreement begins when Licensee first obtains Slab and continues until terminated.

**7.2 Termination by Licensor.** Licensor may suspend or terminate Slab license rights if Licensee materially breaches this Agreement or Shopify terms, fails to pay fees (if applicable), or creates legal or security risk.

**7.3 Effect.** Upon termination, Licensee must cease use of Slab except as Shopify allows for merchants transitioning themes. Sections intended to survive (ownership, disclaimers, limitation of liability, governing law) survive.

***

## 8. Disclaimers

**TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW**, SLAB IS PROVIDED **“AS IS”** WITHOUT WARRANTIES OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.

***

## 9. Limitation of liability

**TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW:**

**9.1 Cap.** LICENSOR’S TOTAL LIABILITY UNDER THIS AGREEMENT WILL NOT EXCEED **THE AMOUNTS LICENSEE PAID TO LICENSOR FOR SLAB IN THE TWELVE (12) MONTHS BEFORE THE CLAIM**, OR **CAD $100** IF NO FEES APPLIED IN THAT PERIOD.

**9.2 Excluded damages.** LICENSOR IS NOT LIABLE FOR INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR LOST PROFITS OR DATA.

***

## 10. Export and sanctions

Licensee represents that it is not barred from receiving Slab under export control or sanctions laws. Licensee will comply with applicable export laws.

***

## 11. Governing law

This Agreement is governed by the **laws of Ontario and Canada**, without regard to conflict-of-law principles. Subject to mandatory consumer protections, courts in **Toronto, Ontario** have jurisdiction.

***

## 12. Entire agreement; precedence

This Agreement, together with Licensor’s [**Terms of service**](/legal/terms-of-service) and [**Refund and cancellation policy**](/legal/refund-cancellation-policy) where incorporated by reference, is the entire agreement regarding Slab’s license. If the Terms of Service conflict with this Agreement on license scope for Slab, **this Agreement controls** for Slab-specific licensing topics.

***

## 13. Contact

**<hello@brickspacelab.com>**

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528


# Software license — Catalog

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”, “**Licensor**”)

**Product:** **Catalog** — Brickspace Lab’s preset library, configuration tools, synchronization features, and related services for Shopify merchants (together, “**Catalog**”). Features may include third-party or community presets subject to separate notices.

This Software License Agreement (“**Agreement**”) governs your access to and use of Catalog. By subscribing, installing, connecting Catalog to a store, or using related APIs or developer tools we provide, you (“**Licensee**”) agree to this Agreement.

***

## 1. License grant

**1.1 Limited subscription license.** Subject to payment and compliance with this Agreement, Licensor grants Licensee a **non-exclusive, non-transferable** license to access and use Catalog **for Licensee’s own Shopify stores and accounts** identified at signup or checkout, in accordance with plan limits (stores, seats, API quotas).

**1.2 Account-based access.** Catalog is licensed **per account/subscription**, not per universe of unrelated third parties. Team members authorized by Licensee may use Catalog solely on Licensee’s behalf.

**1.3 Updates.** Licensor may update Catalog; continued use after notice may constitute acceptance of material changes where permitted by law.

**1.4 APIs and developer tools.** If Licensor provides APIs, CLI tools, or developer sandboxes, Licensee may use them only under this Agreement, our [**Acceptable use policy**](/legal/acceptable-use-policy), documented rate limits, and any separate developer terms we publish.

***

## 2. Third-party and community presets

**2.1 Layers of content.** Catalog may include:

* **Licensor presets** — owned or licensed by Brickspace Lab;
* **Community or third-party presets** — created by independent creators, possibly under separate license terms displayed at download or in-product.

**2.2 Compliance.** Licensee is responsible for reviewing and complying with any third-party license or attribution requirements for presets Licensee installs or distributes into stores.

**2.3 No endorsement.** Presence of a preset in Catalog does not constitute Licensor’s endorsement of the creator’s business or legal compliance of their storefront.

***

## 3. Restrictions

Licensee must **not**:

* share seats, credentials, or API tokens outside Licensee’s authorized team;
* use Catalog to scrape, bulk-export, or replicate Licensor’s proprietary preset library for competing services;
* reverse engineer or circumvent technical protection of Catalog except where mandatory law permits;
* resell, white-label, or **offer Catalog access as a standalone service** to unrelated merchants **without** a written reseller or partner agreement with Licensor;
* use Catalog in connection with unlawful goods or services, or to violate Shopify’s policies;
* exceed rate limits, abuse APIs, or interfere with other customers’ use;
* misrepresent affiliation with Brickspace Lab or Catalog creators.

***

## 4. Ownership and IP

**4.1 Licensor IP.** Catalog software, branding, documentation, and Licensor-owned preset assets remain Licensor’s property.

**4.2 Licensee and creator content.** Presets, configurations, or media **created by Licensee** using Catalog’s tools remain Licensee’s, subject to:

* Licensor’s underlying IP in the application (Licensee does not receive ownership of Catalog’s code); and
* any third-party rights in templates or assets Licensee incorporates.

**4.3 Community presets.** Creators may retain copyright in their original preset designs **where** they have not assigned those rights to Licensor; such presets are licensed to end merchants under the terms presented in Catalog or the creator’s license. Licensor may host and distribute such presets as agreed with creators.

**4.4 Feedback.** Licensee grants Licensor a perpetual, royalty-free license to use feedback for improvement without obligation.

***

## 5. Git sync and integrations

If Catalog includes repository sync or similar features, Licensee authorizes Licensor to access connected repositories **only as configured** by Licensee and as described in our Privacy Policy. Licensee remains responsible for secrets, tokens, and compliance with Git host terms.

***

## 6. Confidentiality

Non-public documentation, roadmap materials under NDA, or beta features marked confidential must be kept confidential unless publicly released.

***

## 7. Term, suspension, termination

**7.1 Term.** This Agreement runs for the subscription period purchased.

**7.2 Suspension.** Licensor may suspend access for non-payment, breach, security incidents, or legal process.

**7.3 Effect on termination.** Upon expiry or termination, Licensee’s right to use Catalog ends. Export features (if any) may be available for a limited window as stated in-product or in our [**Refund and cancellation policy**](/legal/refund-cancellation-policy). Licensor may delete hosted data after that period subject to law and our Privacy Policy.

***

## 8. Disclaimers

**TO THE MAXIMUM EXTENT PERMITTED BY LAW**, CATALOG IS PROVIDED **“AS IS”**. LICENSOR DISCLAIMS IMPLIED WARRANTIES INCLUDING MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

***

## 9. Limitation of liability

**TO THE MAXIMUM EXTENT PERMITTED BY LAW:**

**9.1 Cap.** LICENSOR’S TOTAL LIABILITY WILL NOT EXCEED **THE FEES LICENSEE PAID FOR CATALOG IN THE TWELVE (12) MONTHS BEFORE THE CLAIM**, OR **CAD $100** IF NONE.

**9.2 Excluded damages.** NO LIABILITY FOR INDIRECT, CONSEQUENTIAL, OR LOST PROFITS.

***

## 10. Governing law

This Agreement is governed by **Ontario and Canadian federal law**. Courts in **Toronto, Ontario** have jurisdiction, subject to non-waivable consumer rights.

***

## 11. Entire agreement

This Agreement supplements Licensor’s [**Terms of service**](/legal/terms-of-service). For Catalog-specific licensing, **this Agreement controls** where expressly stated.

***

## 12. Contact

**<hello@brickspacelab.com>**

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528


# Refund and cancellation

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”)

**Contact:** <hello@brickspacelab.com>

This policy describes how **billing**, **renewals**, **cancellations**, and **refunds** work for Brickspace Lab’s subscription and digital products (**Slab**, **Catalog**, and related Services). Please read it **before** purchase.

Brickspace Lab is located in **Ontario, Canada**. Consumer protection laws may give you rights that cannot be waived; where this policy conflicts with mandatory law, **mandatory law applies**.

***

## 1. Subscription billing cycles

**1.1 Period.** Paid subscriptions are billed on the cycle shown at checkout (for example, monthly or annually).

**1.2 Automatic renewal.** Unless otherwise stated at purchase or disabled where the platform allows, subscriptions **renew automatically** at the end of each billing period at the then-current rate until you cancel.

**1.3 Price changes.** We may change prices with reasonable advance notice where required by law. Continued use after the effective date may constitute acceptance.

***

## 2. How to cancel

**2.1 Self-service.** Where available, cancel through your account dashboard, billing portal (for example, Stripe Customer Portal), **Shopify’s subscription management** for app charges, or Theme Store mechanisms—depending on how you purchased.

**2.2 Email.** If you cannot cancel in-product, email **<hello@brickspacelab.com>** from your account email with “Cancellation” in the subject.

**2.3 Timing.** Cancellation **stops future renewals**. It does **not** erase amounts already charged for the current period unless **Section 4** applies.

***

## 3. What happens when you cancel

**3.1 Access.** You typically retain access through the **end of the paid period**. After that, paid features may be disabled according to the product (for example, Catalog subscription features or entitlement-linked theme updates).

**3.2 Data.** We may delete or de-identify hosted data associated with your account after a reasonable retention window, as described in our [**Privacy policy**](/legal/privacy-policy). Export any data you need **before** cancellation if the product offers export.

**3.3 Shopify themes.** Theme licenses obtained through Shopify may be subject to **Shopify’s policies** regarding transfers and uninstallation. Our obligations track your valid entitlement and Shopify’s records.

***

## 4. Refunds

**4.1 General rule — subscriptions (Catalog and recurring SaaS).** Fees for subscription periods **already started or completed** are generally **non-refundable**, except:

* where **mandatory law** requires a refund;
* where we **fail to provide** the Service materially as described and do not remediate within a reasonable period; or
* where we **authorize** a refund at our discretion (for example, duplicate charges or billing errors).

**4.2 Annual prepayment.** If you prepaid for an annual term, **partial refunds for unused months are generally not provided** unless required by law or expressly stated at purchase. Some jurisdictions require pro-rated refunds in specific cancellation scenarios—**we comply with those requirements**.

**4.3 Theme Store / Shopify billing.** Purchases processed by **Shopify** may follow **Shopify’s refund windows and policies** for themes or apps. Where Shopify’s rules apply, they may supersede this section for the payment rail—check your receipt and Shopify’s documentation.

**4.4 Chargebacks.** Contact us before initiating a chargeback so we can investigate billing errors. Abusive chargebacks may result in account closure.

***

## 5. Trials and promotional credits

If we offer a **free trial**, conversion to paid may occur automatically unless you cancel before the trial ends—see the signup screen. **Promotional credits** have no cash value unless stated.

***

## 6. Failed payments

If payment fails, we may retry charges as permitted by our processor and suspend Services until payment succeeds or the subscription is cancelled.

***

## 7. Business purchases

If you purchase on behalf of a business, you confirm that the purchase is **not** a consumer transaction where that affects statutory cooling-off rights; **business purchasers** should rely on this policy and their agreement with us.

***

## 8. Contact

Billing questions: **<hello@brickspacelab.com>**\
Address:

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528


# Cookies and consent

**Priority:** secondary operational/legal UX — implement with a consent management platform (CMP) such as Cookiebot, Osano, OneTrust, or similar if you use non-essential cookies or trackers.

**Last updated:** April 29, 2026

This page supports implementation of a **cookie banner** consistent with **PIPEDA** (meaningful consent for non-essential tracking where required) and **GDPR** for visitors from the EEA/UK. It is **not** a substitute for configuring your CMP correctly or listing every cookie your stack sets.

***

## 1. Suggested banner copy (English)

Use variants as needed (short vs. detailed link).

### Short notice

> We use cookies and similar technologies to run our site, remember preferences, and measure traffic. By clicking **Accept all**, you agree to non-essential analytics as described in our Cookie notice and [Privacy policy](/legal/privacy-policy). You can change your choices anytime via **Cookie settings**.

Buttons: **Accept all** · **Reject non-essential** · **Cookie settings**

### Longer notice (expandable)

> **Cookies.** We use cookies that are essential for security and basic functionality. With your consent, we also use analytics and marketing pixels to understand how our Site is used. Third-party providers may process data per their policies—for example **Google Analytics**, **Meta** (Facebook pixel), and tools loaded via **Shopify Web Pixels**.\
> **Your choices.** Essential cookies cannot be turned off here. You may accept or reject non-essential cookies. You can withdraw consent later.\
> See our [Privacy policy](/legal/privacy-policy) for retention and rights.

***

## 2. Categories to disclose in “Cookie settings”

| Category               | Purpose                                            | Typical examples                       |
| ---------------------- | -------------------------------------------------- | -------------------------------------- |
| **Strictly necessary** | Security, load balancing, consent storage, session | Auth cookies, CSRF, CMP consent string |
| **Functional**         | Remember preferences (language, region)            | Preference cookies                     |
| **Analytics**          | Measure visits, funnels, errors                    | GA4, Plausible, etc.                   |
| **Marketing**          | Attribution, remarketing                           | Ads pixels — **only if used**          |

***

## 3. Implementation checklist

* [ ] Inventory scripts (tag manager, embedded chat, analytics, video embeds).
* [ ] Block non-essential scripts until consent (CMP default **deny** where required).
* [ ] Link to [**Privacy policy**](/legal/privacy-policy) and optional dedicated cookie list page at <https://brickspacelab.com/cookies>.
* [ ] Log consent versions for GDPR accountability if EU traffic is realistic.
* [ ] Refresh inventory when adding tools (new analytics, heatmaps, CRM embeds).

***

## 4. Do Not Track

Browsers’ “Do Not Track” signals are **not** uniformly standardized. Describe your approach in the Privacy Policy (many sites state they **do not respond** to DNT but offer CMP controls).

***

## 5. Shopify storefront vs marketing site

Cookie rules apply to **your marketing website**. **Shopify storefronts** used by merchants have **their own** merchant obligations (merchant is often controller). Clarify roles: Brickspace Lab’s Site vs merchants’ stores.

***

## Contact

**<hello@brickspacelab.com>**


# Acceptable use policy

**Last updated:** April 29, 2026

**Legal entity:** Brickspace Lab Inc. (“**Brickspace Lab**”)

This Acceptable Use Policy (“**AUP**”) applies to all users of Brickspace Lab’s websites, products, and services, including **Slab**, **Catalog**, APIs, developer tools, and support channels (the “**Services**”). It is incorporated into our [**Terms of service**](/legal/terms-of-service).

We may suspend or terminate access for violations.

***

## 1. Lawful use only

You may use the Services **only** in compliance with applicable laws and regulations, including those governing ecommerce, consumer protection, sanctions, export controls, intellectual property, privacy, and anti-spam.

You must **not** use the Services:

* to sell or promote **illegal** goods or services;
* to facilitate fraud, phishing, malware, or deceptive practices;
* to infringe others’ intellectual property or privacy rights; or
* to circumvent regional restrictions or sanctions.

***

## 2. Shopify ecosystem compliance

You must comply with **Shopify’s Acceptable Use Policy**, **Terms of Service**, **Partner Program** rules (if applicable), **API license terms**, Theme Store rules, and checkout restrictions. We may take action if your use exposes Brickspace Lab to breach of Shopify’s policies.

***

## 3. Accounts, access, and resale

You must **not**:

* share credentials or multi-factor authentication factors outside your authorized team;
* purchase access for the purpose of **reselling** seats or tokens **without** a written partnership agreement with Brickspace Lab;
* probe, scan, or test our systems without authorization (**no** unauthorized penetration testing);
* circumvent authentication, licensing, or entitlement checks.

***

## 4. APIs, automation, and developer tools

Where Catalog or other Services expose APIs or CLIs:

* respect **documented rate limits** and quotas;
* do not **overload**, **scrape**, or **mirror** our proprietary libraries or admin interfaces to replicate Catalog’s commercial offering;
* do not distribute API keys or tokens in public repositories or client-side code beyond what documentation permits;
* follow security disclosure practices if you discover vulnerabilities (**contact <hello@brickspacelab.com>**).

***

## 5. Content and storefront responsibility

You are responsible for **your** storefront content (products, descriptions, images, claims). Brickspace Lab does not pre-screen merchant content. We may cooperate with lawful requests from authorities or Shopify.

***

## 6. Abuse of support

You must **not** harass staff, submit fraudulent tickets, or misuse emergency channels. Reasonable use of support is expected per fair use stated on **<https://brickspacelab.com>**.

***

## 7. Competitive misuse

You must **not** use the Services to build or train a **directly competing** theme marketplace, preset marketplace, or developer tooling that reproduces Brickspace Lab’s proprietary assets or datasets, except as permitted by law.

***

## 8. Enforcement

We may investigate suspected violations, remove content we are legally required to remove, suspend accounts, terminate Services, and cooperate with law enforcement where appropriate.

***

## 9. Reporting

Report violations or security concerns to **<hello@brickspacelab.com>** with “AUP report” in the subject.

***

## 10. Changes

We may update this AUP; continued use after posting changes constitutes acceptance where permitted by law.

***

**<hello@brickspacelab.com>**

121 Mississaga Street East\
Orillia, Ontario L3V 1V6\
Canada

Tel. 705-259-7528


# Paper

<button type="button" class="button primary" data-action="ask" data-icon="gitbook-assistant">Ask a question…</button>

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

## Helpful links

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Getting started</td><td><a href="/pages/lPNg4ygjs6poFjkr3NPF">/pages/lPNg4ygjs6poFjkr3NPF</a></td></tr><tr><td>Guides</td><td><a href="/pages/wt4kkAOXBWkTGudC3Q9w">/pages/wt4kkAOXBWkTGudC3Q9w</a></td></tr><tr><td>Sections</td><td><a href="/pages/A6AJ4vtLGFHJCHoB7TP0">/pages/A6AJ4vtLGFHJCHoB7TP0</a></td></tr><tr><td>Common issues</td><td><a href="/pages/vq77y95h7NyTjRULCjEj">/pages/vq77y95h7NyTjRULCjEj</a></td></tr></tbody></table>

## Updates

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Changelog</td><td><a href="/pages/Kv0iiueW8oXPbQy2wOJg">/pages/Kv0iiueW8oXPbQy2wOJg</a></td></tr></tbody></table>

## Get support <a href="#get-support" id="get-support"></a>

Email support is available Monday to Friday with a typical 3-day response time.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Contact support</td><td><a href="/spaces/TnJCyRVLdtKs6ZCDLXr1/pages/YG06LNDFlIQrOtPuh7gU">/spaces/TnJCyRVLdtKs6ZCDLXr1/pages/YG06LNDFlIQrOtPuh7gU</a></td></tr></tbody></table>


# Changelog

{% updates format="full" %}
{% update date="2026-05-20" tags="8.1.3" %}

## 8.1.3 Variant media, subscribe script, and developer tooling

**Improvements**

* Updated the design-mode subscribe script to send paper\_version in merchant data
* Updated rules, commands, and skills for agent and theme development workflows

**Fixes**

* Fixed variant media order when a product has a duplicate video
  {% endupdate %}

{% update date="2026-02-27" tags="8.1.2" %}

## 8.1.2 Cart note handling fixes

**Fixes**

* Fixed cart note handling, including special-character/script issues and note toggle clearing behavior
  {% endupdate %}

{% update date="2025-12-12" tags="8.1.1" %}

## 8.1.1 Product template, currency, and footer fixes

**Fixes**

* Fixed an issue where the "Learn more" link inside the product template didn't work correctly in the theme editor
* Adjusted the currency meta tag to behave correctly across multi-market stores, improving compatibility with region-specific pricing and SEO expectations
* Resolved a bug where the newsletter logo in the footer failed to appear on mobile devices
  {% endupdate %}

{% update date="2025-09-29" tags="8.1.0" %}

## 8.1.0 High-variant product support and bug fixes

**Improvements**

* Improved support for high-variant products — merchants can uncheck "Enable default variant" and force users to pick their options even on high-variant products with over 250 variants

**Fixes**

* Fixed background color settings for video section
* Fixed header bar using wrong text capitalization
* Fixed menu items not highlighting parent heading
* Fixed broken layout when returning to a paginated collection page
* Fixed cart not displaying products when using specific apps
* Fixed videos not displaying within fullscreen gallery
* Fixed text capitalization setting not being applied to headings
* Fixed minor issues with combined listing products
  {% endupdate %}

{% update date="2025-09-05" tags="8.0.5" %}

## 8.0.5 Template installation fixes

**Fixes**

* Fixed broken default settings preventing all section files from importing on installation
  {% endupdate %}

{% update date="2025-08-05" tags="8.0.4" %}

## 8.0.4 Listing preset defaults fix

**Fixes**

* Fixed broken default settings preventing all section files from importing on installation
  {% endupdate %}

{% update date="2025-06-23" tags="8.0.3" %}

## 8.0.3 Install experience and header bar fixes

**Fixes**

* Fixed listing directory with better defaults for an improved install experience
  * Removed image setting so theme is installed without images
  * Removed internal Intercom widget used on theme store
* Fixed "Enable click-to-open dropdown" not working when toggled on
  {% endupdate %}

{% update date="2025-06-09" tags="8.0.2" %}

## 8.0.2 Theme file restructure for theme store redesign

**Improvements**

* Created subfolders for preset listings
* Changed preset names in the config file
* Added the .json files matching each preset's demo store/templates and /sections into their respective subfolders
  {% endupdate %}

{% update date="2025-04-14" tags="8.0.1" %}

## 8.0.1 Mobile option selector fix

**Fixes**

* Fixed broken option selector on mobile
  {% endupdate %}

{% update date="2025-04-09" tags="8.0.0" %}

## 8.0.0 Revamped product options, high-variant support, and major bug fixes

**Added**

* Added revised header bar with more block options — multiple navigation styles can be used including full-width dropdowns, single columns, and content blocks
* Added more block types to mobile menu drawers
* Added support for high-variant products with the increased variant limit
* Added improvements to swatch rendering with more settings to fine-tune display on collection and product pages
* Added improved pagination when returning to an infinite-scrolled collection — users can "load previous" and "load next page" results
* Added better control when displaying sale prices — new setting to display sale start prices or sale ranges
* Added setting to change how cart upsells are displayed
* Added check to hide cart upsells that are already in the cart
* Added improved design of search dropdown
* Added better alt text display on product pages
* Added placeholder image to banner section
* Added better mobile support to hotspot section
* Added previous and next buttons to blog
* Added alt text to fullscreen product image gallery
* Added option to set play button text for video section
* Added new before/after image slider section

**Changed**

* Changed theme default settings to remove deprecated fonts

**Fixes**

* Updated "skip to content" button to be hidden when scrolling up
* Updated search bar to show current search term
* Fixed image sliders not allowing the user to slide through all images
* Fixed search getting cut off after opening full-screen gallery
* Fixed scroll reflow after using collection filters
* Fixed textarea field in blog comment not using correct style
* Fixed error where items get added above their quantity
* Fixed add to cart breaking when "Enable default variant" is unchecked
* Fixed pagination not working when inside theme editor
* Fixed savings badge appearing on PDP incorrectly
* Fixed inputs not inheriting parent color
* Fixed collection block text being cut off
* Fixed collection blocks not appearing on additional pages
* Fixed subtotals being shown when cart is empty
* Fixed padding around checkout "taxes included" message
* Fixed blip when showing search icon instead of input
* Fixed content shift when collection pages are loading
* Fixed content shift when using open accordions
* Fixed unexpected center alignment in collage
* Fixed product overlap with image hotspot
* Fixed layout issue with collection grid appearing more narrow
* Fixed image layout in blog articles
* Fixed line breaks not working in product descriptions
* Fixed age verification displaying when adding a product to cart
* Fixed checkboxes appearing incorrectly when using bottom border
  {% endupdate %}

{% update date="2025-01-29" tags="7.6.2" %}

## 7.6.2 Deprecated font replacements

**Improvements**

* Changed default fonts for presets, replacing deprecated fonts with recommended replacements
  {% endupdate %}

{% update date="2024-10-16" tags="7.6.1" %}

## 7.6.1 Linked products block fix

**Fixes**

* Fixed duplicate buttons on product page linked products block
  {% endupdate %}

{% update date="2024-10-11" tags="7.6.0" %}

## 7.6.0 Safari fixes, metaobject swatch support, and new sections

**Added**

* Added new setting to adjust product page gallery slider item size for both mobile and desktop
* Added new CSS to ensure consistent design of "Buy it now" buttons
* Added new tab block to show up to three tabs on product section
* Added new slider and arrow button for "Linked products" block when a page has many linked products
* Added metaobject swatch support even when the option is not labeled "colour"
* Added new fullscreen zoom gallery on product pages with more intuitive vertical scrolling
* Added new comparison table section
* Added new setting to choose whether collection filters are displayed on top or on the side
* Added new setting to change the width of items displayed in a product and collection slider
* Added support for videos as the first media in a product card

**Changed**

* Revised Liquid code with performance improvements
* Improved 3D model component on product pages
* Improved color rendering when using a dark body background
* Updated map store locator section to use Mapbox API
* Updated collection sections to use "collection\_list" input for easier selection of many collections

**Removed**

* Removed default background color on some images so .PNG files appear as expected with a transparent background

**Fixes**

* Fixed content overflow issues when viewing the zoom gallery on product pages
* Fixed edit address popup not loading the correct region selector when a store has only one shipping country
* Fixed tag filtering not highlighting the current tag filter
* Fixed some structured data errors by implementing default schema
* Fixed grid gallery not showing/sliding to the correct image
* Fixed multiple video sections used on one template breaking
* Fixed vertical alignment on content cards in Collage and Slider sections
* Fixed a variety of Safari display issues
  {% endupdate %}

{% update date="2024-08-29" tags="7.5.0" %}

## 7.5.0 Translation fixes, variant strikethrough rework, and "Sign in with Shop"

**Added**

* Added Sign in with Shop button

**Improvements**

* Completely reworked how options and variants get crossed out when sold out or unavailable — now works consistently for content using special characters or letters
* Created new rating snippet file so metafields can be swapped in one place
* Added missing color settings to newsletter block in menu

**Fixes**

* Fixed video crop in product gallery
* Fixed missing image on featured product item
* Fixed missing translations in theme editor
* Fixed quick search not retrieving results using extra fields
* Fixed variant selection when options include a space
* Fixed quantity increment getting disabled incorrectly
* Fixed mobile gallery when using grid view
* Fixed special characters breaking option selection
  {% endupdate %}

{% update date="2024-07-09" tags="7.4.0" %}

## 7.4.0 Image hotspot section and reworked locale files

**Added**

* Added new section to display image hotspots

**Improvements**

* Added better-sorted language files
* Reworked Paper section locale files

**Fixes**

* Fixed star rating display
* Fixed missing variables in interface
* Fixed missing placeholders in contact forms
  {% endupdate %}

{% update date="2024-06-06" tags="7.3.0" %}

## 7.3.0 Combined listing support, discount popup, and swatch improvements

**Added**

* Added setting to toggle header dropdown behavior
* Added popup to highlight any active discounts
* Added support for Shopify combined listing app
* Added help widget with multiple blocks

**Improvements**

* Updated rating text to show half stars for decimal points
* Updated swatches to support new Shopify metafield setup
* Updated Twitter icon to x.com icon
* Revised design of blog items in search results

**Fixes**

* Fixed hover opacity applying to banners on mobile
* Fixed overlap when using zoom gallery with sticky add button
* Fixed broken YouTube embed on product page
* Fixed bug with single variant and single option products
* Fixed missing image in newsletter block
* Fixed missing translations
  {% endupdate %}

{% update date="2024-04-30" tags="7.2.1" %}

## 7.2.1 Tertiary button color, zoom level settings, and fixes

**Added**

* Added tertiary button color option to all sections
* Added "Show location and language" setting to footer
* Added support for different zoom levels to product gallery

**Fixes**

* Fixed and revised "show prices in button" setting
* Fixed alignment of star badge on product page
* Fixed underline with subtag filtering
* Fixed cart alert opening on top of cart drawer when using upsell
* Fixed "when option is not available with any variant" with dropdown
* Fixed missing prices on selling plan widget
* Improved collection template block support
* Updated pagination "page" type to include all page numbers
  {% endupdate %}

{% update date="2024-04-01" tags="7.2.0" %}

## 7.2.0 App block support for banners and mobile menu content blocks

**Added**

* Added support for app blocks within banner
* Added support for content/newsletter blocks in mobile menu
* Added improved unavailable indication setting

**Removed**

* Removed redundant/broken settings

**Fixes**

* Updated block settings for more flexibility
* Fixed broken gift card form
* Fixed product descriptions appearing behind photos when set to "left"
* Fixed product galleries not showing featured image from selected variant
* Fixed errors on customer account page
* Fixed radius not applying when showing secondary media on hover
* Fixed "Show search as icon on mobile" setting
* Fixed missing chevron icon in select form input
* Fixed missing zip code in customer account
* Fixed button layout on account verification page
* Fixed mobile video in banners
* Fixed "Buy now" buttons appearing for unavailable products
* Fixed missing setting for "Show video on mobile"
  {% endupdate %}

{% update date="2024-02-28" tags="7.1.2" %}

## 7.1.2 Quick bug fixes

**Fixes**

* Fixed missing zip code in account pages
* Fixed cart notes appearing with empty notes
* Fixed cart upsells not opening correct quick add
* Fixed image resolution on "linked products" block
  {% endupdate %}

{% update date="2024-02-28" tags="7.1.1" %}

## 7.1.1 Mobile banner image fix

**Fixes**

* Fixed missing mobile images on all banners
  {% endupdate %}

{% update date="2024-02-27" tags="7.1.0" %}

## 7.1.0 Gift card scheduling, new settings, and bug fixes

**Added**

* Added setting to enable/disable the login button in footer
* Added support for gift card scheduling
* Added option to show search icon instead of input on mobile
* Added setting to toggle review badges
* Added more customizable features to contact template

**Changed**

* Revised extra small spacing on collection banners
* Reverted to sticky position for product grid photos

**Fixes**

* Fixed error on customer account pages
* Fixed missing arrow on featured collection slider
* Fixed missing image on mobile collection banner
* Fixed image\_url filters that don't contain required size
* Fixed gap on mobile Safari above product images
* Fixed awkward mobile layout on discount banner
* Fixed overlap in mobile menu drawer
* Fixed broken cart notes
* Fixed image resolution on mobile
  {% endupdate %}

{% update date="2024-02-14" tags="7.0.0" %}

## 7.0.0 Rebuilt product page, new card and price settings, and improved border controls

**Added**

* Added new product, collection, and blog card settings — split from a single setting so blog cards can be styled differently from product cards
* Added new price and revised price settings — reworked for different currencies with options to hide currency codes and remove trailing zeros
* Added new border and input settings — set border widths for form inputs, buttons, and page elements independently
* Added new setting to set the quick-add button color

**Changed**

* Updated styles so focus-state borders are only shown when navigating with a keyboard

**Improvements**

* Introduced more components to reduce code duplication using snippets for images, videos, cart items, and upsells
* Improved swatch support so color swatches appear correctly even when color options are labeled in different languages
* Improved video support so videos can autoplay on mobile where support is available

**Fixes**

* Fixed error breaking gift card page when customers do not include a gift card note
* Fixed blurry product photos on recent and recommended sliders
* Fixed product grid to avoid extra white space between product photos
  {% endupdate %}

{% update date="2023-12-05" tags="6.2.0" %}

## 6.2.0 Cart settings, shipping bar improvements, and bug fixes

**Added**

* Added viewport-specific cart settings
* Updated shipping bar with a setting to show progress based on subtotal or total

**Changed**

* Updated quick adds to show based on variant count instead of "Default title"
* Quantity selector buttons on product page are now disabled when the customer would go below 0 or above available inventory

**Fixes**

* Updated pickup availability so "Default title" is hidden
* Fixed buildUrlFilter breaking when a filter value contains an ampersand
* Fixed formatting in cart drawer error message
* Error messages are now properly localized
* Updated linked products block to avoid cutting off the selected element
* Fixed missing "Follow on Shop" button
* Fixed the price filter slider not working on Firefox
* Fixed nested mobile menu breaking when it has more items than the device height
* Fixed announcement bar alignment on mobile
* Fixed image content shift in product page grid gallery on Safari
  {% endupdate %}

{% update date="2023-11-07" tags="6.1.7" %}

## 6.1.7 Variant strikethrough and hidden option bug fixes

**Fixes**

* Fixed a bug where some variants would be wrongfully hidden
* Fixed a bug where unchecked "Enable Default Variant" setting would cause variants to be hidden
* Fixed a bug where additional strikethroughs were wrongfully assigned
  {% endupdate %}

{% update date="2023-11-01" tags="6.1.6" %}

## 6.1.6 Swatch images and sold out display fixes

**Fixes**

* Fixed missing swatch images in color filters
* Fixed a bug where sold out indications would not show up properly
* Non-existing variants will no longer be displayed
  {% endupdate %}

{% update date="2023-10-25" tags="6.1.5" %}

## 6.1.5 Variant indicator and subscription widget fixes

**Fixes**

* Fixed duplicate "popup" blocks
* Fixed unavailable variant indicator sometimes appearing incorrectly
* Fixed subscription widget sometimes showing wrong percentage discount
* Fixed variant image checkbox feature for mobile
* Small accessibility fixes
  {% endupdate %}

{% update date="2023-10-11" tags="6.1.4" %}

## 6.1.4 Store locator, currency, and subscription widget fixes

**Fixes**

* Fixed special characters breaking the store locator section
* Fixed a bug where price in cart was shown in the store's original currency
* Fixed a bug where savings badge calculations were showing the wrong percentage
* Fixed a bug where "Sold Out" text in dropdown selectors would multiply unexpectedly
* Fixed subscription widget price and selling plan bugs in quick add section
  {% endupdate %}

{% update date="2023-09-27" tags="6.1.3" %}

## 6.1.3 Clickable banner setting and section updates

**Added**

* Added setting to banner to make entire area clickable

**Improvements**

* Updated button defaults for better merchant experience
* Updated the way lazy loading is handled in banner sections
* Updated product images to go to first available image when switching variants while using multiple variant images setting
* Updated placeholder logic in collection grid and collection slider sections to use presets
* Updated structured data for products
  {% endupdate %}

{% update date="2023-09-21" tags="6.1.2" %}

## 6.1.2 Currency filter, dropdown overlap, and subscription fixes

**Fixes**

* Fixed price collection filter removing extra zeroes on stores using non-decimal currencies
* Fixed arrow overlap when using the dropdown menu above a Slideshow section
* Fixed subscription widget issues with multiple variants
* Fixed broken recent view script
* Fixed some currencies not being displayed in the correct format
* Fixed rogue JS code displaying on search page filters
  {% endupdate %}

{% update date="2023-09-14" tags="6.1.1" %}

## 6.1.1 Logo settings, subscription widget, and quantity button fixes

**Added**

* Added logo settings to both newsletter and content block in footer

**Changed**

* Updated alternative product options to only control selling plans
* Updated "subscribe and save" button to auto-select first plan

**Fixes**

* Fixed quantity buttons redirecting to cart
* Fixed recently viewed script not firing
* Fixed product template breaking when using subscription widget
* Removed help widget from theme editor
  {% endupdate %}

{% update date="2023-09-05" tags="6.1.0" %}

## 6.1.0 Improved image performance, reworked variant image setting, and new footer controls

We've done a lot of work optimizing how images are rendered in the theme and were able to see real performance gains. We also reworked how the variant-specific image setting works — no more editing alt tags on each image; just order the images and the theme figures out which to show.

**Added**

* Added better alignment settings to email sign-up section
* Added top/bottom spacing settings to all banner sections
* Added support to show color swatches in the collection filter
* Added support to move any footer block to any column
* Added new setting for collection-aware product links
* Added ability to disable quick-add on individual products

**Changed**

* Removed back in stock feature
* Improved variant-specific image setting to not use alt text
* Back to top button now appears earlier

**Improvements**

* Updated images to cut down on size and significantly improve page loading speeds
* Updated videos to render with original aspect ratio
* Updated section preview for Featured collection grid and Featured collection slider sections
* Updated product app block to use the same page margins

**Fixes**

* Fixed a subscription product bug where price would not update correctly
* Fixed border settings for footer section
* Fixed a bug where a second product form would prevent some apps from working properly
* Fixed special characters in SKU breaking the product page
* Fixed translation issue in the Recently viewed section
* Fixed subtag filtering so it works with tags that have spaces
* Fixed alignment on blog and page content
  {% endupdate %}

{% update date="2023-08-10" tags="6.0.1" %}

## 6.0.1 Post-launch fixes for 6.0.0

**Changed**

* "Starting from" now only shows if the product price varies

**Fixes**

* Fixed loading indicator on product page after product gets added to the cart
* Fixed fullscreen gallery not jumping to the correct image
* Fixed featured product section to properly add product to the cart
  {% endupdate %}

{% update date="2023-08-04" tags="6.0.0" %}

## 6.0.0 Product bundling, edit cart, and major new features

Our new update provides several significant enhancements, including the ability to bundle multiple single-variant products for sale on a single page. The new "Edit Cart" feature lets customers adjust product options without deleting and re-adding items.

**Added**

* Added new setting to select aspect ratio in the Video section
* Added support to include videos in the Slider section
* Added new product block to link products together as variants
* Added new collection template with filters displayed along the left-hand side
* Added new Slideshow banner section
* Added new Promo banner section
* Added new cart drawer feature to edit items — customers can change product options without deleting and re-adding
* Added a variety of new settings to fine-tune how prices are displayed — remove trailing zeros, optionally hide the currency symbol
* Added new back in stock feature — customers that share their email are tagged with the variant ID of the sold-out product
* Added support to display product blocks in the left or right column
* Added option to disable default product option selector when using a third-party subscription app
* Added new bundling feature to sell multiple single-variant products on a single page

**Changed**

* Changed all support links to point to the revamped help center
* Changed support integration with custom help widget using Intercom

**Fixes**

* Fixed open graph image tags not correctly linking to selected images
* Fixed section previews when clicking "Add section"
* Fixed mobile bar color on iOS Safari devices to use correct color
* Fixed wrong price appearing in recommendation slider
* Fixed product options breaking with special characters
* Fixed structured data breaking with special characters
* Fixed missing translations for gift card form
* Improved sold-out indicators by crossing out unavailable options while users make their selection
* Improved product page performance by removing lazy loading on the first product image
* Improved the Collage section so each block has a larger click area
* Improved product upsell block to be hidden when no upsells are available
* Updated Featured product section to avoid updating the URL with the selected variant ID
  {% endupdate %}

{% update date="2023-05-03" tags="5.2.0" %}

## 5.2.0 Announcement bar delay, typography fixes, and bug fixes

**Added**

* Added automatic delay to scroll to the announcement bar

**Changed**

* Revised underline offset in typography CSS
* Revised scroll snapping property

**Fixes**

* Fixed filters breaking when using special characters
* Fixed incorrect price displayed on recently viewed items
* Fixed URL parameters being overwritten
* Fixed minor cart visual issues
* Fixed Lighthouse error for duplicate IDs
* Fixed missing translations
  {% endupdate %}

{% update date="2023-05-03" tags="5.1.0" %}

## 5.1.0 Gift card recipient support, price visibility controls, and padding settings

This patch introduces the newly supported Shopify gift card recipient feature, letting customers send gift cards to their friends directly. Also added more settings for granular control over when and how prices are shown.

**Added**

* Added support for new Shopify feature: Gift card recipient
* Added setting to always show checkout subtotals/discounts in cart
* Added setting to control visibility of prices within buttons
* Added top and bottom padding settings to missing sections

**Changed**

* Revised product page borders
* Revised product template image galleries to be sticky
* Added price ranges instead of min price to product pages
* Revised max width on featured image in header bar

**Fixes**

* Fixed full-screen image gallery from showing indicators for videos
* Fixed vertical alignment of text in Collage and Slider sections
* Fixed missing "page" results from mobile quick search
* Improved mobile filters by closing filter popup after changing filters
  {% endupdate %}

{% update date="2023-04-20" tags="5.0.1" %}

## 5.0.1 Bug fixes and default font revisions

**Fixes**

* Fixed product page images cropping with fill setting on
* Fixed unclickable buttons when using dynamic header and filters
* Fixed logo list image alignment
* Fixed page refresh when resetting password
* Fixed account forms redirection after creating account
* Fixed missing translation for "Live-search in your header…" and "Something went wrong…"
* Fixed formatting on upsell and search items
* Fixed formatting on blog thumbnails
* Fixed store locator on mobile
* Fixed missing translation for checkout button on cart page
* Fixed variant title issues when there are special characters
* Fixed the "Buy now" button color to show selected secondary color
* Fixed column span for newsletter block
* Revised default fonts
* Revised and cleaned up theme settings with links to help docs
  {% endupdate %}

{% update date="2023-04-03" tags="5.0.0" %}

## 5.0.0 Cart behavior controls, audio feedback, and device visibility settings

We're happy to present another major update to the Paper theme — lots of new functionality including audio feedback for key interactions and more options to customize your customer's shopping experience.

**Added**

* Added an option to show a "Continue shopping" button below checkout
* Added an option to change the behavior of the cart buttons (go to cart page or open cart drawer)
* Added an option to add-to-cart behavior (open drawer, display alert, or redirect to cart page)
* Added option to display SKU next to product title on product page
* Added option to show unavailable variant options
* Added settings to enable borders on product images
* Added device visibility setting to all standard sections
* Added support for custom button text
* Added setting to enable audio feedback for key interactions
* Added video support to content grid

**Changed**

* Reworked theme sliders for a more consistent and bug-free experience
* Reworked header position settings
* Revised animations across all sections and templates
* Updated progress bar to work with currency conversions
* Updated product upsell block so image/title can be linked to product page
* Updated product option block so a popup window can be included next to option label

**Fixes**

* Fixed product gallery option to "Show selected variant images only"
* Fixed missing dollar sign in price filter
* Fixed extra spacing on custom product fields
* Fixed countdown timer button so it can be correctly hidden
* Fixed selling plan groups being hidden when only one option is available
* Fixed a bug where subscriptions would not display properly
* Fixed a bug where "choose options" button would appear when it shouldn't
* Fixed menu overlap on tablet devices
* Fixed cart visibility when scrolling with dynamic header
* Fixed content shift on mobile when scrolled with dynamic header
* Fixed cart notes not being updated
* Fixed the gap from the footer causing layout shift on mobile
* Fixed minor bugs with banners
* Various minor accessibility fixes and improvements
  {% endupdate %}

{% update date="2023-02-16" tags="4.1.1" %}

## 4.1.1 Performance improvements and bug fixes

**Improvements**

* Minor performance improvements
* Updated presets on demo stores
* Minor settings revisions

**Fixes**

* Fixed spacing issues around options block
* Fixed bug that caused search bar to work improperly
* Fixed overflow of text in quick add section
  {% endupdate %}

{% update date="2023-02-16" tags="4.1.0" %}

## 4.1.0 Search suggestions and predictive search support

**Added**

* Added support for search suggestions
* Added new global settings to set what fields predictive search uses

**Changed**

* Revised spacing in product options
* Revised line-height for headings

**Fixes**

* Fixed extra preset block in theme announcement section
* Fixed so options appears as a default block in product and featured product sections
* Fixed missing translations
* Fixed broken mobile formatting on upsell items
* Fixed so the correct description is used for the meta tag on collection templates
* Fixed product images not swapping when using dropdown option selectors
* Fixed issue where scrolling would get randomly locked
* Fixed mobile menu overlap
  {% endupdate %}

{% update date="2023-02-02" tags="4.0.0" %}

## 4.0.0 Store locator section, global alignment settings, and new product blocks

Lots of new updates and features — new store locator section, and improved alignment so almost everything can be set to left, center, or right.

**Added**

* Added new Store locator section
* Added checkbox to banner sections to enable/disable lazy loading
* Added checkbox to banner sections to prevent theme from cropping images
* Added border settings to Featured product section
* Added new account login icon
* Added checkbox to enable/disable "Show second image on hover"
* Added option to display SKU on product thumbnails
* Added option to display a short description under each product thumbnail using metafields
* Added new global alignment settings to adjust grid gap sizing
* Added new product block for customer product customizations
* Added more horizontal alignment settings throughout the entire theme
* Updated all images to support focal point feature
* Updated product zoom gallery with better zoom and navigation actions
* Updated to support section groups

**Changed**

* Revised some accent colors for better contrast
* Revised spacing in active filters on desktop
* Revised spacing around quick add on mobile
* Improved dropdown desktop nav from disappearing too early

**Fixes**

* Fixed bug where content blocks would not show up in footer unless a newsletter block is also being used
* Fixed thumbnails in the product gallery from breaking layout when many photos are used
* Fixed cart alert timer bar overlapping the alert container
* Fixed icons preventing search fields from being clickable
* Fixed bold text appearing correctly in richtext sections when using a light font
* Fixed image height issue on search and cart items in Safari
* Fixed login buttons appearing when accounts are disabled
* Fixed content and slider sections breaking when including a link in body content
* Fixed content grid when block span extends over the grid size
* Fixed left alignment in icon grid
* Fixed bug preventing variants from being changed
  {% endupdate %}

{% update date="2023-01-10" tags="3.0.2" %}

## 3.0.2 Countdown timer section and color switcher fix

**Added**

* Added new countdown timer section

**Fixes**

* Fixed color toggle to use device setting instead of forcing color theme from theme settings
  {% endupdate %}

{% update date="2023-01-05" tags="3.0.1" %}

## 3.0.1 Post-launch fixes for 3.0.0

**Fixes**

* Fixed height settings for the alternative banner — the height was applied to the image rather than the entire section, causing content to shift below fold on mobile
* Fixed borders in footer where a dark background color is used — borders now use the set color within accordions
  {% endupdate %}

{% update date="2023-01-04" tags="3.0.0" %}

## 3.0.0 Icon grid section, color variant swatches, age verification, and new banner options

New sections, new features, better design, and bug fixes to start the year.

**Added**

* Added new icon grid section to highlight key store details
* Added new alternative banner section with image and text split horizontally
* Added new block settings to existing banner section with ability to set up to two buttons
* Added new section to include an age verification popup
* Added new section to include a "Back to top" button when scrolling to bottom
* Added support to display color variants as swatch buttons with custom image uploads
* Added setting to navigation slider so it can be shown on mobile only
* Added translated text for top languages (EN, FR, IT, DE, ES)

**Changed**

* Revised border layouts for header dropdown to fit larger navigation links

**Removed**

* Removed background color from images that should be displayed with transparent backgrounds

**Fixes**

* Improved promo blocks on collection and product grids — merchants can now have promo blocks span multiple columns, include custom colors, and add background images
* Fixed missing arrows for featured image sliders in the header dropdown
* Fixed rating badges showing extra decimal points
* Fixed all sliders skipping some slides when they have a larger width
* Fixed content overlapping issues when setting header to sticky
* Fixed videos when hovering on a product thumbnail not correctly filling the border area
* Fixed some text elements using incorrect font families
  {% endupdate %}

{% update date="2022-12-05" tags="2.0.0" %}

## 2.0.0 Savings badge, sticky header, thumbnail gallery, and design improvements

**Added**

* Added automatic badge to product thumbnails to highlight percent or dollar savings
* Added new feature to set header bar as sticky
* Added stock count to product thumbnails
* Added a new product gallery option to display images with thumbnails

**Changed**

* Improved variant button selector design with better active state
* Updated product page alt text to only display visually when feature is enabled and alt text has been customized
* Updated video sections to use native HTML5 video rather than Vimeo embeds
* Updated to support CSS grid-gap for more consistent spacing
* Implemented minor design tweaks to pickup availability block
* Included more developer notes and comments in theme code
* Moved slider arrows on most sections to avoid overlapping and crowding images

**Removed**

* Removed "Edge to edge" grid setting
* Removed default background color on images so transparent .png images behave as expected

**Fixes**

* Fixed some thumbnails not using correct font families from theme settings
* Fixed slider margins with less-than-ideal design
* Fixed product upsell block not working
* Fixed vendor names displaying incorrectly in search
* Fixed bug causing add-to-cart to break when variants have spaces
* Fixed bug causing checkout button formatting issues on cart template
* Fixed typography settings not correctly applying to some header bar text
  {% endupdate %}

{% update date="2022-11-14" tags="1.2.2" %}

## 1.2.2 Product title special character fix

**Fixes**

* Fixed symbols in product titles not being escaped properly, which caused accidental rendering of x-data on the product page
  {% endupdate %}

{% update date="2022-11-09" tags="1.2.1" %}

## 1.2.1 Contact form 404 fix

**Fixes**

* Fixed contact form bug that was causing the form to 404
  {% endupdate %}

{% update date="2022-10-27" tags="1.2.0" %}

## 1.2.0 Vertical spacing controls, product recommendations intent setting, and new upsell block

This update introduces more vertical spacing controls so merchants can fine-tune spacing as needed, and new settings to support the intent property for the Product Recommendations API.

**Added**

* Added vertical spacing controls to almost all sections and blocks
* Added a new setting to the product recommendation section to set intent to either "recommended" or "complementary"
* Added new block to product section to include product up-sells or cross-sells
* Added a new color setting to match the mobile bar color to the announcement bar
* Added a new border setting for "none" to theme-wide sections
* Added a new preset for hardware and department stores
* Added border options to all blocks on a product template

**Changed**

* Changed styling of presets to accommodate recent changes
* Updated border styling in the footer section
* Updated newsletter grid item to display full width
* Updated content block design under "add to cart" on product pages
* Updated banner sections to let merchants upload videos directly
* Improved height options for banners to better fit different device sizes
* Reduced size of search bar on mobile for a cleaner feel

**Removed**

* Removed "Default Title" from sticky add to cart bar

**Fixes**

* Fixed favicons not appearing
* Fixed blog thumbnails not correctly applying theme radius styles
* Fixed logo appearing slightly off center on mobile
* Fixed cart upsell arrows breaking when an item is unavailable
* Fixed bug causing weird grid alignment on recently viewed sections
* Fixed bug causing weird layout on mobile when using the "grid" product gallery
* Fixed bugs causing text color to overlap with background color on some sections
  {% endupdate %}

{% update date="2022-10-11" tags="1.0.0" %}

## 1.0.0 Paper goes live

Paper's first release on the Shopify Theme Store.
{% endupdate %}
{% endupdates %}


# Theme basics

{% hint style="info" %}
If you need additional support contact our team for personalized onboarding, and additional theme support: <https://brickspacelab.com/pages/theme-support>
{% endhint %}

{% hint style="info" %}
Coming from traditional web development (for example .NET or Rails)? Read [Start with Paper when you are new to Shopify](broken://pages/gUL3dzybjvS24IiXJ6w1) for how Liquid, the theme editor, and Shopify hosting fit together before you dive into sections and blocks.
{% endhint %}

{% hint style="info" %}
Not sure which theme is right for your business? Our detailed [comparison chart](https://help.brickspacelab.com/general/theme-comparisons) breaks down key features available in each of our themes.
{% endhint %}

## An introduction to Paper

Paper is a premium Shopify theme built specifically for large catalogue businesses. With powerful customization options and a wide range of built-in features, Paper makes it easy to create a professional, high-performing storefront tailored to large product catalogues.

## Getting started

Before customizing your theme, keep these best practices in mind:

* Avoid editing code unless you're experienced with Shopify theme development.
* Use the theme’s built-in features whenever possible to maintain speed and performance.
* Always duplicate your theme before making significant changes to ensure you have a backup.
* Reach out to our team for 1-on-1 onboarding if you need tailored support.

### Setting up your theme for the first time

If your new to Paper we recommend setting up your global theme settings then going page-by-page to review and adjust your design and content.

{% stepper %}
{% step %}
**Review and update theme settings**

* Open the theme editor and click the gear icon in the top left. We recommend clicking through each settings page to get familiar with your options and customize them to match your brand.
  {% endstep %}

{% step %}
**Update your homepage**

* Use the theme editor to update homepage sections like banners, featured products, and promotional content to reflect your store’s goals.
  {% endstep %}

{% step %}
**Update additional templates**

* Customize other important templates, especially your **product** and **collection** pages. Use the theme editor to adjust the layout and content for each as needed.
  {% endstep %}

{% step %}
**Update your storefront domain and password**

* If you're ready to launch make sure you remove the storefront password and connect a custom domain if you have one.
  {% endstep %}

{% step %}
**Launch improve your website**

* Once you’re happy with how your store looks, publish your theme. After launch, continue monitoring performance and make ongoing improvements as needed.
  {% endstep %}
  {% endstepper %}

### **Understanding sections, blocks & templates**

Shopify themes are built using a modular structure of sections, blocks, and templates, allowing merchants to customize their storefronts without touching code. Understanding how these components work together is key to building flexible and user-friendly themes.

**Sections**

* Reusable components (e.g., hero banners, featured collections).
* Can be added, removed, or rearranged in the theme editor.

**Blocks**

* Smaller elements within sections (e.g., text boxes, buttons, images).
* Allow for granular customization without coding.

**Templates**

* Define the layout of specific pages (e.g., product, collection, blog).
* Paper supports custom templates for advanced use cases.


# Theme settings


# Colors

Although it's possible to jump into Paper and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.

If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as [Coolors](https://coolors.co/generate), to help with this process.

There are a handful of great resources online that can help guide your color selection process, including

* [Brand Colors: How to Choose the Perfect Palette](https://looka.com/blog/brand-colors/)
* [Color Psychology: How Color Meanings Affect Your Brand](https://www.oberlo.com/blog/color-psychology-color-meanings)

### FAQs

<details>

<summary>How can I change the accent colors in my theme settings?</summary>

</details>

<details>

<summary>How do I change the top bar color on mobile devices?</summary>

Update the Mobile bar to change top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.

<div data-full-width="true"><figure><img src="https://downloads.intercomcdn.com/i/o/1198958900/ccc7f1701938dd7bd6459ecf/shotsnapp-1666801448_626.png?expires=1744398000&#x26;signature=8b6db350fd25f73c4ef8f01b263186ae454c4987bfc6abd25297717fdff45112&#x26;req=dSEuHsB7lYhfWfMW1HO4zUTPeXYqhlRs6OyH1QnljCwSCKS61%2BdJQFEQkj3P%0AAtEp6wWtGLHIt4kkrOA%3D%0A" alt=""><figcaption></figcaption></figure></div>

</details>

### Getting started <a href="#h_7a0d84a38a" id="h_7a0d84a38a"></a>

You can adjust all colors in Paper using the global color settings. To achieve better results and improve design implementation, it's important to understand how and where each setting applies colors differently.

{% stepper %}
{% step %}
**Navigate to color settings**

* Color settings can be accessed within your theme editor by navigating to: **Theme settings > Colors**
  {% endstep %}

{% step %}
**Select default colors**

* Background: Choose a light background to enhance readability. This default background color will be used across your site. If changed, adjust the Main text color for a strong contrast.
* Main text: Select a color with high contrast against the Background color. For a light background, opt for a dark text color.
* Light text: The Light text color serves as an alternative for specific sections, such as dark banner images. This additional setting provides alternative text color options throughout the theme.
* Border: Several border shades are generated from this color. The default and lightest shade will exactly match the chosen color. Section-specific settings offer the option to use a darker version.
  {% endstep %}

{% step %}
**Selecting primary colors**

* Background: This color serves as a background for elements with the "Primary" color scheme. The primary background color is used as the main accent color throughout the theme, often applied to call-to-action buttons. We recommend using your primary brand color.
* Text: This color is used for text within elements featuring the "Primary" color scheme.
  {% endstep %}

{% step %}
**Selecting secondary colors**

* Background: This color serves as a background for elements with the "Secondary" color scheme. The secondary color scheme is used sparingly throughout your theme. For example you’ll see this applied to the quick-add buttons.
* Text: This color is used for text within elements featuring the "Secondary" color scheme.
  {% endstep %}

{% step %}
**Selecting tertiary colors**

* Background: This color serves as a background for elements with the "Tertiary" color scheme. The secondary color scheme is used not used by default in your theme. The tertiary colors will only be seen if it’s selected from section settings.
* Text: This color is used for text within elements featuring the "Tertiary" color scheme.
  {% endstep %}

{% step %}
**Selecting extra colors**

* Mobile bar: The Mobile bar color updates the user's top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.
  {% endstep %}
  {% endstepper %}

### Understanding your color schemes

Throughout your theme you'll see in a number of different places color settings that you can use. These settings are generated from your global color settings.

**Background color**

Body

Transparent

Shade

**Border color**

Subtle

Strong

**Text color**

#### Body and Body Neutral:

* Body is the base color.
* Body Neutral is a blend of the Body color and Primary Accent.

#### Accent 1-3 and Shade 1-3:

* Accent 1-3 represents darker shades of the Body color.
* Shade 1-3 also represents darker shades of the Body color but with slight opacity, making them semi-transparent.

#### Primary, Secondary, and Tertiary Colors:

* These colors are directly derived from the color settings.

#### Additional Notes:

* If the Body color is dark, Accent and Shade can instead be lighter shades of the Body color.
* For example, if the background color is black, Accent 1-3 will be lighter shades rather than darker.


# Typography

Text plays a significant role on your website. Both the content and the typography you use are crucial for building a strong visual identity that resonates with customers.

### Before starting <a href="#h_d38eb78290" id="h_d38eb78290"></a>

Typography greatly influences your website's visual identity. Choosing the right font helps customers connect with your brand.

Before adjusting typography settings, consider your brand's mission and identity. Make sure any changes support the visual identity that resonates with your customers.

* [How to Pick a Font for Your Brand: Guide to Choosing Fonts](https://www.masterclass.com/articles/how-to-pick-a-font)

### Getting started

{% stepper %}
{% step %}
**Align with brand identity**

Choose fonts that reflect your brand’s personality (e.g., modern, classic, playful).
{% endstep %}

{% step %}
**Prioritize readability**

Ensure body text is clear and legible on all devices.
{% endstep %}

{% step %}
**Limit font pairings**

Use 1-2 fonts max (e.g., one for headings, one for body text) to maintain consistency.
{% endstep %}

{% step %}
**Capitalization**

Type settings can be used to further customize which fonts are used throughout your theme. These settings can be used to change capitalization and font families.
{% endstep %}

{% step %}
**Consider performance**

Opt for system fonts or lightweight web fonts to avoid slowing down your site.
{% endstep %}

{% step %}
**Test accessibility**

Ensure sufficient contrast ([WCAG standards](https://www.audioeye.com/lp/wcag-web-compliance/?utm_adgroup=WCAG-Test\&utm_source=google\&utm_medium=paidsearch\&utm_campaign=Generic-WCAG-Testing-Free-Site-Scan-97F\&utm_term=wcag%20test\&utm_content=\&hsa_acc=3628656526\&hsa_cam=20558467141\&hsa_grp=155189112404\&hsa_ad=722995104867\&hsa_src=g\&hsa_tgt=kwd-302642280442\&hsa_kw=wcag%20test\&hsa_mt=b\&hsa_net=adwords\&hsa_ver=3\&gad_source=1\&gad_campaignid=20558467141\&gbraid=0AAAAADkp9oAgY5lRKh-HbY7WjakyD4D85\&gclid=CjwKCAjwuIbBBhBvEiwAsNypvaAlnponeQImSyNHeCo8LU7djysPFF178lEcq1pkApDXR_YytunKmRoCnfMQAvD_BwE)) and scalable text for all users.
{% endstep %}

{% step %}
**Match customer expectations**

Luxury brands may use serifs; minimalist brands often prefer clean sans-serifs.
{% endstep %}

{% step %}
**Preview across devices**

Check how fonts render on mobile, tablet, and desktop.
{% endstep %}
{% endstepper %}

### Font settings

Control the typography appearance throughout your theme.

{% stepper %}
{% step %}
**Font Family**:

* Maximum 2 fonts recommended.
* Body Font: Main content.
* Heading Font: All headings.
* Navigation Font: Buttons/menus.
  {% endstep %}

{% step %}
**Sizing**:

* Base Size: Reference point.
* Scale Ratio: Heading proportions.
  {% endstep %}
  {% endstepper %}

### Icon styles

Icons play a key role in your theme’s visual identity, enhancing usability and reinforcing brand style. Choose from multiple design options—such as sharp (modern, precise) or round (friendly, approachable)—to align with your brand’s aesthetic. Consistent icon styling ensures a polished, cohesive experience across your site.

### Advanced settings

These options allow for further customization of your typography.

{% stepper %}
{% step %}
**Body font**

Primary font for paragraph text and content
{% endstep %}

{% step %}
**Heading font**

Font used for titles and section headers
{% endstep %}

{% step %}
**Navigation font**

Font style for menu items and links
{% endstep %}

{% step %}
**Base font size**

Root text size that scales all other elements
{% endstep %}

{% step %}
**Scale ratio**

Adjusts proportional sizing between heading levels
{% endstep %}

{% step %}
**Text separator**

Visual divider (dot/line) between text elements
{% endstep %}

{% step %}
**Heading capitalization**

Controls case styling for headings
{% endstep %}

{% step %}
**Navigation capitalization**

Controls case styling for menu text
{% endstep %}

{% step %}
**Button capitalization**

Determines case styling for button text
{% endstep %}

{% step %}
**Icon style**

Choose between sharp (modern) or round (friendly) icons
{% endstep %}
{% endstepper %}

### Font Pairings

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Helvetica + Helvetica Black</td><td><a href="/files/tYDmqoyMr8V8uP3EFwMH">/files/tYDmqoyMr8V8uP3EFwMH</a></td></tr><tr><td>Inter + Fraunces</td><td><a href="/files/YNmniJP8n2KRzMVZak3o">/files/YNmniJP8n2KRzMVZak3o</a></td></tr><tr><td>Geist + Geist Semi Bold</td><td><a href="/files/ggAXUFy5DLh97iviQPSN">/files/ggAXUFy5DLh97iviQPSN</a></td></tr></tbody></table>

### FAQs

<details>

<summary>How can I upload a custom font?</summary>

<https://help.brickspacelab.com/use-a-custom-font#installing-a-custom-font>

</details>

###


# Borders

Border styling helps define your brand’s visual tone. Choose between rounded edges for a friendly, approachable look or sharp corners for a modern, bold aesthetic.

### Design tips

{% stepper %}
{% step %}
Use consistent radius values (e.g., all 5px) for a harmonious look
{% endstep %}

{% step %}
Combine sharp elements (0px) with some rounded components for visual interest
{% endstep %}

{% step %}
Thicker borders (2px+) work well for high-contrast designs
{% endstep %}

{% step %}
Borderless (0px width) creates a minimalist aesthetic
{% endstep %}
{% endstepper %}

### Border settings

{% stepper %}
{% step %}
**Border Radius:** Controls the corner rounding for different elements:

* **Button Radius**: Adjusts corner curvature for all buttons (0px = sharp, higher values = more rounded)
* **Input Radius**: Sets rounding for form fields (5px recommended for friendly but clean look)
* **Element Radius**: Controls corner rounding for content sections (0px = sharp edges for modern layouts)
  {% endstep %}

{% step %}
**Border Width:** Determines the thickness of border lines:

* **Button Width**: 1px standard (thicker for emphasis, 0px for borderless)
* **Input Width**: 1px recommended for clean form fields
* **Element Width**: 1px standard for subtle framing of sections
  {% endstep %}
  {% endstepper %}


# Quick add

Quick add allows customers to add products to their cart directly from product cards without having to visit the product page. This feature can streamline the shopping experience and increase conversion rates by reducing friction in the purchase process.

### Quick add settings

<table><thead><tr><th>Setting</th><th width="344.5546875">Description</th></tr></thead><tbody><tr><td>Enable quick add on mobile</td><td>Controls whether the quick add feature is available on mobile devices. When enabled, mobile users can quickly add products to their cart from product listings without visiting the product page.</td></tr><tr><td>Enable quick add on desktop</td><td>Controls whether the quick add feature is available on desktop devices. When enabled, desktop users can quickly add products to their cart from product listings without visiting the product page.</td></tr></tbody></table>


# Basics


# Edit default content

When setting up your Shopify theme you may come across text content that can't be edited from the theme editor. Here's where the default content editor comes in handy.

To edit default content in your Shopify theme, go to **Online Store > Themes**, click the **three dots** next to your theme, and select **Edit default theme content**. Then, find the text you want to change using the tabs or search bar, edit it, and click **Save**.

{% hint style="info" %}
Editing default content is not possible while using a theme trial.
{% endhint %}

{% hint style="info" %}
Default content can also be edited by using apps such as **Translate and adapt** and many other translation apps.
{% endhint %}

## How to edit default content

{% stepper %}
{% step %}
**Access the Theme Content Editor**

* From your Shopify admin, navigate to **Online Store > Themes**.
* Locate the theme you want to edit and click the three dots (or "More actions") button.
* Select **Edit default theme content** from the dropdown menu.
  {% endstep %}

{% step %}
**Find and edit the text**

{% hint style="info" %}
Be careful not to change text inside curly brackets `{{ }}` or HTML link tags `<a href="">` and `</a>` as this can break the theme's functionality.
{% endhint %}

* **Tabs and categories**
  * The default theme content editor groups text by category, which you can view using the tab navigation.
* **Search bar**
  * Use the "Filter items" search bar to locate specific phrases or words you want to change.
* **Edit the text**
  * Click on the tab or category that includes the text you want to change and edit the text in the available fields.
* **Remove text**
  * To remove default text, replace it with a single space.
    {% endstep %}

{% step %}
**Save your changes**

* Click **Save** to apply your changes.
  {% endstep %}
  {% endstepper %}

### Examples

* **Powered by Shopify**: You can remove this text from the footer by searching for "Powered by Shopify" in the "Checkout & system > Links" area.


# Use custom templates

Custom templates can be created to include drag-and-drop sections on almost any page. These templates can be used for content pages, collection pages, product pages, blog pages, and article pages.

Visit the Shopify help center to [learn more about using templates](https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates).

## How to create and use custom templates

We'll create a custom page template, customize it, and assign it to a page. This same process can be used for other templates, such as products or collections.

{% stepper %}
{% step %}

#### Create a new template

* From your Shopify admin, go to **Online Store** > **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Click the **Home page** drop-down menu, select a template type, and then click **Create template**.
* In the **Create a template** dialog, do the following:
  * In the **Name** field, enter a unique name for your new template.
  * In the **Based on** drop-down menu, select the existing template that you want to base your new template on.
* Click **Create template**.
  {% endstep %}

{% step %}

#### Previewing templates

* From your Shopify admin, go to **Online Store** > **Themes**.
* Find the theme that you want to preview a template with, and then click **Customize**.
* Click the **Home page** drop-down menu, and then select the template that you want to use.
* In the **Preview** section in the theme editor sidebar, click **Change**.
* Click the resource that you want to preview with the selected template.
  {% endstep %}

{% step %}

#### Apply a new template to a page

* From your Shopify admin, go to **Online Store** > **Pages**.
* Click the page that you want to apply a new template to.
* In the **Online store** section, click the **Theme template** drop-down menu, and then select the template that you want to apply to your page.
* Click **Save**.
  {% endstep %}

{% step %}

#### Apply a new template to a product

* From your Shopify admin, go to **Products**.
* Click a product that you want to apply a new template to.
* In the **Theme template** section, click the drop-down menu and then select the template that you want to apply to your product.
* Click **Save**.
  {% endstep %}

{% step %}

#### Apply a new template to a collection

* From your Shopify admin, go to **Products** > **Collections**.
* Click a collection that you want to apply a template to.
* In the **Theme template** section, click the drop-down menu and then select the template that you want to apply to your collection.
* Click **Save**.
* From your Shopify admin, go to **Products**.
* Click a product that you want to apply a new template to.
* In the **Theme template** section, click the drop-down menu and then select the template that you want to apply to your product.
* Click **Save**.
  {% endstep %}

{% step %}

#### Apply a new template to a blog

* From your Shopify admin, go to **Online Store** > **Blog posts**.
* Click **Manage blogs**.
* Click a blog that you want to apply a template to.
* In the **Online store** section, click the **Theme template** drop-down menu, and then select the template that you want to apply to your blog.
* Click **Save**.
  {% endstep %}

{% step %}

#### Apply a new template to a blog post

1. From your Shopify admin, go to **Online Store** > **Blog posts**.
2. Click a blog post that you want to apply a template to.
3. In the **Online store** section, click the **Theme template** drop-down menu, and then select the template that you want to apply to your blog.
4. Click **Save**.
   {% endstep %}
   {% endstepper %}

## Considerations for creating a new template <a href="#considerations-for-creating-a-new-template" id="considerations-for-creating-a-new-template"></a>

Before you create a new template, review the following considerations:

* You can have multiple templates for your products, collections, pages, blogs, and blog posts, but you can have only 1,000 templates in total.
* You can create a new template only with an [Online Store 2.0](https://help.shopify.com/en/manual/online-store/themes/managing-themes/upgrading-themes) theme.
* All themes have a default template for collections, products, blogs, blog posts, and pages. These default templates are what your store's resources and content are displayed with, unless you create alternative templates.
* Any changes you make to a template impact all the pages that use that template. If you want to display some pages of a particular type differently, then you can create a new template based on one that already exists in your theme.
* When you create a new template from an existing template, your new template automatically populates with the same sections as your existing template. You can then remove, add, or hide sections, and edit their content as needed, without impacting the display of pages that use the existing template.


# Use and install apps

Shopify apps are a fundamental part of most ecommerce sites. With over 8,000 Shopify apps it's important to understand the best approaches to take when installing apps.

Visit the Shopify help center to learn how to [extend your theme with apps](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps).

## Considerations when using Shopify apps

* Consider building app functionality into theme by hiring a developer. This approach is recommended because many apps have the potential to impact your site's performance. You'll also avoid paying monthly fees for a single feature.
* Look for apps with the [Built for Shopify badge](https://www.shopify.com/ca/partners/blog/built-for-shopify). Apps that have this badge meet higher standards and follow best-practices for theme integration.
* Install apps using [app blocks or app embeds](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps).
* For themes that require code changes you should try using the Custom liquid section instead of making changes directly to theme code. Taking this approach will ensure your theme can be updated much easier.


# Improve page speed

## How does page speed impact your business <a href="#h_029076d4e0" id="h_029076d4e0"></a>

A low speed score might seem concerning but in reality it's not. Speed tests often measure the worst-case scenarios which may not be a reality for many of your customers.

Many major websites like Allbirds, Fashion Nova, and Gymshark have Lighthouse scores well below 40. As long as your website loads and functions as expected there's no need to panic - unless it's taking exceptionally long to load.

## What is a good speed score <a href="#h_ed17bd6682" id="h_ed17bd6682"></a>

You can look at the demo stores of the theme you are using for a good gauge on what a bare bones website could be performing at. For example the [Poster preset for Paper](https://themes.shopify.com/themes/paper/styles/poster/preview?surface_detail=listing\&surface_inter_position=1\&surface_intra_position=4\&surface_type=listing) scores between 80-97 on Lighthouse for desktop. Using other metrics the Poster preset scores 1.81s for loading speed, 48ms for interactivity and 0 for visual stability.

For a benchmark you can use the following as a guide

* Loading speed, aim for 1.7s - 2.7s
* Interactivity, aim for 40-60ms
* Visual stability, aim for 0-0.2

## How to improve page speed <a href="#h_33b5f5febd" id="h_33b5f5febd"></a>

**Reduce app usage**

Apps are usually the single biggest reason a Shopify theme is performing slower than expected. It's best to avoid apps as much as possible - look for alternative solutions or considering hiring an expert to build customizations.

When installing a Shopify app it's best to look for the "Built for Shopify" badge.

Some apps that aren't installed on your Shopify theme won't have an impact. For example the Order printing app only interacts with your Shopify dashboard and not your theme.

**Keep content simple**

This might seem like common sense - a page with 100 pictures will load a lot slower than a page with a single paragraph. Try to keep your pages as simple as possible. If you find a page with too much content consider splitting it up into separate pages.

**Avoid using videos and GIFs**

GIFs are some of the worst performing file types to load on a website. If you want to use a video or GIF you should opt for a video first. If either are not absolutely necessary consider removing them entirely.

**Upload optimized images**

Consider minifying and uploading compressed JPGs. Images in JPG format tend to typically be smaller in file size than other formats.

**Disable animations**

Consider disabling built-in theme animations. Turning off animations can improve page performance on some browsers and devices.

**Disable dynamic checkout**

Disabling dynamic checkout buttons can improve page performance. If these are not used frequently consider disabling them.

**Use fewer fonts**

When setting up your theme you have the option to select different font families. Choosing a System font will be best for page speed as these fonts are available on all devices and won't require additional assets. If you are going to use a custom font, consider using 1 or 2. Using 3 or more custom fonts will have a bigger impact on slowing down your page speed.


# Update your theme

Our themes are updated regularly with new features, general improvements, and bug fixes.

Your theme will automatically update for minor fixes. Unfortunetly, Shopify does not automatically update themes for major updates or when you've made customizations to the theme code. If the code has been edited, you can install updates manually or [hire an expert](https://experts.shopify.com/) for assistance.

Visit the Shopify help center to [learn more about updating themes](https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes).

## FAQs <a href="#h_ca638b6997" id="h_ca638b6997"></a>

<details>

<summary>How do I check what theme version I'm using?</summary>

The theme version is listed in a few places in your Shopify dashboard. To find this go to Shopify then navigate to **Online Store > Themes**. From here you view your installed themes and see which version each theme is using.

</details>

<details>

<summary>How do I check which theme version is the latest?</summary>

To confirm you are using the latest version, please refer to the Shopify theme store to reference the most recent released version. You can also find a notice in your Shopify dashboard that will highlight when a theme has a new version available. This can be seen when you navigate to **Online Store > Themes**.

</details>

<details>

<summary>How important is it to update to the latest version?</summary>

Update your theme is not a requirement. If you see we've released new features you'd like to take advantage of then updating would be the best option. It is generally a good idea to update to the latest version at least once a year - this way you get new features, improved performance and bug fixes.

</details>

## How to transfer settings after updating <a href="#h_a45de23e11" id="h_a45de23e11"></a>

{% hint style="info" %}
This process does not copy over code changes. If you've made code changes those will have to manually be copied over to your new theme.
{% endhint %}

{% stepper %}
{% step %}

#### Install the latest version

1. Sign in to your Shopify account
2. Click the dropdown in your Shopify theme to view the version number
3. Click "Add to theme library"
   {% endstep %}

{% step %}

#### Back up your themes

1. Before continuing further it's a good idea to create a backup copy of your themes
   * Learn more about [duplicating themes](https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes)
     {% endstep %}

{% step %}

#### Transfer theme settings

1. In one tab open your original theme in the Code editor
   * Go to Online store > Themes > Actions > Edit code
2. In a second tab open the new theme in the Code editor
3. In your original theme, open the file settings\_data.json and copy the entire contents
4. In your new theme, open the file settings\_data.json then delete the entire file contents and paste the content you just copied
   {% endstep %}

{% step %}

#### Transfer sections and block settings

1. In one tab open your original theme in the Code editor
   * Go to Online store > Themes > Actions > Edit code
2. In a second tab open the new theme in the Code editor
3. In your original theme, open the templates directory and take note of each file with a blue circle icon
   * For each file with a blue icon:
     1. In your original theme, open the file with a blue icon, copy the contents
     2. In your new theme, overwrite the file's content by pasting the content you copied from the original theme
        {% endstep %}
        {% endstepper %}


# SEO for Shopify

## What is SEO

Search Engine Optimization (SEO) is the practice of enhancing your website to improve its visibility on search engines like Google. For Shopify merchants, this means optimizing your store's content and structure to ensure that potential customers can easily find your products when they search online. By following SEO best practices, you can increase traffic to your store, leading to more sales and higher customer engagement.

Visit the Shopify blog to learn more about [generating traffic with SEO](https://www.shopify.com/blog/shopify-seo).

## FAQs

<details>

<summary>Does my theme follow SEO best practices?</summary>

All our themes are SEO-optimized. They automatically add essential details like meta titles and descriptions. The themes also use correct web semantics, heading structures, and structured data for better SEO. They also include canonical tags on key pages (products, collections, pages) to help prevent duplicate content issues.

</details>

<details>

<summary>Why am I getting "duplicate content" warnings?</summary>

There's nothing wrong with your site if you receive a duplicate content warning. Canonical URLs tell search engines which URL is the primary version of a page. Our Shopify themes output canonical tags on product, collection, and page templates so search engines index the preferred URL and de-duplicate similar URLs (for example, those created by filters, pagination, or variant parameters).

</details>

<details>

<summary>Do product URLs with ?variant=XXXX hurt SEO?</summary>

No. Our themes may append `?variant=ID` to product URLs to preselect a specific variant (for example, a color or size) after certain actions like option changes, quick add, or sharing a specific variant. All our themes output a canonical tag on product pages that points to the main product URL without the `?variant` parameter. Search engines consolidate signals to that canonical URL, so these parameterized URLs don't create duplicate content and don't harm SEO.

</details>

<details>

<summary>Why am I seeing "large HTML" warnings?</summary>

Some SEO tools may flag pages with large HTML sizes. While a large page can sometimes mean a slow website, that's not always true—many large pages still load quickly. So, this warning isn't always reliable.

**What you can do:**\
Focus on [improving your page speed](/paper/guides/basics/improve-page-speed) where possible. You can also use [Google Search Console](https://search.google.com/search-console/welcome) to check for any actual performance or indexing issues. If Search Console doesn't show any warnings, it's safe to ignore the alerts from your SEO tool.

</details>

## Improve SEO results

1. **Hire an SEO Expert**: Get professional help to create an SEO plan that matches your brand.
2. **Invest in Ads**: Organic traffic is limited. Pay for ads to increase visibility, especially in competitive markets.
3. **Use Social Media**: Boost your store's presence and create backlinks through social media promotion.
4. **Focus on Relevant Keywords**: Avoid overloading with irrelevant keywords. Aim for content that aids users, not just search engines.
5. **Publish Original Content**: Regularly add new, unique content like blog posts. Avoid copying from other sites to maintain uniqueness.

## Edit content shown in search results

To edit how your pages appear in Search results go to your page or post on Shopify, click **Edit website SEO**. From here you can change the title, meta description, and URL handle.


# Accessibility for Shopify

## What is accessibility

Accessibility covers a range of concerns, ensuring customers with disabilities, like visual or motor impairments, can easily use your store. This includes features like keyboard navigation and screen readers.

We prioritize accessibility, ensuring our themes follow best practices. We are committed to continually enhancing our themes so that every user can easily navigate your storefront.

## FAQs

<details>

<summary>What is ADA</summary>

The ADA, or Americans with Disabilities Act of 1990, is a US civil rights law that prohibits discrimination against individuals with disabilities in various areas of public life, ensuring they have equal opportunities and access.

</details>

<details>

<summary>Is my theme compliant with ADA</summary>

Our themes are built with clean, semantic code and accessibility-friendly features where possible, ultimate responsibility for ADA compliance rests with the website owner. This is because compliance depends on how the theme is implemented—including content, imagery, third-party apps, and customizations—all of which fall outside our control.

</details>

<details>

<summary>Can you help make our theme ADA compliant</summary>

Please note that while we strive to make our themes accessible, we cannot guarantee full compliance with ADA standards. However, if you encounter any accessibility issues due to theme code, we will be happy to address these issues.

</details>

## Best practices

How a theme is used plays a big part of weather a storefront is accessibility. What sections are used and how they are setup can have a big difference in overall website accseibility.

* **Use screen reader-friendly content:** Add real text instead of uploading images with text on them.

  **Check color contrast:** Our themes let you choose your own colors, but make sure your text and background have enough contrast. Aim for at least [AA-level contrast](https://coolors.co/contrast-checker/112a46-acc8e5).
* **Keep app use to a minimum:** Our theme is built for accessibility, but some apps might add code that isn't. It's best to check with the app developers about how the accessibility of their apps.


# Products


# Product badges

Product badges can be used to highlight key information about products. Badges can help customers make decisions about what products they want to explore more.

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

## Using product tags

{% stepper %}
{% step %}
Open the product you’d like to update in Shopify
{% endstep %}

{% step %}
Scroll down to **Tags**
{% endstep %}

{% step %}
Enter “badge\_Your badge text”

* *Your badge text* could be replaced with any text you want
  {% endstep %}

{% step %}
Click **Save**
{% endstep %}
{% endstepper %}

## Using product metafields

{% stepper %}
{% step %}
Navigate to Settings > Custom data > Products
{% endstep %}

{% step %}
Click Add definition
{% endstep %}

{% step %}
In the name field enter "Product badge"
{% endstep %}

{% step %}
\
Ensure the namespace and key field is `custom.badge`
{% endstep %}

{% step %}
Select Type and choose "Single line text"

<figure><img src="/files/LGli4tV4uCEKMh5Wcfk7" alt="" width="287"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Update metafield

{% stepper %}
{% step %}
Navigate to the product you’d like to update
{% endstep %}

{% step %}
Scroll to the bottom and enter in text for the "Product badge" metafield
{% endstep %}

{% step %}
Click Save
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Tags can also be updated using third-party apps, the bulk editor, or even the csv product import feature
{% endhint %}

\\


# Product subtitles

Taglines or subtitles can be included using Metafields. This can be used to show a short description for your product.

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

{% stepper %}
{% step %}

### Enable setting in theme

1. Navigate to **Theme settings** > **Product cards**
2. Check **"Enable product tagline"**
3. Hit **Save**
   {% endstep %}

{% step %}

### Create metafield definition <a href="#h_51805de558" id="h_51805de558"></a>

1. Navigate to **Settings** > **Custom** **data** > **Products**
2. Click **Add definition**
3. In the **name** field search “**Product subtitle**”
4. Select **Product subtitle** then click **Save**
   1. Since "Product subtitle" is using a standard metafield the handle should already be set as "descriptiors.subtitle"

<figure><img src="/files/j1EFxXqfsdgAgZq0mR65" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Update metafield <a href="#h_51805de558" id="h_51805de558"></a>

{% hint style="info" %}
Metafields can also be updated using the bulk editor
{% endhint %}

1. Navigate to the product you’d like to update
2. Scroll to the bottom and enter in a tagline in “**Product subtitle**”

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

3. Hit **Save**
   {% endstep %}
   {% endstepper %}


# Variant swatches

Swatches are used to make variant selections easier and more intuitive for customers when they are selecting an option with color. Swatches appear throughout your theme in various places and can be used with custom images or hex code colors.

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

In order to display swatches on a product page or within a product card we can use metafield connected variant options. This might sound complicated but it's super easy to setup and works great out of the box.

{% stepper %}
{% step %}
Go to the product you want to update
{% endstep %}

{% step %}
Scroll to **Category**
{% endstep %}

{% step %}
Select the Category of your Product
{% endstep %}

{% step %}
Scroll to **Variants**
{% endstep %}

{% step %}
Click **Add variant**
{% endstep %}

{% step %}
Add a new option like Color or Material
{% endstep %}

{% step %}
Right of Option name, click matching metafield

eg. "Color" or "Material"

<figure><img src="/files/pAXmiDj2mxpIS8NZ2hXx" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Enter Swatch names

{% hint style="info" %}
From here you'll be able to change the hexcode or image of each swatch by clicking into it.
{% endhint %}
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Fixed buy buttons


# Disable default ratings when using a third-party app


# Replace “Add to cart”

The “Add to cart” text can be customized for each product using metafields. This is useful if you want to change the wording for specific products. For example, you could use this to display “Pre-order” for one product.

{% stepper %}
{% step %}

#### Create metafield definition <a href="#h_18d27d70b1" id="h_18d27d70b1"></a>

1. Navigate to **Settings** > **Custom** **data** > **Products**
2. Click **Add definition**
3. In the name field type “**Button text**”
4. Ensure the namespace and key field is `custom.button_text`
   {% endstep %}

{% step %}

#### Update metafield <a href="#h_da3430396b" id="h_da3430396b"></a>

1. Navigate to the product you’d like to update
2. Scroll to the bottom and enter in text for the “Button text” metafield
3. Click **Save**
   {% endstep %}
   {% endstepper %}

{% hint style="info" %}
Metafields can also be updated using the bulk editor
{% endhint %}


# Option blocks


# Dynamic variant images

Enabling “Show selected variant images only” will update your product pages to only show images assigned to each variant. This is useful if you have products that are visually different. Using this will help show customers which variant they have selected. For example if you have a shirt in blue and red - you can show only the red product photos when customers have selected red.

To show variant-specific images **and** shared lifestyle or size-guide photos at the same time, see [Variant image filtering with shared images](/paper/guides/products/variant-image-filtering-with-shared-images).

{% stepper %}
{% step %}
**Navigate to the product template**

1. Go to **Online Store** > **Themes** > **Customize**
2. From the dropdown in the center of the top bar select **Products** > **Default product**
3. In **Theme sections** select **Product main**
4. Scroll down and toggle on **Show selected variant images onl**
   {% endstep %}

{% step %}
**Order your images**

{% hint style="info" %}
Images must be ordered depending on their variants to ensure they are correctly shown when customers change their selection.
{% endhint %}

1. In your Admin, navigate to your Products
2. Upload all images under media in your product settings
3. Ensure the images are sorted in the same order as your variants
4. Assign featured images to each variant that match the first image.
   1. The below image will help illustrate how to achieve this.

<div align="left"><figure><img src="https://downloads.intercomcdn.com/i/o/1199111437/9087463c15b310aa77b99f73/Poster%2B-C2-B7%2BProducts%2B-C2-B7%2BBig%2BTote%2B-C2-B7%2BShopify%2B2023-09-06%2B17-32-57.png?expires=1744682400&#x26;signature=dd43a5947eadd3d59a74e56eff20fe252279e325718ec1d77b9cd329e196f06e&#x26;req=dSEuH8h%2FnIVcXvMW1HO4zbU7h%2BpLK%2BDDYKqzdz5v%2BClfFHjA%2FDMSkvnX%2FIpN%0AkZFGLHPiXFILbqaBO9Q%3D%0A" alt="" width="375"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}


# Variant image filtering with shared images

Paper’s **Only show media associated with the selected variant** setting (in the product section) filters the gallery so customers see images tied to the active variant. Merchants with large variant catalogs often also need **shared** images—lifestyle shots, size guides, or detail photos—that stay visible for every variant. This guide explains how filtering works, built-in behavior for unassigned media, and options when you need more control.

For basic setup, see [Dynamic variant images](/paper/guides/products/dynamic-variant-images).

## How variant filtering works

When **Only show media associated with the selected variant** is enabled on **Product main** (or **Featured product**):

1. Paper groups each **image** with variants whose **featured image** matches that media file.
2. Grouped images show or hide with Alpine.js as customers change variants.
3. **Images not linked to any variant featured image are not filtered**—they remain visible for every variant selection.

Videos, 3D models, and external video media are not filtered the same way as variant-linked images.

| Setting                                              | Location                           | Default |
| ---------------------------------------------------- | ---------------------------------- | ------- |
| Only show media associated with the selected variant | Product section (**Product main**) | Off     |

## Show variant images plus shared lifestyle shots (built-in)

To keep shared images visible while filtering variant-specific photos:

1. Enable **Only show media associated with the selected variant** on the product template.
2. In Shopify admin, open the product **Media** list.
3. Assign **featured images** only to variant-specific photos (each colorway’s hero, etc.).
4. **Do not assign** shared lifestyle, size chart, or detail images as any variant’s featured image—leave them as general product media only.
5. Order media so variant-specific images sit with their variant groups (see [Dynamic variant images](/paper/guides/products/dynamic-variant-images)).

**Result:** Selecting a variant shows that variant’s assigned images **and** all unassigned shared images together.

{% hint style="info" %}
If a shared image disappears when switching variants, it is likely assigned as a variant featured image. Remove that assignment so the image stays in the shared pool.
{% endhint %}

## Limitations

* There is **no theme setting** to mark individual images as “always visible” while also using them as a variant featured image.
* Filtering is **all-or-nothing** per product template—you cannot enable it for some products only without separate templates.
* The setting does not support “pin these three images” independently of featured-image rules—unassigned media is the supported approach.

## Workarounds for advanced catalogs

### Use separate product templates

Create a alternate product template without filtering for products that need the full gallery always visible. Assign the template under **Products** > **Theme template** in admin.

### Custom Liquid (developer)

For rules that unassigned media cannot cover (for example pinning images by tag or metafield), a developer can customize gallery snippets (`product__gallery-grid.liquid`, `product__gallery-slider.liquid`, etc.). That is custom code—see [Support policy for modified theme code](https://github.com/BrickspaceLab/theme-docs/blob/main/general/general/support-policy-for-modified-theme-code.md).

### Duplicate media per variant (last resort)

Duplicating the same lifestyle file under each variant’s featured image works but increases admin overhead and is harder to maintain than leaving shared files unassigned.

## Related reading

* [Dynamic variant images](/paper/guides/products/dynamic-variant-images)
* [Use custom templates](/paper/guides/basics/use-custom-templates)
* [Add custom Liquid](/paper/advanced-customizations/adding-custom-liquid)


# Variant filtering

Your collection page filtering can be customized from the [Shopify Search and Discovery app](https://apps.shopify.com/search-and-discovery). Using this app you can add new filters and customize how they appear on your theme.

Shopify has recently made a number of improvements to metafields and how they work with swatches. This is great news for us because now swatches are much easier to manage and update.

### Add swatch filter from metafield <a href="#h_4f300afd17" id="h_4f300afd17"></a>

{% stepper %}
{% step %}

### Add swatch filter from metafield <a href="#h_4f300afd17" id="h_4f300afd17"></a>

1. Go to **Settings** > **Custom Data**
2. Scroll down to **Metaobject** definitions then click **Add definition**
3. Add a name and description to your metaobject
   * You can use any name or description. E.g. "Swatch"
4. Add three fields to your metaobject

   * Label, color and image.
   * Label should be a required field using "Single line text" - Make sure to select "List of values" after clicking single line text.
   * Color is not required and uses "Color".
   * Image is not required and uses "File" with "Accepts specific file types - Images" selected.

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

{% endstep %}

{% step %}

### Create metafield to link to metaobject

We now have to assign values so data is populated for our new metafields.

1. Go to **Settings** > **Custom** **data**
2. Click **Product**
3. Select **Add definition**
4. Add a name and description to your new metafield.
   * You can use any name or description. E.g. "Swatch"
5. Click **Select type** then pick **Metaobject**
6. Choose **List of values**
7. In the reference field enter the Metaobject you have just created
8. Assign values to each product
9. Hit **Save**

<figure><img src="/files/9UMPytmgkWXxpwgUjUBy" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Link metafields to products

1. Find a product you want to update
2. Scroll down to **Product metafields**
3. Add the colors you'd like to highlight for this product
   {% endstep %}

{% step %}

### Connect to filter

1. Open the [**Search and discovery app**](https://apps.shopify.com/search-and-discovery)
2. Navigate to **Filters**
3. Click **Add filter**
4. Click **Select source,** then look for the new product metafield you just created
5. Add a label
   * You can use any name or description. E.g. "Color" or "Material"
6. Click **Save**
   {% endstep %}
   {% endstepper %}

### Add swatch filter from 'Color' option <a href="#h_c284ce1b06" id="h_c284ce1b06"></a>

{% hint style="info" %}
You can add filters using color product options. This is a easy way to add filters but will require swatch files to be uploaded in a specific format. Swatches will only appear using this approach when the product option matches "color" - or a translation of color.
{% endhint %}

1. Open the [**Search and discovery app**](https://apps.shopify.com/search-and-discovery)
2. Navigate to **Filters** and click **Add** **filter**
3. Click **Select source** then look for the product option **Color**

{% hint style="info" %}
This is the same approach you would take if you wanted to filter by any other product option like size.
{% endhint %}

4. Add a **label**
   1. You can use any name or description. E.g. "Color"
5. Hit **Save**

### Caveats of metafield filtering

If you use metafield swatch filtering you'll have to ensure you update your metafields for all products that you want to appear on this filter - this will NOT happen automatically even if category metafields and variant options are displaying swatches.

### A temporary fix for adjusting color swatch sizing <a href="#h_9af1582f1b" id="h_9af1582f1b"></a>

1. Go to **Online Store** > **Theme settings** > **Custom css**
2. Within your custom css block paste the following code:\
   ​\
   ​*For color swatches/custom swatches* (adjust the REM within height and width in increments of .1 for the best results) :

   ```
   .btn.btn--plain {
     height: 2.2rem;
     width: 2.2rem;
   }
   ```

**Upload missing swatch files**

You may notice that not all of your color filters are appearing with swatches. If this is the case you may have to upload custom swatch files.

Swatches will only appear automatically if the color name matches a default [CSS color](https://help.brickspacelab.com/en/articles/9939903-paper-using-color-and-option-swatches).

1. Identify all swatches that are missing
2. Upload a 64x64 jpg file for each swatch you want to replace.
   * Swatches must be named all lowercase and prepended with “swatch-”. For example, if your color variant is “Electric blue” you would name your file “swatch-electric-blue.jpg

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


# Disable quick add

The Quick add feature can be disabled for individual products. This may be useful if you have a heavily customized product page that is not compatible with the quick add component. Using this can force customers to visit your product page.

{% stepper %}
{% step %}
Open the product you’d like to update in Shopify
{% endstep %}

{% step %}
Scroll down to **Tags**
{% endstep %}

{% step %}
Enter “**disable\_quick\_add**”
{% endstep %}

{% step %}
Click **Save**
{% endstep %}
{% endstepper %}


# Customize filters

Collection templates in Paper are compatible with Shopify's official [Search & Discovery](https://apps.shopify.com/search-and-discovery) app. This app can be used to customize and extend the available filters for your store.

{% stepper %}
{% step %}

#### Enable collection filters

1. Go to **Online Store** > **Themes** > **Customize**
2. From the dropdown in the center of the top bar select **Collections** > **Default** **collection**
3. On the left hand side, select **Collection grid** in the theme sections
4. Scroll down under **Display** and check **Enable filter**
   {% endstep %}

{% step %}

#### Enable collection sorting

1. Go to **Online Store** > **Themes** > **Customize**
2. From the dropdown in the center of the top bar select **Collections** > **Default** **collection**
3. On the left hand side, select **Collection grid** in the theme sections
4. Scroll down under **Display** and check **Enable sort**
   {% endstep %}

{% step %}

#### Customizing filtering options

1. Go to the [Search & Discovery](https://apps.shopify.com/search-and-discovery) app to adjust filters
2. Hit **Save**
   {% endstep %}
   {% endstepper %}


# Gift cards

Gift cards are a great way to boost sales for holiday seasons or special promotions. Shopify gift cards can be purchased online or in-person. They work with the Paper Shopify theme and have an additonal option to let customers specifiy an email address to send the gift cards too.

### FAQs

<details>

<summary><strong>How do I ensure gift cards are sent</strong></summary>

Gift cards will be emailed to your customers only after order notifications are sent. To do this, navigate to an order on your Shopify account with a gift card. Click **Fulfill items**, then select **Send a** [**notification**](https://admin.shopify.com/store/brickspacetestingstore/email_templates/shipping_confirmation/preview) **to the customer**, then click **Fulfill items**<br>

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

</details>

<details>

<summary>How do I see where a gift card is sent</summary>

You can find more information on where gift cards were sent by viewing your order history. To do this find an order with a gift card purchase, then scroll down to **You scheduled X gift cards for fulfillment, click to expand this dropdown**, from here you can click each gift card number to view further details on each gift card.

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

</details>

### How to enable gift card recipient form

By default the gift card recipient form is disabled. This means gift cards will be sent to the email address that was used to complete the purchase. If you want to enable the gift card recipient form to let customers send gift cards to another email this can be done in your theme settings.

{% hint style="info" %}
When enabled the recipient form is not required. A customer will still have to check **I want to send this as a gift**. Otherwise the gift card will be sent to the email used to complete the order.
{% endhint %}

{% stepper %}
{% step %}
**Navigate to your product template**

1. Open up the theme editor
2. Select the product template
   {% endstep %}

{% step %}
**Enable the recipient form**

1. Click into the **Buy buttons** block
2. Scroll down and check **Enable recipient form for gift card products**
   {% endstep %}

{% step %}
**Click save**
{% endstep %}
{% endstepper %}


# Quantity picker

A quantity input field can be enabled or disabled on product pages. If you aren't seeing a quantity field it's likely it has been disabled in your theme settings.

{% stepper %}
{% step %}
Go to **Online** **Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
From the dropdown in the top bar select **Products** > **Default** **Product**
{% endstep %}

{% step %}
In the **Product** section click into the **Buy buttons** block
{% endstep %}

{% step %}
Scroll down to and enable **Show quantity input**
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Subscription options

Shopify subscriptions can be a bit tricky to setup. This guide will walk you through different options for displaying subscription options on your product page.

### Using the built-in subscription options

Our Shopify themes come with built in subscription options. We recommend using this approach as you'll have more control over the experience and can customize this with the help of a developer.

However, this may cause complications with your product templates if you've already installed a third-party subscription widget.

* Ensure the third party subscription widget is disabled
* Ensure the product block Options is included on your product template

### Using third-party subscription options

Disabling the default subscription options is possible if you'd like to stick to using a third-party widget. There a few more steps here.

{% stepper %}
{% step %}
Go to **Online** **Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
Click the top dropdown > **Products** > **Create template**
{% endstep %}

{% step %}
Label this template 'subscription'
{% endstep %}

{% step %}
On the left hand side, click into the **Product** section
{% endstep %}

{% step %}
Check **Enable default selling plan widget**
{% endstep %}

{% step %}
On the left hand side, click into the **Options** block and click **Remove block**
{% endstep %}

{% step %}
Go into your subscription app and follow instructions to install the subscription widget
{% endstep %}

{% step %}
Assign the 'subscription' product template to all products that have a subscription plan
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Sibling products

Paper supports two methods to display products as swatch options. This is helpful if you want to split one product into seperate listing but maintain visibility for each option. When this is setup customers will see sibling products as options so they can easily select different options or colors.

### Using the Combined listing app <a href="#h_2bcf225838" id="h_2bcf225838"></a>

The app can be used to link multiple product together. Visit the Shopify help center to [learn more about this feature](https://www.shopify.com/enterprise/blog/combined-listings?utm_campaign=winter24edition\&utm_channel=W24-editions-website\&utm_content=W24E\&utm_medium=W24E-page\&utm_source=editions).

### Using the Linked products block <a href="#h_cca672d346" id="h_cca672d346"></a>

If you have multiple versions of one product split into different product listing it may be hard for customers to find the option they want. Using the “Linked products” block you can display additional products as options on your product page.

<div align="left"><figure><img src="https://downloads.intercomcdn.com/i/o/1199113876/d52e9df88e7df4162b8d1a2a/CleanShot+2024-09-30+at+16_38_29%402x.png?expires=1744682400&#x26;signature=77329ecf2a86c61fe8b5aa4a8c3ee774ca76885856f5adea859b17cd9de91d47&#x26;req=dSEuH8h%2FnolYX%2FMW1HO4zbKV%2FaqpEaFXxYnS4Ar%2FPaaCkex3r0CyKkqc2esv%0AFKm0Q3gjxu03JLwRdz0%3D%0A" alt=""><figcaption></figcaption></figure></div>

{% stepper %}
{% step %}
**Enable the product block**

1. Go ton Online Store > Themes > Customize
2. Navigate to the product template then click "Add block" within the "Product" section
3. Move the block and add a label
   1. It's usually best to display the "Linked products" block above the "Buy buttons"
   2. Try adding a label that describes the additional linked products. If the additional products are variants of different color you could update the label to "Color".
4. Hit **Save**
   {% endstep %}

{% step %}
**Create metafield definition**

1. Navigate to **Settings** > **Custom** **data** > **Products**
2. Click **Add definition**
3. In the name field type “Linked collection"
4. Ensure the namespace and key field is `custom.linked_collection`
5. Set the data type as "Collection"
6. Hit **Save**
   {% endstep %}

{% step %}
**Update metafield**

1. Navigate to the product you’d like to update
2. Scroll to the bottom and select a collection for the metafield
3. Click **Save**
   {% endstep %}
   {% endstepper %}


# Bundled products

The bundle product template can be used to sell multiple products from a single page. This can be combined with automatic discounts for an added layer of functionality. To set this up you'll need to create a new metafield definition then assign the bundle template to a new product.

<figure><img src="https://downloads.intercomcdn.com/i/o/1199127570/6f61db4dbc02e91d09e286df/CleanShot+2024-09-30+at+16_52_17%402x.png?expires=1744682400&#x26;signature=70c912d9873f8d8e939d68c0a6f1ed1be610960c00c418497443ff59ccc57cca&#x26;req=dSEuH8h8moRYWfMW1HO4zfR48YsnIvPzChhoeb370%2Bvco%2Bgw9qRtQNn8DSCG%0A9N%2FcIqN%2FrkbflJuCsfQ%3D%0A" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
**Create metafield definition**

1. Navigate to **Settings** > **Custom** **data** > **Products**
2. Click **Add definition**
3. In the name field type “Product bundle”
4. Ensure the namespace and key field is `custom.product_bundle`
5. Set the data type as "Product" then select **List** **of** **products**
6. Hit **Save**
   {% endstep %}

{% step %}
**Create a bundle template**

1. In the Shopify theme editor select from the top dropdown **Products**
2. Click **Add template**
3. Enter a name
   1. This can be anything. E.g. "Bundle"
4. On the left hand side, look for **Product**
5. Under **Product**, click **Add block**
6. Choose **Bundled products**
7. Hit **Save**
   {% endstep %}

{% step %}
**Create a bundle product**

1. Create a new product on Shopify
2. Add images as needed - you'll likely want to include photos showcasing all the items in your bundle. Even better if you can get photos of all the products together to really highlight the "bundle" part
3. Set a price for the product - this should be the sum of all the items in the bundle
4. **Uncheck Track quantity**. This product won't actually be purchased itself instead it will act as a landing page where the products within the bundle are purchased
5. Scroll down to **Metafields** then click **Product bundle**
6. Click **Select products** and add as many products as you'd like to include in this bundle
7. On the right-hand side under **Theme template** select **bundle** (or a different template that you've created using the "Bundled products" block)
8. Hit **Save**
   {% endstep %}
   {% endstepper %}


# Custom fields

The Custom field product block can be used to add additional fields to a product form. This can be used to collect more information. E.g. include a custom engraving field to let customers customize their purchase.

<figure><img src="https://downloads.intercomcdn.com/i/o/1199125431/e81b42de10b66c8627c12935/CleanShot+2024-09-30+at+16_49_55%402x.png?expires=1744682400&#x26;signature=f55ac970e980ed101f96eb551b35536b8cd94cd98f68186463d58192ced2a290&#x26;req=dSEuH8h8mIVcWPMW1HO4zZfgxmMyDxavLEPFkHTd4Y6AiYxrDq%2FIYV9y%2Btoe%0AvPpSW6RNwNpbtdbX%2Bzc%3D%0A" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Go to **Online** **Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
From the dropdown in the top bar select Product

You may want to create a new product template, if you want your custom field to show up on every product page then you can use the default product template. Otherwise you would want to create a new template.
{% endstep %}

{% step %}
On the lefthand side click **Add** **block** then select **Custom** **field**
{% endstep %}

{% step %}
Add a label and check Enable required field if you want to make this a mandatory field to use
{% endstep %}

{% step %}
Reposition the block - it’s best to place this just above the Buy buttons block
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Content drawers

The Content drawer block allows you to display a link that opens a slide-out drawer. Use it to conveniently showcase product details such as sizing charts or ingredient lists.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td></td><td><a href="/files/hYHuA1GgsRgYMeMQbp6N">/files/hYHuA1GgsRgYMeMQbp6N</a></td></tr><tr><td></td><td><a href="/files/mZ6yY01haXoP2w0xVMLp">/files/mZ6yY01haXoP2w0xVMLp</a></td></tr></tbody></table>

{% stepper %}
{% step %}
**Open the theme editor**

1. Go to **Online** **Store** > **Themes** > **Customize**
2. From the dropdown in the top bar select **Product**
   {% endstep %}

{% step %}
**Add the Content drawer block**

1. On the lefthand side click **Add block** then select **Content drawer**
2. In the Option field enter the text that matches the product option you want to display this next to.
   * This is an optional field. Leaving this empty will ensure the block is displayed where the block is placed rather than beside the option.
   * E.g. if you want to display this next to Size then enter ‘size’ in the Option field. If no option is specified this block will be shown in the order it appears in the product template.
3. Add a title and select page content
   * Select a page that uses plain text. If you select a page that has custom sections it may not work within the slide-out drawer.
     {% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}

#### Clean Size Charts

If you're looking for a more features to showcase size charts on your product page we recommend [Clean Size Charts](https://apps.shopify.com/size-charts-by-clean-canvas).

A powerful tool for creating clean, customizable size charts that look great on any product page. Clean Size Charts automates the setup process by generating measurement guides and size conversions, and it also supports more advanced setups like country-specific charts and multiple size systems—perfect for growing or international stores.


# Hide out of stock options

Paper includes built-in settings to control how unavailable product options are displayed to customers. You can choose to hide them completely or show them as disabled.

***

### Using theme settings

{% stepper %}
{% step %}
Go to **Online Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
Click **Theme settings** (gear icon)
{% endstep %}

{% step %}
Navigate to **Product options**
{% endstep %}

{% step %}
Find the **Unavailable indication** setting
{% endstep %}

{% step %}
Choose your preferred option:

* **Show as disabled** - Displays unavailable options with a strikethrough (default)
* **When option is not available** - Hides unavailable options completely
* **Do not indicate** - Shows all options as available
  {% endstep %}

{% step %}
Click **Save**
{% endstep %}
{% endstepper %}

***

### Recommendation

**Show as disabled** is recommended because it:

* Shows customers all available variations
* Clearly indicates what's temporarily unavailable
* Helps customers understand the full product range
* May encourage customers to check back later

**Hide unavailable options** if:

* You want to keep the interface clean
* Unavailable options are permanently discontinued
* You have many options and want to reduce clutter

***

### Need more control?

For advanced CSS customization beyond these settings, see our [advanced customization guide](https://github.com/BrickspaceLab/theme-docs/blob/main/general/developer-guides/advanced-customizations/hide-out-of-stock-options.md).


# Collections


# Add tag filtering

Using Paper you can update collection template to use tag based filtering. This is an easy way to surface sub-categories within a collection. For example, you may have a collection titled Accessories using nested navigation you could then set up links to Wallets, Phone Cases, and Bags.

In this example clicking "Wallets" would filter the current collection to only show products that contain the tag "wallets".

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

{% stepper %}
{% step %}

#### Create metafield definitions

1. Click **Collections** then click **Add** **definition**
2. Set **Name** to **Subtags**
3. Set **Namespace** and key to `custom.subtags`
4. Click **Select content type** and select **Single line text**
5. Click **List of values**
6. Hit **Save**
   {% endstep %}

{% step %}

#### Add data to collection metafield

1. Open the collection you’d like to add a tag filtering too
2. Scroll to the bottom **Metafields** area.
3. Enter a text value for each tag filter
   * There's no need to include "All" as that will be the first link within tag filtering
   * Each entry should match a tag that is present within your collection
     {% endstep %}
     {% endstepper %}


# Add a nested menu

Each collection can be set up with nested navigation. This is useful if you have a large collection with multiple sub-groupings within. For example, you may have a collection titled Accessories using nested navigation you could then set up links to Wallets, Phone Cases, and Bags.

In this example clicking "Elastic" would navigate to a new page loading the "Elastic" collection page.

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

{% stepper %}
{% step %}

#### Create metafields definitions

1. Go to **Settings** > **Metafields**
2. Click **Collections** then click **Add definition**
3. Set **Name** to **Subcollections**
4. Set **Namespace** and key to `my_fields.subcollections`.
5. Click **Select content type** and choose **Single line text**
6. Click **Save**
   {% endstep %}

{% step %}

#### Add data to Collection metafield

1. Open the collection you’d like to add a tag filtering too
2. Scroll to the bottom **Metafields** area
3. Enter a text value for each tag filter
   * There's no need to include "All" as that will be the first link within tag filtering
   * Each entry should match a tag that is present within your collection
   * This text must be formatted in a specific way. Please ensure each menu item is separated by “&” then ensure each title and url for each item is separated by a “,”.
   * It should look something like this:
     * <pre><code><strong>Tops,/collections/tops&#x26;Bags,/collections/bags&#x26;Shorts,/collections/short
       </strong></code></pre>
4. Click **Save**
   {% endstep %}
   {% endstepper %}


# Collection blocks

The collection template can include optional blocks. These blocks are displayed in-grid alongside your products. This can be used to display a text block or a newsletter. Both of which are great for highlighting ongoing promotions

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

{% stepper %}
{% step %}
Go to **Online Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
From the dropdown in the center of the top bar select **Collections** > **Default collection**
{% endstep %}

{% step %}
Select **Collection grid** from the theme sections
{% endstep %}

{% step %}
Click **Add Block** then select either **Newsletter** or **Content**.
{% endstep %}

{% step %}
Click into the newly created block
{% endstep %}

{% step %}
For the Index field enter the number position you want to display within the collection grid.

* Entering 1 will ensure this block is displayed as the first item in your grid.
  {% endstep %}

{% step %}
Update the content of your block as needed
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Sitewide


# Use device-specific visibility

After editing your theme and previewing it across different devices you may find that some sections just look better on some devices. For example on mobile devices you may want to use a slider instead of a grid section.

{% stepper %}
{% step %}
Go to **Online Store** > **Themes** > **Customize**
{% endstep %}

{% step %}
Select the section you're looking to hide
{% endstep %}

{% step %}
Scroll down to **Display** then click either **Show on mobile only** or **Show on desktop only**
{% endstep %}

{% step %}
Hit **Save**
{% endstep %}
{% endstepper %}


# Embed YouTube videos

Use a **Custom Liquid** block to add a YouTube video anywhere in Paper where blocks are supported.

## Add a YouTube embed

1. In Shopify admin, go to **Online Store > Themes**.
2. Click **Customize** on your active Paper theme.
3. Navigate to the section where you want to show the video.
4. Add a **Custom Liquid** block.
5. In YouTube, open your video, click **Share > Embed**, and copy the embed code.
6. Paste the embed code into the Custom Liquid block, then save.

Example:

```html
<span>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/ALiyPTbL8Rg?si=rQKonpMMXeYSjJGC"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</span>
```

## Make the video full width (optional)

If you want the video to scale to the full width of its container, wrap each embed in a `.video-wrapper` element and add the CSS below.

```html
<style>
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px; /* spacing between videos */
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="video-wrapper">
  <!-- Paste your YouTube embed code here -->
  <iframe
    src="https://www.youtube.com/embed/ALiyPTbL8Rg?si=rQKonpMMXeYSjJGC"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
  ></iframe>
</div>
```

> Support note: If the responsive styling does not apply, place the `<style>` block before the first `<div class="video-wrapper">` block in your Custom Liquid content.

To add multiple videos, repeat the `<div class="video-wrapper">...</div>` block for each video.


# Dynamic discount popups

If you're already using automatic discounts. This is a neat little feature to ensure customers are aware of the discounts being applied to their cart. Take your automatic discount URL and append "?dt=Custom+text" to change the content that appears in the popup.

This will display a popup with your discount and the "Custom text" message

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

{% stepper %}
{% step %}
In Admin, go to **Discounts** Shopify find the discount you want to share
{% endstep %}

{% step %}
Click into the discount you want to share
{% endstep %}

{% step %}
Click **Promote** > **Get a shareable link** > **Copy link**
{% endstep %}

{% step %}
Add "?dt=Custom+text" to the end of the link

* For example if you want to add "Save 10% storewide" to your popup your shareable link should look like this:
  * `https://paperthemedemo2.myshopify.com/discount/SAVE10?dt=Save+10%25+storewide`
* If you're using the `?redirect=` option in your discount URL you'll want to add the custom URL text like this:
  * `https://paperthemedemo2.myshopify.com/discount/SAVE10?redirect=%2Fcollections%2Fwallets&dt=Save+10%25+storewide`
    {% endstep %}

{% step %}
Use the link for Promotions
{% endstep %}
{% endstepper %}

<br>


# Create a Mapbox API key

{% hint style="info" %}
Mapbox comes with a free tier. Please refer to their pricing page to see if you'll fall under free usage of the API key - <https://www.mapbox.com/pricing#maps>
{% endhint %}

In order to use some of the features on our theme like the store locator you’ll need to create and update a Mapbox API key.

{% stepper %}
{% step %}
**Visit Mapbox**
{% endstep %}

{% step %}
**Sign up for a new developer account**
{% endstep %}

{% step %}
**Create a new API key**
{% endstep %}
{% endstepper %}


# Design your menu

### Menu Styling

Menu Styling enhances your navigation with customizable blocks like buttons, cards, products, and collections. These elements help showcase your content and improve the shopping experience through an organized, interactive menu.

To edit your menu:

1. Click "Header group" in the left sidebar
2. Select "Header"
3. Click the "+" button to add blocks (Button, Card, Products, etc.)
4. Click on any block to customize it

<table><thead><tr><th width="115.00006103515625">Setting</th><th>Description</th><th></th></tr></thead><tbody><tr><td>Button</td><td><p>Adds a clickable button like "Shop now" that appears beside your cart and search bar.</p><p>Use buttons to highlight important actions or promotions that you want customers to take.</p></td><td><img src="/files/jRLPr3IvBnmt5BlrYsrX" alt="" data-size="original"></td></tr><tr><td>Card</td><td><p>Displays standard card content within a dropdown menu.</p><p>Cards can showcase featured content, promotions, or important information in a visually appealing format when customers interact with your navigation.</p></td><td><img src="/files/6Cqpctdpcidi57fbwhdx" alt="" data-size="original"></td></tr><tr><td>Columns</td><td><p>Increases the length and spans the full width of the page.</p><p>Adding a Columns block is useful when you want to organize dropdown content into multiple sections or when you need to extend your menu without adding specific content.</p></td><td><img src="/files/ObrpR0JfFyWSl41NDQph" alt="" data-size="original"></td></tr><tr><td>Products</td><td><p>Allows products to be displayed directly within dropdown menus.</p><p>This creates a visual shopping experience where customers can browse products without leaving the navigation area.</p></td><td><img src="/files/nKmeSSrtpduzEqLgcXz0" alt="" data-size="original"></td></tr><tr><td>Collections</td><td><p>Showcases collection items within dropdown menus.</p><p>Use this to help customers quickly discover and navigate to specific product categories or themed collections in your store.</p></td><td><img src="/files/MYqhRUJK5p0Zn3Cjk6aq" alt="" data-size="original"></td></tr></tbody></table>


# Migrate custom changes

## Merging custom changes in Shopify themes - challenges and best practices

When working with Shopify themes, updating to a new version can introduce challenges when customizations have been made. Since Shopify does not provide a built-in way to merge custom changes automatically, you must manually merge these changes. This document outlines the key challenges and best practices for managing and transferring custom changes during theme updates.

### Challenges in merging custom changes

#### 1. Manual transfer required

* Custom code changes (HTML, CSS, JavaScript, Liquid) must be manually identified and reapplied to the updated theme.
* Shopify does not support automatic merging of theme modifications.

#### 2. Difficulty tracking changes

* Without proper documentation, locating custom changes can be time-consuming.
* Developers may not always know where modifications were made, leading to potential loss of functionality.

#### 3. Theme updates may overwrite customizations

* If an update is applied without first backing up custom changes, they may be lost.
* Some theme settings may reset, requiring reconfiguration.

#### 4. No control over data transfer (Shopify limitation)

* As theme developers, we cannot control how Shopify handles theme updates.
* The platform does not provide tools for selective merging of custom code.

***

### Best practices for managing custom changes

#### 1. Document all customizations

* Maintain a detailed log of all modifications, including:
  * Modified files (e.g., `theme.liquid`, `product-template.liquid`, `custom.css`).
  * Specific code snippets added or altered.
  * Any third-party apps or scripts integrated.

#### 2. Use a version control system (Git)

* Track changes using Git to easily compare old and new versions.
* Create branches for custom work to avoid conflicts during updates.

#### 3. Test updates in a development environment first

* Duplicate the live theme and apply updates in a development/staging environment.
* Verify that custom changes are preserved before pushing to production.

#### 4. Consider not updating if unnecessary

* If the current theme works as intended, updates may not be required.
* Weigh the benefits of new features against the effort of reapplying customizations.

#### 5. Work closely with developers

* Ensure developers are aware of all custom changes before an update.
* Provide them with documentation to streamline the transfer process.


# Blog tag filtering

Using Paper you can update blog template to use tag based filtering. This is an easy way to surface sub-categories within a blog. For example, you may can show filters to view blogs posts with specific tags

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

{% stepper %}
{% step %}

### Create metafield definitions

1. Open up **Settings** > **Custom data**
2. Click **Blogs**
3. Click **Add** **definition**
4. Set **Name** to **Subtags**
5. Set **Namespace** and key to "custom.subtags"
6. Click **Select** content type
7. Click **Single line text**
8. Click **List of values**
9. Hit **Save**
   {% endstep %}

{% step %}

### Add data to collection metafield

1. Go to **Online** **Store** > **Blog** **posts** > **Manage** **blogs**
2. Scroll to the bottom **Metafields** area
3. Enter a text value for each tag filter
   * There's no need to include "All" as that will be the first link within tag filtering
   * Each entry should match a tag that is present within your collection
4. Hit **Save**
   {% endstep %}
   {% endstepper %}


# Search results

{% hint style="info" %}
**Language Support**

**Live search is only supported in certain languages.** When implementing live search functionality, be aware of the following:

* Full predictive search functionality works best with Latin-based languages (English, French, Spanish, etc.)
* Languages using non-Latin scripts (Chinese, Japanese, Arabic, etc.) may experience limited functionality
* Search results may not properly handle diacritical marks in some languages
* Right-to-left (RTL) languages are supported but may require additional styling adjustments
  {% endhint %}

**Types of Search Components**

Our themes offer several ways to implement search functionality:

1. **Search Drawer** - A slide-out search drawer with predictive search functionality.
2. **Search Banner** - A prominent search field on a customizable background.
3. **Header Search** - Simple search integration in the header section.

**Common Features**

* Predictive search results
* Search recommendations
* Filtering by resource type (products, collections, articles, pages)
* Customizable appearance

**Performance Considerations**

* Large product catalogs may experience slower search response times
* Search results are limited to a maximum number of items per category
* Mobile devices may have reduced functionality compared to desktop
* Search indexing can take up to 24 hours to reflect new content

#### Search Drawer Settings

| Setting                     | Description                                                                 |
| --------------------------- | --------------------------------------------------------------------------- |
| Search recommendations      | Add suggested search terms that appear before a user begins typing          |
| Color scheme (top bar)      | Choose the color scheme for the search drawer's top navigation bar          |
| Border color (top bar)      | Set the border color style for the top navigation area                      |
| Color scheme (main section) | Select the color scheme for the main search results area                    |
| Border color (main section) | Choose the border color style for the main search results                   |
| Enable second column        | When enabled, displays product search results in a second column on desktop |

#### Search Banner Settings

| Setting                   | Description                                                             |
| ------------------------- | ----------------------------------------------------------------------- |
| Y spacing                 | Controls the vertical height of the banner                              |
| Image background desktop  | Background image displayed on desktop devices                           |
| Image background mobile   | Background image displayed on mobile devices                            |
| Video background          | Background video to display behind the search field                     |
| Show entire image         | When enabled, displays the entire image within the banner area          |
| Show video on mobile      | When enabled, displays the video background on mobile devices           |
| Color scheme              | Sets the background color scheme for the section                        |
| Text color                | Controls the color of text within the section                           |
| Border color              | Sets the color of any borders applied to the section                    |
| Button color              | Sets the style and color of the search submit button                    |
| Enable gradient           | Adds a gradient overlay to help text stand out against the background   |
| Enable background overlay | Adds a background overlay behind the search content for better contrast |
| Border position           | Controls where borders appear on the section                            |
| Y alignment               | Controls the vertical alignment of content within the section           |
| X alignment               | Controls the horizontal alignment of content within the section         |
| Enable margin             | When enabled, adds horizontal margin to the section                     |
| Enable max width          | When enabled, applies a maximum width to the search content             |
| Visibility                | Controls which devices the section appears on                           |
| Enable search             | When enabled, displays the search input field                           |

#### Header Search Settings

| Setting                 | Description                                    |
| ----------------------- | ---------------------------------------------- |
| Show search button      | Enable or disable search functionality         |
| Show search icon mobile | Choose to show search icon on mobile           |
| Search color scheme     | Select the color scheme for the search overlay |
| Search color border     | Choose the border style for the search overlay |


# Installing apps

Third-party apps often inject forms, popups, or widgets into your storefront. When an app embed looks unstyled, broken, or “wrong” compared to its marketing site, merchants sometimes assume the theme is at fault. In most cases, normal **CSS cascade** behavior is involved—and fixing the app’s appearance is the app developer’s responsibility, not the theme author’s.

### How app embeds inherit theme styles <a href="#how-app-embeds-inherit-theme-styles" id="how-app-embeds-inherit-theme-styles"></a>

Brickspace Lab themes ship global base styles: typography, button resets, form field styling, link colors, and spacing utilities. Any HTML the app injects into your page sits inside the same document as your theme.Browsers apply CSS from the outside in:

1. **Theme global styles** set defaults for elements like `button`, `input`, `h1`, and `a`.
2. **App stylesheets** load afterward and try to style the app’s own markup.
3. When selectors overlap, **specificity and load order** decide what wins.

If the theme’s global rules are broad (for example `button { font-family: … }`), app buttons can inherit theme fonts, padding, or borders even when the app author expected their stylesheet to control everything. That is expected browser behavior—not a theme bug.

### Why themes do not exclude vendor-specific app CSS <a href="#why-themes-do-not-exclude-vendor-specific-app-css" id="why-themes-do-not-exclude-vendor-specific-app-css"></a>

There are thousands of Shopify apps, each with different HTML structures and class names. Brickspace Lab themes cannot maintain a blocklist of vendor-specific CSS overrides in core stylesheets because:

* App markup changes between app versions without notice.
* Overrides for one app often break another app on the same store.
* Scoped fixes belong in the app’s integration layer or in **store-specific custom CSS**, not in the base theme.

We design themes for storefront consistency. App vendors are responsible for styles that survive inside customer themes.

### Our policy on third-party app support <a href="#our-policy-on-third-party-app-support" id="our-policy-on-third-party-app-support"></a>

Brickspace Lab **does not provide support for third-party app integrations**. That includes:

* Styling or layout of app popups, forms, or widgets
* Conflicts between app JavaScript and theme JavaScript
* App features that stop working after a theme update
* Code an app left in theme files after uninstall

For app issues, **contact the app developer first**. They control the embed, its CSS, and its scripts.For our full support scope, see [Contact support](https://app.gitbook.com/o/IxMO7qKqucxvsAjnGtFw/s/TnJCyRVLdtKs6ZCDLXr1/general/contact-support) and [Support policy for modified theme code](https://app.gitbook.com/o/IxMO7qKqucxvsAjnGtFw/s/TnJCyRVLdtKs6ZCDLXr1/general/support-policy-for-modified-theme-code).

### What merchants can do <a href="#what-merchants-can-do" id="what-merchants-can-do"></a>

#### 1. Confirm the app is the source <a href="#id-1.-confirm-the-app-is-the-source" id="id-1.-confirm-the-app-is-the-source"></a>

1. In **Customize**, open **Theme settings** > **App embeds** (or the template’s app blocks).
2. Disable the app embed temporarily.
3. Reload the page. If the styling issue disappears, the app—not the theme—is involved.

#### 2. Ask the app developer for scoped CSS <a href="#id-2.-ask-the-app-developer-for-scoped-css" id="id-2.-ask-the-app-developer-for-scoped-css"></a>

Request CSS that targets **only their embed’s root container** (for example a wrapper class the app documents). Good app CSS avoids resetting global `button` or `input` rules on the entire page.

#### 3. Add store-specific overrides (optional) <a href="#id-3.-add-store-specific-overrides-optional" id="id-3.-add-store-specific-overrides-optional"></a>

If the app vendor provides fix CSS, add it through:

* **Theme settings** > **Custom CSS** (all Brickspace themes), or
* A **Custom liquid** section for isolated markup

Keep overrides narrow. Avoid editing core theme files unless you accept [modified-code support limits](https://app.gitbook.com/o/IxMO7qKqucxvsAjnGtFw/s/TnJCyRVLdtKs6ZCDLXr1/general/support-policy-for-modified-theme-code).

#### 4. Prefer supported install methods <a href="#id-4.-prefer-supported-install-methods" id="id-4.-prefer-supported-install-methods"></a>

Use [app blocks and app embeds](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps) rather than manual script tags pasted into `theme.liquid`. See [Use and install apps](https://github.com/BrickspaceLab/theme-docs/blob/main/paper/guides/basics/use-and-install-apps.md) for general guidance.

### Common symptoms and likely causes <a href="#common-symptoms-and-likely-causes" id="common-symptoms-and-likely-causes"></a>

| Symptom                                     | Likely cause                               |
| ------------------------------------------- | ------------------------------------------ |
| App popup uses theme fonts or button styles | Global CSS inheritance (cascade)           |
| App form fields match theme inputs          | Theme form resets applied to injected HTML |
| App worked on a previous theme              | Different global CSS on the new theme      |
| App broke after uninstall                   |                                            |


# Sitewide


# Header

### Section overview

The header section controls the site navigation, logo, search functionality, and cart display across both mobile and desktop views.

#### Common use cases

* Main site navigation with dropdown menu capabilities
* Brand identity representation with customizable logo
* Access points for search, account, and cart functionality

#### Usage tips

* Keep navigation labels concise for better mobile display
* Use appropriate icon or text buttons based on your brand style
* Consider dropdown content carefully to avoid overwhelming users
* Test header layout in both desktop and mobile views to ensure optimal display

### Section settings

| Setting                 | Description                                                  |
| ----------------------- | ------------------------------------------------------------ |
| Dropdown menu           | Select the menu to display in the header navigation          |
| Search recommendations  | Select a menu for search recommendations                     |
| Logo                    | Upload your store logo                                       |
| Desktop logo height     | Set the height of your logo on desktop (in pixels)           |
| Mobile logo height      | Set the height of your logo on mobile (in pixels)            |
| Color scheme            | Select the color scheme for the header bar                   |
| Color border            | Choose the border style for the header                       |
| Bar layout desktop      | Select how the header elements are arranged on desktop       |
| Cart button             | Choose whether to display cart as icon or text               |
| Search button           | Choose whether to display search as icon or text             |
| Login button            | Choose whether to display login as icon, text, or hide it    |
| Menu button             | Choose whether to display menu as icon or text (mobile only) |
| Show search button      | Enable or disable search functionality                       |
| Show search icon mobile | Choose to show search icon on mobile                         |
| Enable click dropdown   | Enable dropdown menus to open on click instead of hover      |
| Dropdown color scheme   | Select the color scheme for dropdown menus                   |
| Dropdown color border   | Choose the border style for dropdown menus                   |
| Search color scheme     | Select the color scheme for the search overlay               |
| Search color border     | Choose the border style for the search overlay               |
| Visibility              | Control which devices display this section                   |

### Block settings

#### Content

This block allows you to add promotional content within dropdown menus to enhance navigation with images and text.

Block limit: 10

| Setting     | Description                                            |
| ----------- | ------------------------------------------------------ |
| Header menu | Enter the menu handle this content should appear under |
| URL         | Set a link for the entire block                        |
| Heading     | Add a title for this content block                     |
| Content     | Add text content using rich text editor                |
| Image       | Upload an image (recommended width: 400px)             |


# Cart drawer

### Section overview

The cart section provides a slide-out drawer and alert popup for displaying the shopping cart contents and checkout functionality in a Shopify store.

#### Common use cases

* Main shopping cart experience for e-commerce websites
* Cart upsell opportunities to increase average order value
* Cart progress bar to encourage customers to reach free shipping thresholds
* Quick checkout process with different button behavior options

#### Usage tips

* Configure the progress bar threshold to encourage higher purchases
* Utilize cart upsells to promote related products at the checkout stage
* Customize sidebar blocks for important shipping, return, or promotion information
* Mobile responsiveness is built-in with different layouts for mobile and desktop views, particularly in the upsell slider section

### Section settings

| Setting                       | Description                                                             |
| ----------------------------- | ----------------------------------------------------------------------- |
| Top bar color scheme          | Sets the color scheme for the top bar of the cart drawer                |
| Top bar color border          | Determines the border style for the top bar                             |
| Top bar color button          | Sets the style for buttons in the top bar                               |
| Main section color scheme     | Sets the primary color scheme for the main cart area                    |
| Secondary background          | Sets the color scheme for secondary elements within the cart            |
| Main color border             | Determines the border style for main cart items                         |
| Enable cart note              | Allows customers to add notes to their order                            |
| Enable cart share             | Enables functionality for customers to share their cart                 |
| Show cart subtotals           | Shows subtotal breakdowns including discounts                           |
| Bottom bar color scheme       | Sets the color scheme for the bottom bar of the cart drawer             |
| Bottom bar color border       | Determines the border style for the bottom bar                          |
| Bottom bar color button       | Sets the style for buttons in the bottom bar                            |
| Cart button behavior          | Choose between directing to checkout or cart page                       |
| Checkout disclaimer           | Add a disclaimer text below the checkout button                         |
| Show continue shopping button | Displays a button to continue shopping                                  |
| Show button prices            | Shows prices within checkout buttons                                    |
| Sidebar color scheme          | Sets the color scheme for the sidebar blocks                            |
| Sidebar color border          | Determines the border style for sidebar blocks                          |
| Progress bar threshold        | Set the threshold amount to reach for free shipping or other promotions |
| Progress bar success          | Message displayed when the progress bar threshold is met                |
| Enable progress bar           | Toggles display of the progress bar feature                             |
| Checkbox upsell ID            | Variant ID for the upsell product checkbox                              |
| Label                         | Text displayed for the upsell checkbox                                  |
| Cart upsell products          | Collection to use for upsell product slider                             |
| Button label                  | Text for the button shown when cart is empty                            |
| Button URL                    | URL that the empty cart button links to                                 |

### Block settings

#### Content

These blocks appear in the sidebar of the cart drawer and can be used to provide additional information or promotional content.

Block limit: 4

| Setting | Description                                        |
| ------- | -------------------------------------------------- |
| Icon    | 64px icon image to display at the top of the block |
| Heading | Title text for the content block                   |
| Content | Rich text content for the block                    |


# Custom liquid

### Section overview

The Liquid section serves as a flexible container that enables developers to inject custom Liquid code directly into a Shopify theme.

#### Common use cases

* Display dynamic shop information like store name, policies, or announcements
* Integrate third-party widgets or scripts
* Create custom HTML/CSS structures that aren't available through standard sections
* Implement complex conditional logic based on template conditions

#### Usage tips

* Always test your Liquid code thoroughly before deploying to production
* Use the section's color scheme settings to maintain visual consistency with your theme
* Consider mobile visibility settings when adding content that might not display well on smaller screens
* Keep your Liquid code clean and commented for easier maintenance
* Leverage the built-in padding controls to maintain proper spacing within your layout

### Section settings

| Setting         | Description                                                                                |
| --------------- | ------------------------------------------------------------------------------------------ |
| Liquid          | Custom Liquid code to be rendered in this section                                          |
| Spacing top     | Controls the top padding of the section (0-300px)                                          |
| Spacing bottom  | Controls the bottom padding of the section (0-300px)                                       |
| Color scheme    | Determines the background and text color combination for the section                       |
| Border color    | Sets the color for any borders applied to the section                                      |
| Border position | Controls where borders appear on the section (none, top, bottom, or both)                  |
| Enable padding  | Toggles horizontal padding to match the rest of the site layout                            |
| Visibility      | Controls section visibility across different device sizes (all, mobile only, desktop only) |

### Block settings

This section does not contain any blocks.


# Navigation


# Navigation slider

### Section overview

The Navigation Slider section provides a horizontal scrollable carousel of circular images with text captions, similar to Instagram stories. It creates an interactive and visually appealing way to showcase navigation links throughout your store.

#### Common use cases

* Highlighting featured product categories or collections
* Creating quick-access navigation to important store pages
* Showcasing featured brands or designers
* Displaying promotional campaigns or seasonal content

#### Usage tips

* Use consistent image styles (preferably square images) for a uniform appearance
* Keep heading text short and concise for better mobile display
* Add 5-10 slides for optimal user experience without overwhelming visitors
* Consider using this section near the top of your homepage or collection pages for maximum visibility

Mobile responsiveness considerations:

* Images remain centered and properly sized on smaller screens
* The section employs smooth scrolling and snap positioning for better mobile interaction
* You can set the section to appear only on mobile or desktop if needed

### Section settings

| Setting         | Description                                                                    |
| --------------- | ------------------------------------------------------------------------------ |
| Top spacing     | Controls the amount of space (in pixels) above the section                     |
| Bottom spacing  | Controls the amount of space (in pixels) below the section                     |
| Color scheme    | Determines the background and text colors of the section                       |
| Border color    | Sets the color for any borders applied to the section                          |
| Border position | Controls where borders appear (none, top, bottom, or both)                     |
| Visibility      | Determines if the section appears on all devices, only mobile, or only desktop |

### Block settings

#### Slide

Each slide represents an individual navigation item with an image, heading, and link. The section allows up to 20 slides.

| Setting | Description                                        |
| ------- | -------------------------------------------------- |
| Image   | Circular image that appears above the heading text |
| Heading | Text that appears below the image                  |
| URL     | Destination link when the slide is clicked         |


# Content and Media


# Slideshow

### Section overview

The slideshow section creates a dynamic slideshow with customizable slides featuring background images or videos with text overlays, buttons, and navigation controls.

#### Common use cases

* Create engaging hero banners on homepage
* Showcase multiple product collections or promotions
* Display announcements or welcome messages with compelling visuals
* Create interactive brand stories or feature highlights

#### Usage tips

* Use high-contrast images that make text easily readable
* Keep slide content concise and action-oriented
* For better performance, optimize images before uploading
* Consider mobile users by testing how slides appear on smaller screens
* Limit the number of slides to 3-5 for optimal user experience
* Adjust auto-scroll settings based on the amount of content in each slide

### Section settings

| Setting              | Description                                                                       |
| -------------------- | --------------------------------------------------------------------------------- |
| Color scheme         | Controls the overall color theme of the slideshow section                         |
| Text color           | Determines the text color, with options for default, forced light, or forced dark |
| Border color         | Sets the color of any borders on the slideshow                                    |
| Enable gradient      | Adds a subtle gradient overlay to slides to improve text readability              |
| Border position      | Positions borders around the slideshow (none, top, bottom, or both)               |
| Vertical spacing     | Controls the height of the slideshow from extra small to extra large              |
| Vertical alignment   | Aligns slide content vertically (top, middle, or bottom)                          |
| Horizontal alignment | Aligns slide content horizontally (left, center, or right)                        |
| Visibility           | Controls visibility on different devices (all, mobile only, or desktop only)      |
| Auto-scroll delay    | Sets the time in seconds before advancing to the next slide                       |
| Enable auto-scroll   | Toggles automatic advancement through slides                                      |

### Block settings

#### Slide

Each slide block creates an individual slide in the slideshow containing background media and content.

| Setting                  | Description                                                                                  |
| ------------------------ | -------------------------------------------------------------------------------------------- |
| Desktop background image | The image displayed on desktop devices                                                       |
| Mobile background image  | An optional separate image optimized for mobile devices                                      |
| Background video         | Video file to be used as slide background                                                    |
| Show entire image        | When enabled, displays the full image (object-contain) instead of cropping it (object-cover) |
| Show video on mobile     | Toggles video visibility on mobile devices                                                   |
| Heading                  | Main headline text for the slide                                                             |
| Content                  | Rich text area for additional content on the slide                                           |
| Primary button color     | Sets the style of the primary call-to-action button                                          |
| Primary button label     | Text displayed on the primary button                                                         |
| Primary button URL       | Destination link for the primary button                                                      |
| Secondary button color   | Sets the style of the secondary call-to-action button                                        |
| Secondary button label   | Text displayed on the secondary button                                                       |
| Secondary button URL     | Destination link for the secondary button                                                    |


# Collage

### Section overview

The Collage section creates a responsive grid layout of content cards that can display text, images, videos, and buttons in a customizable grid format.

#### Common Use Cases

* Creating feature showcases with images and descriptive text
* Building image galleries with optional text overlays
* Displaying product highlights or categories with linked cards
* Creating promotional grids with mixed media content

#### Usage Tips

* For best visual balance, use consistent image sizes across grid items
* Utilize row and column span settings to create visually interesting layouts
* Consider mobile display when configuring the grid - fewer columns work better on smaller screens
* Use background images or videos sparingly to avoid overwhelming the user
* For text overlay on images, ensure sufficient contrast for readability

### Section Settings

| Setting              | Description                                                           |
| -------------------- | --------------------------------------------------------------------- |
| Heading              | Section heading text                                                  |
| Content              | Rich text content displayed below the heading                         |
| Button label         | Text displayed on the section button                                  |
| Button URL           | URL the section button links to                                       |
| Top spacing          | Spacing in pixels above the section (0-300px)                         |
| Bottom spacing       | Spacing in pixels below the section (0-300px)                         |
| Color scheme         | Background and text color combination for the section                 |
| Border color         | Color of section borders                                              |
| Button color         | Style and color variant for the section button                        |
| Border position      | Position of borders on the section (none, top, bottom, or both)       |
| Desktop columns      | Number of grid columns on desktop devices (1-6)                       |
| Mobile columns       | Number of grid columns on mobile devices (1-4)                        |
| Horizontal alignment | Alignment of content horizontally within the section                  |
| Visibility           | Device visibility options (all devices, mobile only, or desktop only) |

### Block Settings

#### Content

A customizable content block that can display heading, text content, images, videos, and a button.

Block limit: 20

| Setting                     | Description                                                   |
| --------------------------- | ------------------------------------------------------------- |
| Heading                     | Block heading text                                            |
| Content                     | Rich text content displayed within the block                  |
| Button label                | Text displayed on the block button                            |
| Button URL                  | URL the block button links to                                 |
| Make entire block clickable | Makes the entire block function as a link to the button URL   |
| Featured image              | Main image displayed in the block                             |
| Background image            | Image used as the block background                            |
| Background video            | Video used as the block background                            |
| Enable autoplay             | Automatically plays background video                          |
| Enable mute toggle          | Shows a button to toggle video sound                          |
| Enable loop                 | Continuously loops background video                           |
| Top spacing                 | Spacing in pixels above the block content (0-300px)           |
| Bottom spacing              | Spacing in pixels below the block content (0-300px)           |
| Enable padding              | Adds padding inside the block                                 |
| Color scheme                | Background and text color combination for the block           |
| Border color                | Color of block borders                                        |
| Text color                  | Color of text within the block                                |
| Button color                | Style and color variant for the block button                  |
| Enable gradient             | Adds a gradient background overlay for better text visibility |
| Vertical alignment          | Alignment of content vertically within the block              |
| Horizontal alignment        | Alignment of content horizontally within the block            |
| Row span                    | Number of grid rows the block spans (1-6)                     |
| Column span                 | Number of grid columns the block spans on desktop (1-6)       |


# Video

### Section overview

The Video section displays a video that can be set to autoplay or play on click, with optional supporting content such as heading, text, and a call-to-action button.

#### Common Use Cases

* Product demonstrations or tutorials
* Brand storytelling and promotional content
* Background ambiance for landing pages
* Showcasing customer testimonials

#### Usage Tips

* Use a background image from the video as a placeholder for better performance
* Keep videos short (under 30 seconds) for better engagement
* Consider mobile data usage when enabling autoplay
* Ensure your video has appropriate contrast with text overlays for readability

### Section Settings

| Setting               | Description                                                               |
| --------------------- | ------------------------------------------------------------------------- |
| Image                 | Background image to display before the video plays                        |
| Video                 | The video file to be displayed in this section                            |
| Enable video autoplay | When enabled, the video will start playing automatically                  |
| Heading               | Main title text displayed in the section                                  |
| Content               | Descriptive text content to accompany the video                           |
| Button label          | Text to display on the call-to-action button                              |
| Button url            | URL the button links to when clicked                                      |
| Spacing top           | Controls the amount of space above the section (0-300px)                  |
| Spacing bottom        | Controls the amount of space below the section (0-300px)                  |
| Background            | Background color of the section                                           |
| Text color            | Controls the text color scheme (default, light, or dark)                  |
| Border color          | Color of the section border (subtle or strong)                            |
| Button color          | Color scheme for the section's button                                     |
| Border position       | Controls where borders appear on the section (none, top, bottom, or both) |
| X alignment           | Horizontal alignment of section content (left, center, or right)          |
| Visibility            | Controls section visibility on different device sizes                     |

### Block Settings

This section does not contain any blocks.


# Alternative banner

### Section overview

The Banner Alternative section displays a side-by-side layout with an image on one side and content (headings, text, and buttons) on the other. On mobile, it stacks with the image on top and content below.

#### Common use cases

* Creating feature highlights with explanatory text and call-to-action buttons
* Showcasing product benefits with supporting imagery
* Creating promotional announcements with supporting visuals
* Building welcome sections with introductory content for store visitors

#### Usage tips

* Use high-contrast images that complement the text overlay for better readability
* Keep content concise and focused on a single message or call-to-action
* Consider mobile appearance when setting content alignment and spacing
* Adjust the content width setting based on your content length and image importance

### Section settings

| Setting              | Description                                                                      |
| -------------------- | -------------------------------------------------------------------------------- |
| Image                | The background image that appears on desktop and mobile                          |
| Color scheme         | The color theme for the section background and text                              |
| Text color           | Override the default text color from the color scheme                            |
| Border color         | Choose between subtle or strong border colors                                    |
| Border position      | Position of borders around the section (top, bottom, both, or none)              |
| Content width        | Percentage width of the content area relative to the section (10-90%)            |
| Image position       | Position the image on the left or right side of the content                      |
| Height               | Control the vertical height/spacing of the section                               |
| Vertical alignment   | Align content to the top, middle, or bottom of the section                       |
| Horizontal alignment | Align content to the left, center, or right of the section                       |
| Visibility           | Control whether the section appears on all devices, mobile only, or desktop only |

### Block settings

#### Heading

This block adds a primary heading to the section.

* Block limit: 1

| Setting        | Description                                      |
| -------------- | ------------------------------------------------ |
| Content        | The heading text to display                      |
| Top spacing    | Amount of space (in px) to add above the heading |
| Bottom spacing | Amount of space (in px) to add below the heading |

#### Content

This block adds formatted text content to the section.

* Block limit: 3

| Setting        | Description                                      |
| -------------- | ------------------------------------------------ |
| Content        | Rich text content to display                     |
| Top spacing    | Amount of space (in px) to add above the content |
| Bottom spacing | Amount of space (in px) to add below the content |

#### Buttons

This block adds primary and secondary buttons to the section.

* Block limit: 1

| Setting                | Description                                                                     |
| ---------------------- | ------------------------------------------------------------------------------- |
| Button color           | Style of the primary button (primary, secondary, tertiary, neutral, or plain)   |
| Button label           | Text displayed on the primary button                                            |
| Button URL             | The link destination when the primary button is clicked                         |
| Secondary button color | Style of the secondary button (primary, secondary, tertiary, neutral, or plain) |
| Secondary button label | Text displayed on the secondary button                                          |
| Secondary button URL   | The link destination when the secondary button is clicked                       |
| Top spacing            | Amount of space (in px) to add above the buttons                                |
| Bottom spacing         | Amount of space (in px) to add below the buttons                                |


# Banner

The Banner section displays a background image or video with text overlay, creating visually appealing hero banners for your store. It supports both desktop and mobile-specific media assets with customizable text alignment and spacing.

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

#### Common use cases

* Hero banner on homepage to showcase key products or promotions
* Announcement banners for sales or special events
* Category introductions at the top of collection pages
* Welcome sections with branding elements

#### Usage tips

* Use high-contrast images to ensure text remains readable
* Keep content concise and focused on a single message or call-to-action
* For mobile, consider using a different image that works well with portrait orientation
* Test your banner across different screen sizes to ensure responsive behavior
* When using video backgrounds, ensure they're not distracting from your main message

### Section settings

<table><thead><tr><th width="239.671875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>URL</td><td>Link for the entire section. When set, the whole banner becomes clickable.</td></tr><tr><td>Desktop background image</td><td>The main image shown on desktop devices.</td></tr><tr><td>Mobile background image</td><td>Optional alternative image optimized for mobile devices.</td></tr><tr><td>Video background</td><td>Optional video to play in the background of the section.</td></tr><tr><td>Show image</td><td>Toggle to show or hide the background image.</td></tr><tr><td>Show entire image</td><td>When enabled, displays the full image (object-contain). When disabled, crops the image to fill the space (object-cover).</td></tr><tr><td>Show video on mobile</td><td>Toggle to show or hide the video background on mobile devices.</td></tr><tr><td>Color scheme</td><td>Select the background color scheme for the section.</td></tr><tr><td>Text color</td><td>Choose default, force light, or force dark text color.</td></tr><tr><td>Border color</td><td>Select a subtle or strong border color.</td></tr><tr><td>Enable gradient</td><td>Add a gradient overlay that darkens the bottom of the image.</td></tr><tr><td>Border position</td><td>Choose where borders appear: none, top, bottom, or top and bottom.</td></tr><tr><td>Height</td><td>Select from extra small to extra large height presets.</td></tr><tr><td>Vertical alignment</td><td>Position content at the top, middle, or bottom of the section.</td></tr><tr><td>Horizontal alignment</td><td>Position content at the left, center, or right of the section.</td></tr><tr><td>Visibility</td><td>Show on all devices, mobile only, or desktop only.</td></tr></tbody></table>

### Block settings

#### Heading

The heading block adds a large title to your banner. Limited to 1 per section.

<table><thead><tr><th width="239.48828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Text to display as the heading.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the heading (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the heading (0-300px).</td></tr></tbody></table>

#### Content

The content block adds descriptive text to your banner. Limited to 3 per section.

<table><thead><tr><th width="240.23046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Rich text to display in the banner.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the content (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the content (0-300px).</td></tr></tbody></table>

#### Buttons

The buttons block adds up to two call-to-action buttons. Limited to 1 per section.

<table><thead><tr><th width="240.23828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Primary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Primary button label</td><td>Text to display on the primary button.</td></tr><tr><td>Primary button URL</td><td>Link for the primary button.</td></tr><tr><td>Secondary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Secondary button label</td><td>Text to display on the secondary button.</td></tr><tr><td>Secondary button URL</td><td>Link for the secondary button.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the buttons (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the buttons (0-300px).</td></tr></tbody></table>

#### App

This block allows app developers to add content to the banner section.


# Collapsible content

### Section overview

The Collapsible content section displays a list of collapsible content blocks that can be expanded and collapsed by users. It provides an interactive way to present information in a space-efficient manner.

#### Common use cases

* Frequently Asked Questions (FAQs)
* Product information and specifications
* Shipping and return policies
* Service descriptions or features lists

#### Usage tips

* Keep accordion titles concise and descriptive so users understand what content to expect
* Limit the amount of content within each accordion to prevent overwhelming scrolling when expanded
* Consider using icons to visually enhance the accordions and improve user experience
* Mobile responsiveness is automatically handled, but consider setting visibility options for different devices if needed

### Section settings

| Setting              | Description                                                                    |
| -------------------- | ------------------------------------------------------------------------------ |
| Heading              | Main section heading displayed above the accordions                            |
| Content              | Descriptive text displayed below the heading                                   |
| Button label         | Text to display on the optional button                                         |
| Button URL           | Link destination for the optional button                                       |
| Spacing top          | Controls the top padding of the section (0-300px)                              |
| Spacing bottom       | Controls the bottom padding of the section (0-300px)                           |
| Color scheme         | Sets the background and text color combination                                 |
| Border color         | Sets the color for any borders (subtle or strong)                              |
| Button color         | Sets the style and color scheme for the button                                 |
| Border position      | Determines where section borders appear (none, top, bottom, or both)           |
| Horizontal alignment | Controls the alignment of section content (left, center, or right)             |
| Visibility           | Controls section visibility across devices (all, mobile only, or desktop only) |

### Block settings

Collapsible content

The block creates a collapsible content area with a title button that expands to reveal the content. Each section can have up to 50 accordion blocks.

| Setting | Description                                               |
| ------- | --------------------------------------------------------- |
| Title   | Heading text displayed on the accordion button            |
| Content | Rich text content revealed when the accordion is expanded |
| Icon    | Optional icon displayed alongside the accordion title     |


# Blog posts grid

### Section overview

The Blog posts grid section displays a customizable grid of blog articles, allowing merchants to showcase recent or featured content from their blog.

#### Common use cases

* Highlighting recent blog posts on the homepage
* Featuring selected articles in a dedicated section on any page
* Creating a curated reading list of related content
* Displaying news or updates in a visually appealing grid format

#### Usage tips

* Keep the article count balanced with your layout - 3 articles works well for most designs
* Use a clear, concise heading that describes the content (e.g., "Latest Updates" or "Featured Articles")
* Consider mobile display - content stacks differently on smaller screens
* Ensure your article featured images are consistent in size and style for a cohesive look

### Section settings

| Setting         | Description                                      |
| --------------- | ------------------------------------------------ |
| Blog            | Select which blog to pull articles from          |
| Total items     | Set the number of articles to display            |
| Heading         | Add a title for the section                      |
| Content         | Add descriptive text to introduce the articles   |
| Button label    | Text to display on the button                    |
| Button url      | URL the button links to                          |
| Spacing top     | Control the top padding (0-300px)                |
| Spacing bottom  | Control the bottom padding (0-300px)             |
| Color scheme    | Choose the background and text color combination |
| Border color    | Select the color intensity for borders           |
| Button color    | Choose the style and color of the button         |
| Border position | Select where borders appear around the section   |
| Row desktop     | Number of articles per row on desktop (2-4)      |
| Row mobile      | Number of articles per row on mobile (1-2)       |
| X alignment     | Control horizontal alignment of section content  |
| Visibility      | Control display on different device types        |


# Icon grid

### Section overview

The Icon Grid section displays a customizable grid of icon cards with headings and descriptive content. It allows for flexible layout options with control over colors, spacing, and responsive behavior.

#### Common use cases

* Showcase product features or benefits with icons and descriptions
* Display service offerings or company values
* Create a grid of informational content cards with visual elements
* Highlight key selling points or unique value propositions

#### Usage tips

* Use consistently sized icons (ideally SVGs) for a polished appearance
* Keep headings concise and content brief for better readability
* Consider mobile layout when configuring grid settings - fewer columns on mobile provide better visibility
* Use color schemes that maintain sufficient contrast between icons, text, and backgrounds

### Section settings

| Setting         | Description                                                                   |
| --------------- | ----------------------------------------------------------------------------- |
| Heading         | Main section heading text                                                     |
| Content         | Rich text content for the section                                             |
| Button label    | Text for the optional button                                                  |
| Button URL      | Link destination for the button                                               |
| Spacing top     | Amount of space above the section (in pixels)                                 |
| Spacing bottom  | Amount of space below the section (in pixels)                                 |
| Color scheme    | Background and text color combination for the section                         |
| Border color    | Color for section borders                                                     |
| Button color    | Style and color for the section button                                        |
| Border position | Position of borders on the section                                            |
| Row desktop     | Number of columns in the grid on desktop devices                              |
| Row mobile      | Number of columns in the grid on mobile devices                               |
| X alignment     | Horizontal alignment of content within the section                            |
| Visibility      | Controls whether section appears on all devices, only mobile, or only desktop |

### Block settings

#### Icon

The Icon block creates a card containing an icon, heading, and descriptive text with customizable layout and styling options. Limited to 20 blocks per section.

| Setting        | Description                                          |
| -------------- | ---------------------------------------------------- |
| Icon           | Image to use as the icon (recommended 256px)         |
| Icon height    | Size of the icon (small, normal, or large)           |
| Heading        | Heading text for this block                          |
| Content        | Rich text content for this block                     |
| Enable padding | Adds padding inside the block                        |
| Color scheme   | Background and text color combination for this block |
| Border color   | Color for block borders (subtle, strong, or none)    |
| Alignment      | Layout direction (horizontal or vertical)            |
| X alignment    | Horizontal text alignment (left, center, or right)   |
| Row span       | Number of rows this block should span in the grid    |
| Column span    | Number of columns this block should span in the grid |


# Discount banner

### Section overview

The Discount Banner section displays a promotional discount code that customers can easily copy to their clipboard with a single click. It provides a simple yet effective way to highlight active promotions on your store.

#### Common use cases

* Displaying limited-time promotional offers
* Featuring loyalty or referral discount codes
* Highlighting seasonal sale codes
* Promoting first-purchase discounts for new customers

#### Usage tips

* Keep the promotional text concise and clear about the offer's value
* Place this section near the top of the page for maximum visibility
* Use contrasting colors to make the coupon section stand out
* Consider using this section on specific collection pages where the discount applies
* Avoid using multiple coupon banners on the same page to prevent confusion

Mobile responsiveness considerations:

* The section automatically adjusts for mobile viewing with a stacked layout
* Input fields and buttons resize appropriately on smaller screens
* You can opt to show/hide this section on mobile using the visibility setting

### Section settings

| Setting          | Description                                                                            |
| ---------------- | -------------------------------------------------------------------------------------- |
| Spacing top      | Controls the padding space above the section (in pixels)                               |
| Spacing bottom   | Controls the padding space below the section (in pixels)                               |
| Color scheme     | Determines the background and text color combination for the section                   |
| Color border     | Sets the color intensity of the section's border                                       |
| Button color     | Defines the style and color of the "Copy code" button                                  |
| Border position  | Controls where borders appear around the section (top, bottom, both, or none)          |
| Layout alignment | Sets the horizontal alignment of content (left, center, or right)                      |
| Visibility       | Controls which device types the section appears on (all, mobile only, or desktop only) |

### Block settings

#### Code

This block defines the Discount code text and associated content that appears in the banner. It allows for a single coupon code display with customizable text and button label.

Block limit: 1

| Setting      | Description                                                     |
| ------------ | --------------------------------------------------------------- |
| Coupon text  | The actual discount code customers will copy                    |
| Content      | Descriptive text that appears before the discount code          |
| Button label | The text displayed on the copy button (defaults to "Copy code") |


# Rich text

### Section overview

The Text section provides a simple yet versatile content block with text, heading, and button elements that can be fully customized.

#### Common use cases

* Product descriptions or introductions
* Announcements or promotional messages
* Call-to-action areas with supporting text
* Mission statements or company information

#### Usage tips

* Keep text concise and focused for better readability
* Use this section with consistent spacing between other sections
* Consider text alignment based on your page layout (left alignment works best for readability)
* On mobile, ensure your text remains legible by previewing your content on different devices

### Section settings

| Setting              | Description                                                               |
| -------------------- | ------------------------------------------------------------------------- |
| Heading              | Optional heading text to display above the content                        |
| Content              | Rich text content area for your message                                   |
| Button label         | Text to display on the optional button                                    |
| Button URL           | Destination link for the button                                           |
| Spacing top          | Controls the top padding (0-300px)                                        |
| Spacing bottom       | Controls the bottom padding (0-300px)                                     |
| Color scheme         | Background and text color combination                                     |
| Border color         | Color of the section border                                               |
| Button color         | Style and color of the button                                             |
| Border position      | Position of decorative borders (top, bottom, both, or none)               |
| Horizontal alignment | Controls alignment of content (left, center, or right)                    |
| Visibility           | Controls display on different devices (all, mobile only, or desktop only) |

### Block settings

This section does not contain any blocks.


# Logo list

### Section overview

The Logo List section displays a grid of logos or icons, perfect for showcasing brand partnerships, press mentions, or featured clients.

#### Common use cases

* Displaying brand partners or sponsor logos
* Showcasing press mentions or media features
* Highlighting client logos or testimonials
* Presenting industry certifications or awards

#### Usage tips

* Use monochrome logo colors to avoid visual distraction
* Maintain consistent logo sizes for a professional appearance
* Consider using the padding option to give logos adequate breathing room
* For mobile optimization, reduce the number of columns to ensure logos remain visible and legible

### Section settings

| Setting              | Description                                                                   |
| -------------------- | ----------------------------------------------------------------------------- |
| Heading              | Main heading text for the section                                             |
| Content              | Rich text content displayed below the heading                                 |
| Button label         | Text to display on the button                                                 |
| Button URL           | URL the button links to when clicked                                          |
| Spacing top          | Amount of space above the section (0-300px)                                   |
| Spacing bottom       | Amount of space below the section (0-300px)                                   |
| Color scheme         | Background and text color combination for the section                         |
| Border color         | Color of section borders                                                      |
| Button color         | Color scheme for the section's button                                         |
| Border position      | Position of border decoration on the section                                  |
| Desktop columns      | Number of columns to display on desktop devices (1-6)                         |
| Mobile columns       | Number of columns to display on mobile devices (1-4)                          |
| Horizontal alignment | Alignment of section content (left, center, right)                            |
| Visibility           | Controls whether section appears on all devices, mobile only, or desktop only |

### Block settings

#### Logo

A block representing a single logo or image in the grid.

* Block limit: 10

| Setting        | Description                                                  |
| -------------- | ------------------------------------------------------------ |
| Logo           | The image to display as a logo                               |
| Logo height    | Height of the logo image in pixels (10-100px)                |
| Enable padding | Toggle to add padding around the logo                        |
| Color scheme   | Background and text color combination for this specific logo |
| Border color   | Color of border around this logo block                       |
| Row span       | Number of rows this logo will span in the grid (1-6)         |
| Column span    | Number of columns this logo will span in the grid (1-6)      |


# Slider

### Section overview

The Content Slider section provides a customizable horizontal slider of content cards that can be used to display various types of information and media.

#### Common use cases

* Showcasing featured products with images and descriptions
* Displaying promotional content or announcements
* Highlighting key features or benefits of products/services
* Creating image galleries with supporting text content

#### Usage tips

* Use consistent image sizes across slider blocks for a polished appearance
* Keep text content concise within each slide to maintain readability
* Consider mobile users by setting appropriate mobile widths for each block
* Use color schemes that complement your overall store design
* Test slider navigation on both desktop and mobile to ensure good user experience

### Section settings

| Setting              | Description                                                                            |
| -------------------- | -------------------------------------------------------------------------------------- |
| Heading              | Main section heading displayed above the slider                                        |
| Content              | Rich text content displayed below the section heading                                  |
| Button label         | Text to display on the section's call-to-action button                                 |
| Button URL           | Destination URL for the section's call-to-action button                                |
| Top spacing          | Amount of space above the section (0-300px)                                            |
| Bottom spacing       | Amount of space below the section (0-300px)                                            |
| Color scheme         | Background and text color combination for the section                                  |
| Border color         | Color of the section's border                                                          |
| Button color         | Style and color variant for the section's button                                       |
| Border position      | Position of borders around the section (none, top, bottom, or both)                    |
| Horizontal alignment | Controls the alignment of section content (left, center, right)                        |
| Visibility           | Controls section visibility on different device types (all, mobile only, desktop only) |

### Block settings

#### Content

Content blocks are the individual slides within the slider. Each block can contain images, text, and a call-to-action button.

Limit: 20 blocks per slider

| Setting               | Description                                                              |
| --------------------- | ------------------------------------------------------------------------ |
| Heading               | Title text for the content block                                         |
| Content               | Rich text content displayed in the block                                 |
| Image                 | Featured image displayed in the block                                    |
| Background image      | Image used as the block's background                                     |
| Background video      | Video used as the block's background                                     |
| Enable video autoplay | Automatically plays the background video when visible                    |
| Enable mute button    | Shows a button to toggle video sound on/off                              |
| Enable video loop     | Continuously loops the background video                                  |
| Button label          | Text to display on the block's call-to-action button                     |
| Button URL            | Destination URL for the block's call-to-action button                    |
| Top spacing           | Amount of space above the block content (0-300px)                        |
| Bottom spacing        | Amount of space below the block content (0-300px)                        |
| Enable padding        | Adds padding around the block content                                    |
| Color scheme          | Background and text color combination for the block                      |
| Border color          | Color of the block's border                                              |
| Text color            | Controls text color rendering (default, force light, force dark)         |
| Button color          | Style and color variant for the block's button                           |
| Enable gradient       | Adds a subtle gradient overlay to the block                              |
| Vertical alignment    | Controls the vertical alignment of block content (top, middle, bottom)   |
| Horizontal alignment  | Controls the horizontal alignment of block content (left, center, right) |
| Desktop width         | Width of the block on desktop devices (1-12 grid units)                  |
| Mobile width          | Width of the block on mobile devices (1-12 grid units)                   |


# Testimonials

### Section overview

The Testimonials section displays a grid of customer reviews or testimonials with optional avatars and reviewer names.

#### Common use cases

* Showcasing positive customer feedback about products or services
* Building trust and credibility with potential customers
* Highlighting specific product benefits through real customer experiences
* Creating social proof on landing pages or product collections

#### Usage tips

* Use genuine and specific testimonials rather than generic praise
* Include reviewer names and photos when possible to increase credibility
* Keep testimonial content concise and focused on specific benefits
* For mobile responsiveness, the grid automatically adjusts from 3 columns on desktop to 1 column on mobile

### Section settings

| Setting              | Type      | Description                                                                   |
| -------------------- | --------- | ----------------------------------------------------------------------------- |
| Heading              | Text      | Main heading text for the testimonials section                                |
| Content              | Rich text | Descriptive text that appears above the testimonials                          |
| Button label         | Text      | Text to display on the optional button                                        |
| Button URL           | URL       | Link destination for the optional button                                      |
| Spacing top          | Range     | Controls the padding space above the section (0-300px)                        |
| Spacing bottom       | Range     | Controls the padding space below the section (0-300px)                        |
| Color scheme         | Select    | Background and text color combination for the section                         |
| Border color         | Select    | Color of section borders (subtle or strong)                                   |
| Button color         | Select    | Style and color of the button (primary, secondary, tertiary, neutral, plain)  |
| Border position      | Select    | Position of borders (none, top, bottom, top and bottom)                       |
| Horizontal alignment | Select    | Alignment of content (left, center, right)                                    |
| Visibility           | Select    | Controls whether section appears on all devices, only mobile, or only desktop |

### Block settings

#### Testimonial

Each testimonial block represents an individual customer review with content and attribution.

Block limit: 3

| Setting | Type      | Description                                                           |
| ------- | --------- | --------------------------------------------------------------------- |
| Content | Rich text | The testimonial text content                                          |
| Title   | Rich text | The name or attribution for the testimonial (typically reviewer name) |
| Avatar  | Image     | Profile picture of the reviewer (recommended size 128x128px)          |


# Countdown

### Section overview

The Countdown section provides a dynamic timer that counts down to a specific date, perfect for creating urgency around limited-time offers, promotions, or events on your Shopify store.

#### Common use cases

* Highlight time-limited sales or promotions
* Create urgency for product launches or pre-orders
* Display countdown to seasonal events or holidays
* Showcase limited availability for exclusive products

#### Usage tips

* Set a realistic countdown date that aligns with your marketing campaigns
* Use clear, action-oriented text that explains what happens when the countdown ends
* Include a call-to-action button that directs customers to the relevant offer or collection
* For mobile responsiveness, adjust the width settings for mobile displays to ensure the countdown timer remains legible on smaller screens
* Avoid setting countdowns too far in advance as this may reduce the sense of urgency
* If using an image alongside the countdown, ensure it visually reinforces the promotion's message

### Section settings

| Setting            | Description                                                                       |
| ------------------ | --------------------------------------------------------------------------------- |
| Countdown date     | The target date that the timer counts down to                                     |
| Top spacing        | Controls the padding space above the section (0-300px)                            |
| Bottom spacing     | Controls the padding space below the section (0-300px)                            |
| Color scheme       | Determines the background and text color of the section                           |
| Border color       | Sets the color of any borders in the section (subtle or strong)                   |
| Button color       | Determines the style and color of the button in the countdown block               |
| Border position    | Controls where borders appear (none, top, bottom, or both)                        |
| Vertical alignment | Sets how blocks align vertically within the section (top, middle, bottom)         |
| Visibility         | Controls whether the section appears on all devices, only mobile, or only desktop |

### Block settings

#### Countdown

The Countdown block displays the main timer functionality with optional heading, content, and button. Limited to 1 per section.

| Setting              | Description                                                                |
| -------------------- | -------------------------------------------------------------------------- |
| Heading              | The title text that appears above the countdown timer                      |
| Content              | Descriptive text that provides context for the countdown                   |
| Button label         | Text displayed on the call-to-action button                                |
| Button URL           | The destination page when the button is clicked                            |
| Desktop width        | Controls how much horizontal space the block occupies on desktop (1-12/12) |
| Mobile width         | Controls how much horizontal space the block occupies on mobile (1-12/12)  |
| Horizontal alignment | Sets the alignment of content within the block (left, center, right)       |

#### Image

The Image block allows you to add a visual element alongside the countdown timer. Limited to 1 per section.

| Setting       | Description                                                                |
| ------------- | -------------------------------------------------------------------------- |
| Image         | The visual to display next to the countdown timer                          |
| Desktop width | Controls how much horizontal space the image occupies on desktop (1-12/12) |
| Mobile width  | Controls how much horizontal space the image occupies on mobile (1-12/12)  |


# Image comparison

### Section overview

The image comparison section showcases before/after images with an interactive slider that allows customers to compare differences between two images.

#### Common use cases

* Demonstrating product transformations or results
* Showcasing renovation or restoration projects
* Displaying different versions or states of a product
* Highlighting effects of treatments, services, or product usage

#### Usage tips

* Use high-quality images with the same dimensions for best results
* Choose images that have a clear visual difference to make the comparison meaningful
* Consider adding descriptive labels for each image to clarify what viewers are seeing
* For mobile responsiveness, ensure the comparison is still effective on smaller screens

### Section settings

| Setting         | Description                                                                         |
| --------------- | ----------------------------------------------------------------------------------- |
| Before image    | The image to display in the "before" state                                          |
| Before label    | Text label for the "before" image (default: "Before")                               |
| After image     | The image to display in the "after" state                                           |
| After label     | Text label for the "after" image (default: "After")                                 |
| Heading         | Section title that appears above the comparison                                     |
| Content         | Rich text description to provide context for the comparison                         |
| Button label    | Text to display on the optional call-to-action button                               |
| Button url      | Destination URL when the button is clicked                                          |
| Top spacing     | Amount of space above the section (0-300px)                                         |
| Bottom spacing  | Amount of space below the section (0-300px)                                         |
| Color scheme    | Background and text color combination for the section                               |
| Border color    | Color style for section borders                                                     |
| Button color    | Style and color variant for the call-to-action button                               |
| Border position | Where borders appear around the section (none, top, bottom, or both)                |
| Aspect ratio    | Proportional relationship between width and height (1:1, 16:9, or 4:3)              |
| Text alignment  | Horizontal alignment of text content (left, center, or right)                       |
| Enable margin   | Toggle horizontal margin on or off                                                  |
| Enable split    | Toggle layout between stacked and side-by-side arrangement                          |
| Visibility      | Control which device types can view the section (all, mobile only, or desktop only) |

### Block settings

This section does not contain any blocks.


# Image hotspot

### Section overview

The Hotspot section displays an image with interactive overlay points that customers can click to reveal products or navigate to specific URLs.

#### Common use cases

* Showcase product features by highlighting specific areas of a product image
* Create an interactive lookbook where customers can shop directly from model images
* Display floor plans or maps with clickable navigation points
* Build guided tours highlighting important elements within an image

#### Usage tips

* Use high-resolution images that provide clear visibility of the hotspot areas
* Ensure sufficient contrast between the image and hotspot indicators
* Limit the number of hotspots to avoid overwhelming customers
* Position hotspots strategically to avoid overlap on mobile screens
* Test thoroughly on mobile to ensure hotspots remain accessible when the image scales down
* Consider using a gradient overlay to improve text visibility when placing content over images

### Section settings

| Setting                   | Description                                                                       |
| ------------------------- | --------------------------------------------------------------------------------- |
| Image background desktop  | The main background image displayed on desktop devices                            |
| Image background mobile   | A separate image optimized for mobile devices                                     |
| Show entire image         | When enabled, displays the entire image without cropping                          |
| Vertical spacing          | Controls the height of the section from extra small to extra large                |
| Color scheme              | Sets the background and text color theme for the section                          |
| Text color                | Determines the text color, with options for default, force light, or force dark   |
| Border color              | Sets the color for section borders                                                |
| Enable gradient           | Adds a gradient overlay to improve visibility of content over images              |
| Enable background overlay | Adds a background color behind text content for improved readability              |
| Border position           | Controls where borders appear (none, top, bottom, or both)                        |
| Vertical alignment        | Positions content at the top, middle, or bottom of the section                    |
| Horizontal alignment      | Aligns content to the left, center, or right of the section                       |
| Enable margin             | When enabled, adds horizontal margin to the section content                       |
| Enable max width          | Limits the content width for improved readability                                 |
| Visibility                | Controls whether the section appears on all devices, only mobile, or only desktop |

### Block settings

#### Heading

Adds a primary heading to the section.

* Block limit: 1

| Setting | Description                        |
| ------- | ---------------------------------- |
| Content | The text to display as the heading |

#### Image

Adds an image to the section content area.

* Block limit: 3

| Setting      | Description                                  |
| ------------ | -------------------------------------------- |
| Image        | The image to display within the content area |
| Image height | Controls the height of the image in pixels   |

#### Content

Adds formatted text content to the section.

* Block limit: 3

| Setting | Description                                                          |
| ------- | -------------------------------------------------------------------- |
| Content | Rich text content that can include formatting, lists, and basic HTML |

#### Buttons

Adds primary and secondary buttons to the section.

* Block limit: 1

| Setting                | Description                                  |
| ---------------------- | -------------------------------------------- |
| Button label           | The text displayed on the primary button     |
| Button URL             | The destination URL for the primary button   |
| Button color           | The style and color of the primary button    |
| Secondary button label | The text displayed on the secondary button   |
| Secondary button URL   | The destination URL for the secondary button |
| Secondary button color | The style and color of the secondary button  |

#### Product

Creates a hotspot that reveals a product card when clicked or hovered.

* Block limit: 20

| Setting             | Description                                                          |
| ------------------- | -------------------------------------------------------------------- |
| Product             | The Shopify product to display when the hotspot is activated         |
| Vertical position   | The vertical position of the hotspot as a percentage from the top    |
| Horizontal position | The horizontal position of the hotspot as a percentage from the left |

#### Link

Creates a hotspot that navigates to a URL when clicked.

* Block limit: 20

| Setting             | Description                                                          |
| ------------------- | -------------------------------------------------------------------- |
| Title               | The text shown in the tooltip when hovering over the hotspot         |
| URL                 | The destination URL when the hotspot is clicked                      |
| Vertical position   | The vertical position of the hotspot as a percentage from the top    |
| Horizontal position | The horizontal position of the hotspot as a percentage from the left |


# Products and Collections


# Featured product

### Section overview

The Featured Products section displays a customizable grid of highlighted products with multiple images from a selected collection.

#### Common use cases

* Showcase bestselling or seasonal products on the homepage
* Feature new arrivals in a visually appealing grid layout
* Highlight products with special promotions or discounts
* Create curated product collections for specific customer segments

#### Usage tips

* Select products with at least 4 high-quality product photos for the best visual presentation
* Customize the grid layout based on your store design (2-4 columns for desktop, 1-2 for mobile)
* Use consistent product photography style for a cohesive look
* Balance the number of featured products with page load times for optimal performance
* Test different color schemes and border styles to match your brand aesthetic
* Ensure product titles and details are clearly visible on mobile devices

### Section settings

| Setting           | Description                                                                            |
| ----------------- | -------------------------------------------------------------------------------------- |
| Collection        | The product collection to display in the grid                                          |
| Total items       | The maximum number of products to display (default: 3)                                 |
| Heading           | The title text for the section                                                         |
| Content           | Descriptive text for the section (supports rich text formatting)                       |
| Button label      | Text to display on the section's call-to-action button                                 |
| Button URL        | The destination URL when the button is clicked                                         |
| Spacing top       | Amount of vertical space above the section (0-300px, default: 100px)                   |
| Spacing bottom    | Amount of vertical space below the section (0-300px, default: 100px)                   |
| Color scheme      | Background and text color combination for the section                                  |
| Border color      | Color of section borders (subtle or strong)                                            |
| Button color      | Color style for the section's button (primary, secondary, tertiary, neutral, or plain) |
| Border position   | Position of section borders (none, top, bottom, or both)                               |
| Desktop columns   | Number of product columns on desktop devices (2-4, default: 3)                         |
| Mobile columns    | Number of product columns on mobile devices (1-2, default: 1)                          |
| Content alignment | Horizontal alignment of section content (left, center, or right)                       |
| Visibility        | Device visibility options (all devices, mobile only, or desktop only)                  |

### Block settings

This section does not contain any customizable blocks.


# Featured collection grid

### Section overview

The Featured collection grid section displays a collection of products in a responsive grid layout with customizable appearance and content. It can also include an optional content card.

#### Common use cases

* Showcasing featured products on the homepage
* Displaying category-specific product collections
* Creating a product highlight section with accompanying promotional content
* Building custom product showcases with mixed content

#### Usage tips

* Choose the right number of products to display based on your page layout
* Select appropriate grid sizes for desktop and mobile to maintain visual appeal
* Ensure product images are consistent in size and style for a cohesive look
* Add a content card to provide context or promotional information alongside products
* Consider color scheme choices that complement your products
* For mobile, a 2-column grid generally works better than a single column

### Section settings

| Setting              | Description                                           |
| -------------------- | ----------------------------------------------------- |
| Collection           | Select which product collection to display            |
| Total items          | Set the number of products to show (1-20)             |
| Heading              | Add a title for the section                           |
| Content              | Add descriptive text to accompany the products        |
| Button label         | Text to display on the section's button               |
| Button URL           | Link destination for the section's button             |
| Spacing top          | Amount of space above the section (0-300px)           |
| Spacing bottom       | Amount of space below the section (0-300px)           |
| Color scheme         | Select the background and text color combination      |
| Border color         | Choose subtle or strong border coloring               |
| Button color         | Select the style for buttons in this section          |
| Border position      | Position of borders (none, top, bottom, or both)      |
| Desktop columns      | Number of products per row on desktop (2-5)           |
| Mobile columns       | Number of products per row on mobile (1-2)            |
| Horizontal alignment | How content aligns horizontally (left, center, right) |
| Visibility           | Control section visibility on different devices       |

### Block settings

#### Card

This block adds a content card that can be included alongside products in the grid. Limited to 1 per section.

| Setting            | Description                                          |
| ------------------ | ---------------------------------------------------- |
| URL                | Link destination when the card is clicked            |
| Heading            | Title text for the card                              |
| Content            | Descriptive text for the card                        |
| Button label       | Text to display on the card's button                 |
| Image              | Main image to display in the card                    |
| Background image   | Image to use as card background                      |
| Video              | Video to display in the card                         |
| Enable autoplay    | Automatically play video when visible                |
| Enable mute toggle | Show mute/unmute button for video                    |
| Enable loop        | Continuously loop video playback                     |
| Index              | Position order in the grid                           |
| Color scheme       | Background and text color combination                |
| Border color       | Color of the card's border (subtle, strong, or none) |
| Button color       | Style for the card's button                          |
| Column span        | Number of grid columns the card should occupy (1-4)  |


# Featured collection slider

### Section overview

The Collection Slider provides a responsive, horizontal scrolling display of collections with customizable cards and promotional content. It allows merchants to showcase multiple collections in an engaging slider format.

#### Common use cases

* Highlighting featured product categories on the homepage
* Showcasing seasonal or promotional collections
* Creating a visual navigation system for store categories
* Displaying curated collections with supporting promotional content

#### Usage tips

* Keep the number of collections reasonable (4-6) to prevent overwhelming customers
* Use consistent imagery across collections for a cohesive appearance
* Customize card width settings for optimal display on both mobile and desktop devices
* Consider adding a promotional card block to provide context or encourage browsing

Mobile responsiveness considerations:

* Adjust card width for mobile using the dedicated mobile width setting
* Preview your slider on mobile devices to ensure readability
* Consider hiding complex slider content on mobile if needed using the visibility settings

### Section settings

| Setting              | Description                                                         |
| -------------------- | ------------------------------------------------------------------- |
| Collection           | Select collections to display in the slider                         |
| Heading              | Main heading for the section                                        |
| Content              | Rich text content to display alongside the heading                  |
| Button label         | Text to display on the section's call-to-action button              |
| Button URL           | URL for the section's call-to-action button                         |
| Spacing top          | Amount of padding above the section (0-300px)                       |
| Spacing bottom       | Amount of padding below the section (0-300px)                       |
| Color scheme         | Background and text color theme for the section                     |
| Border color         | Color of section borders                                            |
| Button color         | Style and color theme for buttons                                   |
| Border position      | Position of borders around the section                              |
| Horizontal alignment | Alignment of content within the section                             |
| Card width mobile    | Width of cards on mobile devices (6-12 out of 12 columns)           |
| Card width desktop   | Width of cards on desktop devices (1-12 out of 12 columns)          |
| Visibility           | Control section visibility on different device types                |
| Show collection size | Enable/disable displaying the number of products in each collection |

### Block settings

#### Card

This block allows you to add a promotional content card to the slider that can include images, text, and video content. Limited to 1 block per section.

| Setting          | Description                                  |
| ---------------- | -------------------------------------------- |
| URL              | Link for the card when clicked               |
| Heading          | Title text for the card                      |
| Content          | Rich text content for the card               |
| Button label     | Text for the card's call-to-action button    |
| Image            | Main image for the card                      |
| Background image | Background image for the card                |
| Video            | Video for the card                           |
| Auto-play video  | Enable/disable automatic video playback      |
| Show mute button | Enable/disable video mute toggle button      |
| Loop video       | Enable/disable video looping                 |
| Background color | Background and text color theme for the card |
| Border color     | Color and style of card borders              |
| Button color     | Style and color theme for the card's button  |
| Column size      | Width of the card in grid columns (1-4)      |


# Collection list grid

### Section overview

The Collection Grid section displays a responsive grid of collection cards, allowing merchants to showcase multiple product collections with customizable layout options and visual styling.

#### Common use cases

* Featuring popular or seasonal collections on the homepage
* Creating category navigation pages with visual collection thumbnails
* Highlighting new product lines or special collections
* Building landing pages with themed collection groupings

#### Usage tips

* Customize the grid layout to match your store's design aesthetic
* Include a descriptive heading and content to provide context for the collections
* Consider mobile responsiveness by setting appropriate column counts for different devices
* Use the card block to highlight a special offer or promotion alongside collections
* Ensure collection images have consistent dimensions for a uniform grid appearance
* For best visual balance, limit the number of collections to what fits comfortably in your layout

### Section settings

| Setting                    | Description                                                         |
| -------------------------- | ------------------------------------------------------------------- |
| Collection                 | Select collections to display in the grid                           |
| Heading                    | Main heading text for the section                                   |
| Content                    | Rich text content displayed below the heading                       |
| Button label               | Text for the optional call-to-action button                         |
| Button URL                 | Link destination for the call-to-action button                      |
| Spacing top                | Controls the top padding in pixels (0-300px)                        |
| Spacing bottom             | Controls the bottom padding in pixels (0-300px)                     |
| Color scheme               | Sets the background color and text color                            |
| Border color               | Sets the color of section borders                                   |
| Button color               | Determines the color and style of the button                        |
| Border position            | Sets where borders appear (none, top, bottom, or both)              |
| Desktop columns            | Number of columns to display on desktop devices (2-5)               |
| Mobile columns             | Number of columns to display on mobile devices (1-2)                |
| Horizontal alignment       | Controls how content aligns horizontally (left, center, right)      |
| Visibility                 | Controls device visibility (all devices, mobile only, desktop only) |
| Show collection size count | Toggles display of product count for each collection                |

### Block settings

#### Card

A customizable content card that can be used to highlight special offers or promotions alongside collection items.

Block limit: 1

| Setting                 | Description                                         |
| ----------------------- | --------------------------------------------------- |
| URL                     | Link destination for the card                       |
| Heading                 | Main heading text for the card                      |
| Content                 | Rich text content displayed in the card             |
| Button label            | Text for the optional call-to-action button         |
| Image                   | Primary image displayed in the card                 |
| Background image        | Secondary image displayed as the card background    |
| Video                   | Optional video to display in the card               |
| Enable autoplay         | Toggles automatic video playback                    |
| Enable mute toggle      | Shows or hides a button to toggle video sound       |
| Enable loop             | Controls whether the video plays on a loop          |
| Background color scheme | Sets the card's background and text colors          |
| Border color            | Sets the color of card borders or removes them      |
| Button color            | Determines the color and style of the card's button |
| Column span             | Number of grid columns the card should occupy (1-4) |


# Alternative collection grid

### Section overview

The Product Featured section displays a grid of highlighted products from a collection, each showcasing multiple product images in an attractive layout.

#### Common use cases

* Featured collections showcase on homepage
* Highlighting products with rich imagery (products with multiple photos)
* Creating visually appealing product displays that draw attention
* Promotional sections highlighting seasonal or special products

#### Usage tips

* **Best practices:**
  * Ensure selected products have at least 4 product photos for optimal display
  * Use this section for products with high-quality images to maximize visual impact
  * Add a compelling heading and description to provide context
  * Include a call-to-action button to direct customers to the full collection
* **Common pitfalls:**
  * Using products with fewer than 4 images will result in duplicated images in the grid
  * Overcrowding the page with too many products (3-4 products is usually optimal)
  * Not customizing the heading and content to match your promotional intent
* **Mobile responsiveness:**
  * Configure appropriate row size settings for mobile displays
  * Consider using a single column layout on mobile for better product visibility
  * Test how the multi-image layout appears on smaller screens

### Section settings

| Setting         | Description                                         |
| --------------- | --------------------------------------------------- |
| Products        | Header section for product-related settings         |
| Collection      | Select the collection to feature products from      |
| Total items     | Set the number of products to display (default: 3)  |
| Content         | Header section for content-related settings         |
| Heading         | Add a title for the section                         |
| Content         | Add descriptive text for the section                |
| Button label    | Add text for the call-to-action button              |
| Button URL      | Set the destination URL for the button              |
| Spacing         | Header section for spacing settings                 |
| Top spacing     | Adjust the padding above the section (0-300px)      |
| Bottom spacing  | Adjust the padding below the section (0-300px)      |
| Color           | Header section for color settings                   |
| Color scheme    | Select the background and text color combination    |
| Border color    | Choose the color for section borders                |
| Button color    | Select the style and color for the button           |
| Style           | Header section for style settings                   |
| Border position | Choose where borders appear around the section      |
| Layout          | Header section for layout settings                  |
| Row desktop     | Set the number of products per row on desktop (2-4) |
| Row mobile      | Set the number of products per row on mobile (1-2)  |
| X alignment     | Set the horizontal alignment of section content     |
| Display         | Header section for display settings                 |
| Visibility      | Control section visibility on different devices     |


# Comparison table

### Section overview

The Comparison Table section creates a responsive, customizable table for comparing product features, services, or brand offerings across multiple columns. It provides a clear visual representation of differences between items.

#### Common use cases

* Product feature comparisons to highlight advantages over competitors
* Service tier comparisons (basic vs premium vs enterprise)
* Subscription plan comparisons to showcase different pricing tiers
* Specification comparisons between related products

#### Usage tips

* Keep feature labels in the first column clear and concise
* Use consistent formatting across all columns for better readability
* Consider highlighting your primary offering with column borders
* Include tooltips for complex features that need additional explanation
* Use icons strategically to visually reinforce information

**Mobile responsiveness considerations**

* The table automatically adapts to a stacked layout on mobile devices
* Column headers become hidden on mobile and are shown inline with values
* Consider how many columns you include, as more columns create more scrolling on mobile

### Section settings

| Setting              | Description                                                                          |
| -------------------- | ------------------------------------------------------------------------------------ |
| Table headings       | Comma-separated list of column headings for your comparison table                    |
| Heading              | Main heading text for the section                                                    |
| Content              | Descriptive text content to display above the table                                  |
| Button label         | Text for optional call-to-action button                                              |
| Button URL           | Link destination for the call-to-action button                                       |
| Top spacing          | Controls vertical padding above the section (0-300px)                                |
| Bottom spacing       | Controls vertical padding below the section (0-300px)                                |
| Color scheme         | Sets the background and text color theme for the section                             |
| Border color         | Sets the color style for borders (subtle or strong)                                  |
| Button color         | Sets the visual style for the call-to-action button                                  |
| Border position      | Controls where borders appear around the section (none, top, bottom, or both)        |
| Column border        | Highlights a specific column with borders (none, first, second, third, or fourth)    |
| Horizontal alignment | Controls how content aligns horizontally (left, center, or right)                    |
| Visibility           | Controls section display based on device (all devices, mobile only, or desktop only) |

### Block settings

#### Content block

Each content block represents a row in the comparison table, containing a feature label and corresponding values for each column. Limited to 50 blocks per section.

| Setting          | Description                                              |
| ---------------- | -------------------------------------------------------- |
| Label            | Text describing the feature being compared               |
| Tooltip          | Optional explanatory text that appears on hover          |
| Icon             | Optional icon to display before the label                |
| Column 1 content | Text content for the first column                        |
| Column 1 icon    | Optional icon to display in the first column             |
| Column 2 content | Text content for the second column                       |
| Column 2 icon    | Optional icon to display in the second column            |
| Column 3 content | Text content for the third column                        |
| Column 3 icon    | Optional icon to display in the third column             |
| Column 4 content | Text content for the fourth column                       |
| Column 4 icon    | Optional icon to display in the fourth column            |
| Color scheme     | Sets the background and text color for this specific row |


# Recently viewed

### Section overview

This section displays a horizontal slider of products that customers have recently viewed while browsing the store. It helps customers revisit items they've shown interest in, potentially increasing conversion rates.

#### Common use cases

* Display recently viewed products on product pages to encourage customers to return to items they browsed
* Add to cart pages to promote additional purchases
* Include on homepage for returning visitors to quickly access products they previously viewed
* Use on collection pages to remind customers of products they've already seen

#### Usage tips

* Place this section strategically where customers might need a reminder of products they've viewed
* Consider limiting the section to display only on product or cart pages for most relevance
* Ensure the section's heading clearly communicates its purpose (e.g., "Recently viewed")
* For mobile optimization, the section automatically adjusts to a narrower display with appropriate spacing
* The section only displays when customers have viewed products, avoiding empty space for new visitors

### Section settings

| Setting         | Description                                                                       |
| --------------- | --------------------------------------------------------------------------------- |
| Heading         | Text displayed as the section heading                                             |
| Content         | Rich text content displayed below the heading                                     |
| Spacing top     | Controls the top padding of the section in pixels                                 |
| Spacing bottom  | Controls the bottom padding of the section in pixels                              |
| Color scheme    | Sets the background and text color scheme of the section                          |
| Border color    | Sets the color of borders in the section                                          |
| Border position | Controls where borders appear (none, top, bottom, or both)                        |
| Visibility      | Controls whether the section appears on all devices, mobile only, or desktop only |

### Block settings

This section does not contain any blocks.


# Collection list slider

### Section overview

The Collection Slider section displays a horizontal scrollable slider of product collections, allowing customers to browse through different collection categories with a visually appealing interface.

#### Common use cases

* Showcasing different product categories on the homepage
* Highlighting seasonal or featured collections
* Creating a navigation element for browsing product categories
* Promoting special collections alongside custom content cards

#### Usage tips

* Use clear, high-quality images for each collection to improve visual appeal
* Keep the number of collections reasonable to avoid overwhelming customers
* Add a descriptive heading to help customers understand the purpose of the slider
* Consider adding a promotional card to highlight special offers or announcements

**Best practices:**

* Maintain consistent image dimensions across all collections for a polished look
* Use concise, descriptive titles for each collection
* Set appropriate card widths for mobile and desktop to ensure proper display

**Common pitfalls to avoid:**

* Adding too many collections, making it difficult for customers to navigate
* Using poor quality or inconsistent images
* Neglecting to configure responsive settings for mobile devices

**Mobile responsiveness considerations:**

* Adjust card width for mobile using the card\_width\_mobile setting
* Test the slider on different devices to ensure proper display and navigation
* Consider hiding complex content on mobile if it affects usability

### Section settings

| Setting                      | Description                                                                |
| ---------------------------- | -------------------------------------------------------------------------- |
| Collection                   | Select the collections to display in the slider                            |
| Heading                      | Set the heading text for the section                                       |
| Content                      | Add descriptive text content for the section                               |
| Button label                 | Text to display on the section button                                      |
| Button URL                   | URL for the section button link                                            |
| Spacing top                  | Control the top padding of the section (0-300px)                           |
| Spacing bottom               | Control the bottom padding of the section (0-300px)                        |
| Color scheme                 | Choose the color scheme for the section background and text                |
| Border color                 | Select the color for section borders                                       |
| Button color                 | Choose the style and color for buttons in the section                      |
| Border position              | Set the position of borders (none, top, bottom, or both)                   |
| Horizontal alignment         | Control how content aligns horizontally (left, center, right)              |
| Card width mobile            | Set the width of cards on mobile devices (fraction of 12)                  |
| Card width desktop           | Set the width of cards on desktop devices (fraction of 12)                 |
| Visibility                   | Control section visibility across devices (all, mobile only, desktop only) |
| Enable collection size count | Show or hide the number of products in each collection                     |

### Block settings

#### Card

The Card block allows you to add a promotional content card to the collection slider, which can feature text, images, or video to highlight special offers or announcements.

**Block limit:** 1

| Setting                 | Description                                              |
| ----------------------- | -------------------------------------------------------- |
| URL                     | Set the link destination when the card is clicked        |
| Heading                 | Add a title for the promotional card                     |
| Content                 | Add descriptive text content for the card                |
| Button label            | Text to display on the card's button                     |
| Image                   | Select the main image to display on the card             |
| Background image        | Choose a background image for the card                   |
| Video                   | Upload or select a video to display on the card          |
| Enable autoplay         | Automatically play video when it comes into view         |
| Enable mute toggle      | Show a button to toggle video sound on/off               |
| Enable loop             | Continuously loop the video playback                     |
| Background color scheme | Choose the color scheme for the card background and text |
| Border color            | Select the color and visibility of card borders          |
| Button color            | Choose the style and color for the card's button         |
| Column size             | Set how many columns the card should span (1-4)          |


# Forms




---

[Next Page](/llms-full.txt/1)