# Design Packs Docs ## Design Packs Docs - [Get started here](https://design-packs.gitbook.io/docs/get-started-here.md): Design Packs are sections and templates that can be added directly to your existing Shopify theme. Each Design Pack adds functional or style elements missing from your existing theme. - [Adding your first section](https://design-packs.gitbook.io/docs/guides/adding-your-first-section.md) - [Adding your first template](https://design-packs.gitbook.io/docs/guides/adding-your-first-template.md) - [General settings](https://design-packs.gitbook.io/docs/guides/general-settings.md): Each Design Pack allows for a variety of customization options. We've streamlined some settings to be standard across all packs. The options below apply to all or most packs. - [Helpful hints & resources](https://design-packs.gitbook.io/docs/guides/helpful-hints-and-resources.md) - [Troubleshooting](https://design-packs.gitbook.io/docs/guides/troubleshooting.md): Running into issues? Here are some tips that might help! - [Performance](https://design-packs.gitbook.io/docs/guides/performance.md): Design Packs: Optimized for Speed and Performance - [Design System](https://design-packs.gitbook.io/docs/fundamentals/design-system.md) - [Global Section Settings](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings.md) - [Setting Solid Background Colors instead of Gradients](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/setting-solid-background-colors-instead-of-gradients.md) - [Understanding Layout Settings: Size & Maximum Width](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/understanding-layout-settings-size-and-maximum-width.md) - [Understanding Inner Padding & Outer Margin Settings](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/understanding-inner-padding-and-outer-margin-settings.md) - [Custom Classes Setting](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/custom-classes-setting.md) - [Enable Metafield Detection Setting](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/enable-metafield-detection-setting.md) - [Metafield ready sections](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/enable-metafield-detection-setting/metafield-ready-sections.md): We're migrating our sections to be Metafield ready. This is primarily useful for product pages. What you'll now be able to do is set up Metafields/MetaObjects for each product. - [How to Use Metaobjects on Product template with Image with text - simple section](https://design-packs.gitbook.io/docs/fundamentals/global-section-settings/enable-metafield-detection-setting/how-to-use-metaobjects-on-product-template-with-image-with-text-simple-section.md) - [Section Tutorials](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials.md) - [Blog Posts: How to use Blog Tags Setting to Show Product-Specific Blog Posts](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/blog-posts-how-to-use-blog-tags-setting-to-show-product-specific-blog-posts.md) - [Breadcrumbs: How to set up dynamic content with metafields](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/breadcrumbs-how-to-set-up-dynamic-content-with-metafields.md): Using Product Metafields with Breadcrumb Collections - [Contact form: How to Pass a Hidden Field on Submission](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/contact-form-how-to-pass-a-hidden-field-on-submission.md) - [Events Calendar: How to set up iCal Integration Guide](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/events-calendar-how-to-set-up-ical-integration-guide.md) - [FAQ sections: How to connect with Knowledge Base FAQ metafields](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/faq-sections-how-to-connect-with-knowledge-base-faq-metafields.md) - [Featured Collection: How to Show Individual Variants in the Product Grid](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-how-to-show-individual-variants-in-the-product-grid.md) - [Featured Collection: How to use the Metafield Badge Setting](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-how-to-use-the-metafield-badge-setting.md) - [Featured Collection - Blocks:](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-blocks.md) - [How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-blocks/how-to-use-the-liquid-block-in-featured-collection-blocks-section-to-add-custom-review-apps.md) - [How to use the Metafield Image Badge block](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-blocks/how-to-use-the-metafield-image-badge-block.md) - [How to use the Metafield text block](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-collection-blocks/how-to-use-the-metafield-text-block.md) - [Featured products: Add custom events when product is added to cart - eg. show slideout cart](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-products-add-custom-events-when-product-is-added-to-cart-eg.-show-slideout-cart.md) - [Gift Card: How to leverage gift card shortcodes in text block](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/gift-card-how-to-leverage-gift-card-shortcodes-in-text-block.md) - [Setting Up a Google Maps API Key](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/setting-up-a-google-maps-api-key.md) - [Modal popup: How to Use the "Link Trigger" for Showing Extra Information](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/modal-popup-how-to-use-the-link-trigger-for-showing-extra-information.md) - [Pathfinder: How to use URL Strategy setting](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/pathfinder-how-to-use-url-strategy-setting.md) - [Vendors - Alphabet: How to Set Up Vendor-specific Images](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/vendors-alphabet-how-to-set-up-vendor-specific-images.md) - [Block Settings](https://design-packs.gitbook.io/docs/fundamentals/block-settings.md) - [Newsletter/Signup Form Block - Tags](https://design-packs.gitbook.io/docs/fundamentals/block-settings/newsletter-signup-form-block-tags.md) - [Contexts block](https://design-packs.gitbook.io/docs/fundamentals/block-settings/contexts-block.md) - [Size Controls for Image & Video Blocks](https://design-packs.gitbook.io/docs/fundamentals/block-settings/size-controls-for-image-and-video-blocks.md) - [Sections Overview](https://design-packs.gitbook.io/docs/fundamentals/sections-overview.md) - [Banners & Sliders](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/banners-and-sliders.md): All of the banner sections follow the same principles. You're able to swap out images, modify the height, re-order the content, and - [Flourish](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/flourish.md) - [Icon & Logos](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/icon-and-logos.md) - [Image with text](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/image-with-text.md) - [Menus & Navigation](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/menus-and-navigation.md) - [Blocks & Columns](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/blocks-and-columns.md) - [Text Content](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/text-content.md) - [Products & Collections](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/products-and-collections.md) - [Article sections](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/article-sections.md) - [Galleries](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/galleries.md) - [Misc](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/misc.md) - [Modal Popup](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/modal-popup.md) - [Gift Card](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/gift-card.md) - [Pathfinder](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/pathfinder.md) - [Lottie animation](https://design-packs.gitbook.io/docs/fundamentals/sections-overview/lottie-animation.md) - [Templates Overview](https://design-packs.gitbook.io/docs/fundamentals/templates-overview.md) - [Regular Page](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/regular-page.md) - [Lookbooks](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/lookbooks.md) - [Blogs](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/blogs.md) - [Blog Posts](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/blog-posts.md) - [Collection](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/collection.md) - [Landing pages](https://design-packs.gitbook.io/docs/fundamentals/templates-overview/landing-pages.md) - [Custom CSS](https://design-packs.gitbook.io/docs/fundamentals/custom-css.md) - [Basic CSS examples](https://design-packs.gitbook.io/docs/fundamentals/custom-css/basic-css-examples.md) - [Mobile CSS examples](https://design-packs.gitbook.io/docs/fundamentals/custom-css/mobile-css-examples.md) - [Advanced Examples](https://design-packs.gitbook.io/docs/fundamentals/custom-css/advanced-examples.md) - [Shopify expertise](https://design-packs.gitbook.io/docs/fundamentals/shopify-expertise.md): Get the most out Design Packs and your theme 🎉 - [Theme editor](https://design-packs.gitbook.io/docs/fundamentals/shopify-expertise/theme-editor.md): Tips and tricks on how to use the Shopify theme editor - [Metafields](https://design-packs.gitbook.io/docs/fundamentals/shopify-expertise/metafields.md): Add dynamic content - [MetaObjects](https://design-packs.gitbook.io/docs/fundamentals/shopify-expertise/metaobjects.md) - [Custom Fonts](https://design-packs.gitbook.io/docs/fundamentals/custom-fonts.md): You no longer need to be limited by the fonts made available by Shopify. Now you can add ANY font to your store!! - [Helpful Guides](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides.md) - [How to jump/ link to another section on the SAME page](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-jump-link-to-another-section-on-the-same-page.md) - [How to forward a contact form in Shopify to a different email with Gmail filters](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-forward-a-contact-form-in-shopify-to-a-different-email-with-gmail-filters.md) - [How to create new page templates (and keep the original as a starting point)](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-create-new-page-templates-and-keep-the-original-as-a-starting-point.md) - [How to Create a New Product Template](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-create-a-new-product-template.md) - [How to set default article template for all blog posts](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-set-default-article-template-for-all-blog-posts.md): Instead of applying each new template individually to each blog post, you can replace the default article template so that all your articles will have the same style. - [How to Embed a Section Inside Your Article Content](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-embed-a-section-inside-your-article-content.md) - [How to Hide/Show Sections Based on Context](https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-hide-show-sections-based-on-context.md) - [For Designers](https://design-packs.gitbook.io/docs/use-cases/for-designers.md): We built design packs with designers in mind. Design packs are flexible enough to fit into any design seamlessly. - [For Developers](https://design-packs.gitbook.io/docs/use-cases/for-developers.md) - [Agency Licenses](https://design-packs.gitbook.io/docs/use-cases/agency-licenses.md) - [Affiliate Program](https://design-packs.gitbook.io/docs/use-cases/affiliate-program.md) - [Product Blocks](https://design-packs.gitbook.io/docs/product-blocks/product-blocks.md) - [Image with text block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/image-with-text-block.md) - [Connected products block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/connected-products-block.md) - [Variant descriptions block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/variant-descriptions-block.md) - [Value icons block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/value-icons-block.md) - [Video block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/video-block.md) - [Collapsible content block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/collapsible-content-block.md) - [Feature range block](https://design-packs.gitbook.io/docs/product-blocks/product-blocks/feature-range-block.md) - [Theme Updater App](https://design-packs.gitbook.io/docs/integrations/theme-updater-app.md): How to make sure Design Packs carry over properly when using the Theme Updater App (Out of the Sandbox, Pixel Union, and Archetype themes) - [JruJw5dm](https://design-packs.gitbook.io/docs/jrujw5dm.md)