# Modular theme documentation

Modular is built to display brand imagery in a minimalist, grid-centered design. Filled with modern sections and blocks, Modular features a signature product grid to present collections and products in a statement collage-style layout.

Discover Modular and our theme documentation to help build and design your store with simplicity.

## Demonstration stores

Explore our Shopify demonstration stores running Modular:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center">Modular</td><td><a href="/files/SPDeuUvRl9pUIoNV3rwn">/files/SPDeuUvRl9pUIoNV3rwn</a></td><td></td></tr><tr><td align="center">Companion</td><td><a href="/files/b2eZ44ra4MYBUVSCBE9V">/files/b2eZ44ra4MYBUVSCBE9V</a></td><td></td></tr><tr><td align="center">Pattern</td><td><a href="/files/9wf4NlZfnZZWe4DcGM0i">/files/9wf4NlZfnZZWe4DcGM0i</a></td><td></td></tr><tr><td align="center">Sparkling</td><td><a href="/files/KrEsjz4MNBAOc45JJ6fQ">/files/KrEsjz4MNBAOc45JJ6fQ</a></td><td></td></tr><tr><td align="center">Kiln</td><td><a href="/files/l0PeMqlvjU6ubGX9XxuV">/files/l0PeMqlvjU6ubGX9XxuV</a></td><td></td></tr></tbody></table>

## Try Modular

Download our Modular theme from the Shopify Theme Store:

{% embed url="<https://themes.shopify.com/themes/modular/presets/modular>" %}

## Support

If you have questions or need additional assistance with using Modular, our support staff is here to help you by email. Reach out to us through our contact form:

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


# Release Notes

### Version 7.0.0 - June 2, 2026

#### Added

* All new presets: Sparkling, Pattern, Companion, Kiln, and the main Modular preset has gotten a complete style overhaul
* Highlights section
* Text columns with images section
* Jumbo button section
* Shop the look section
* Social gallery section
* Subheadings badge style option
* Global ‘Rounded corners’ setting added for images and boxed elements
* Product form blocks: Icon block, Accordion block
* Add to cart button: Implemented an option to display the product price directly on the ATC button.
* Badges added as an option to Hero, Slideshow, Image with text and Text columns with images sections to provide a modern way to highlight product features, brand identity etc.
* Grid updated and Width settings added into all sections
* Logo section in Footer
* Cutline for product grid added. Use the metafield 'theme.cutline' to show a short description under product titles

#### Changed

* Overall theme design has been modernized
* New color palettes
* New typography styles and settings
* Important: If upgrading, you will be required to reset your color and typography settings
* Product card design updated
* Icons updated to modern designs
* Slider design modernized and updated, fixed scroll setting included
* Quick view design updated for both desktop and mobile
* Image with text section and Slideshow sections now built with theme blocks
* Image with text overlay section renamed to Hero section and is now built with theme blocks
* Animations speed increased
* Testimonials section design updated and modernized
* Additional settings added to Rich text and Split content sections to apply background colors, vertical padding and border radius to the content
* New Header style added. Two styles removed: ‘Menu center, logo center’ and ‘Menu right, logo left’
* Announcement bar homepage section renamed to Marquee section with additional text and color settings
* Image and Icon block added to Marquee section
* ‘Heading SEO tag’ setting added to all Heading blocks

#### Fixes & improvements

* A11Y improvements
* Top/bottom padding settings included in all sections now
* Language and Currency selectors updated
* Add to cart bar on Product page improved
* Complimentary products block on the Product page displays correctly
* Improvements made to the Text block in the Mosaic section


# About v7.0 release

This release is a major step forward: a top-to-bottom design modernization, four brand-new presets alongside a full overhaul of the Modular preset, and a wide set of new sections, blocks, and settings that give you more ways to merchandise, highlight, and style your store.

> **⚠️ Important - action required when upgrading** If you're updating from a previous version, you'll need to **reset your color and typography settings**. The new palettes and type system replace the old ones, so existing settings won't carry over cleanly.

***

### A modernized design

The whole theme has been redesigned with a cleaner, more contemporary feel. That includes refreshed product cards, a new icon set, faster animations, and an updated slider — small changes that add up to a noticeably more polished store.

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

***

### New presets

Five distinct starting points, so you can launch a look that fits your brand out of the box.

**Sparkling, Pattern, Companion, and Kiln** join the lineup as brand-new presets — and the flagship **Modular** preset has been completely restyled.

<figure><img src="/files/KrEsjz4MNBAOc45JJ6fQ" alt="Sparkling demo store"><figcaption><p>Sparkling demo store</p></figcaption></figure>

<figure><img src="/files/9wf4NlZfnZZWe4DcGM0i" alt="Pattern demo store"><figcaption><p>Pattern demo store</p></figcaption></figure>

<figure><img src="/files/b2eZ44ra4MYBUVSCBE9V" alt="Companion demo store"><figcaption><p>Companion demo store</p></figcaption></figure>

<figure><img src="/files/l0PeMqlvjU6ubGX9XxuV" alt="Kiln demo store"><figcaption><p>Kiln demo store</p></figcaption></figure>

***

### New sections

#### Highlights

Surface your key selling points, collections, products, anything, in a clean, layout that is built to convert.

<figure><img src="/files/GKfkFuTxePU5UrxmTjoX" alt="Highlights section showcase"><figcaption></figcaption></figure>

#### Text columns with images

Pair short blocks of copy with supporting imagery to tell a story, explain a process, or break down product features side by side.

<figure><img src="/files/jRqjKZzXOqMyvkQcZVig" alt="Text columns with images section showcase"><figcaption></figcaption></figure>

#### Jumbo button

A bold, oversized call-to-action that's impossible to miss (literally). Perfect for driving shoppers toward a sale, collection, or campaign.

<figure><img src="/files/DDkwt1kBfO23Wkg1cBWG" alt="Jumbo button section showcase"><figcaption></figcaption></figure>

#### Shop the look

Turn a styled lifestyle scene into a shoppable moment, letting customers buy multiple products straight from a single image.

<figure><img src="/files/aCJvlg1y0kkK508UAo69" alt="Shop the look section showcase"><figcaption></figcaption></figure>

#### Social gallery

Showcase your social and lifestyle content to add authenticity and social proof to your homepage.

<figure><img src="/files/NhAYt4GAZBobF3C1rqDG" alt="Social gallery section showcase"><figcaption></figcaption></figure>

#### Full-width Logo section in the Footer

Add a large logo to your footer for a more finished, branded close to every page.

<figure><img src="/files/n4TUy5nUFpYO2pxTBlqO" alt="Full width logo section showcase"><figcaption></figcaption></figure>

#### Hero section

Formerly the Image with text overlay section, Hero now gives you a more flexible way to build high-impact banners with layered content, supporting images, and badges - ideal for featured launches, seasonal campaigns, and other collections or products you want to put front and center.

<figure><img src="/files/8rgBKO7k9JBaUBTS6WJO" alt="Hero section showcase"><figcaption></figcaption></figure>

***

### New blocks

#### Product form blocks

The product form has been removed, but replaced with individual elements for better customizability.

Two new blocks for your product pages: an **Icon block** for visual callouts, and an **Accordion block** for tidy, collapsible details like sizing, care, or shipping info.

<figure><img src="/files/NjbGAz8fLM6GdY6pRV6D" alt="New product form blocks"><figcaption></figcaption></figure>

#### Marquee Image and Icon blocks

The Marquee section now supports **Image** and **Icon** blocks, so your scrolling banners can do more than text.

<figure><img src="/files/BQTEwKkL0VN0z4LafcNn" alt="image and icon blocks in marquee"><figcaption></figcaption></figure>

***

### New settings & options

#### Badges

Now available on the **Hero, Slideshow, Image with text,** and **Text columns with images** sections - a modern way to highlight product features, brand identity, and more.

<figure><img src="/files/BJ3ASqT7Bw4ZvyYI30CS" alt="Badges everywhere"><figcaption></figcaption></figure>

#### Price on the Add to cart button

You can now display the product price directly on the ATC button.

<figure><img src="/files/p5D63Ai8sD5uP2SFzCN4" alt="Price in atc button"><figcaption></figcaption></figure>

#### Product grid cutline

Show a short description under your product titles using the `theme.cutline` metafield -great for surfacing a tagline or key detail right in the grid.

<figure><img src="/files/1naMJfpKSGd5vIohLvtv" alt="cutline feature showcase"><figcaption><p>Cutline example - "Clean, off-duty style"</p></figcaption></figure>

#### More styling control

* A new **Subheadings badge style** option.
* A global **"Rounded corners"** setting for images and boxed elements.
* **Grid and Width settings** added to every section.

### Redesign

#### Quick view

The quick view CTA was coded from scratch to deliver a modern design that converts. It now appears at the bottom right corner&#x20;

<figure><img src="/files/kwDe7zxQXQhVhytWkPVE" alt="quick view showcase"><figcaption></figcaption></figure>

***

### What's changed

We've refreshed a lot under the hood, too:

* **New color palettes** and a **new typography system** with updated styles and settings.
* **Image with text** and **Slideshow** are now built with **theme blocks**, and **Image with text overlay** has been renamed to **Hero** — also rebuilt with theme blocks.
* **Testimonials** redesigned and modernized.
* **Quick view** redesigned for both desktop and mobile.
* **Slider** updated with a new fixed scroll setting.
* **Rich text** and **Split content** sections gained background color, vertical padding, and border radius controls.
* The **Announcement bar** is now the **Marquee** section, with additional text and color settings.
* A **"Heading SEO tag"** setting added to all Heading blocks.
* A **new Header style** added; two older styles — "Menu center, logo center" and "Menu right, logo left" — have been removed.

***

### Fixes & improvements

* Accessibility (A11Y) improvements throughout.
* Top/bottom padding settings now available in every section.
* Updated Language and Currency selectors.
* Improved Add to cart bar on the Product page.
* The Complimentary products block on the Product page now displays correctly.
* Improvements to the Text block in the Mosaic section.

***

*Ready to explore? Update your theme and take the new presets for a spin - and don't forget to re- setup your color and typography settings.*


# How to use sections

Customize your store using these Modular sections

### About our Sections

Modular comes complete with 20+ professional theme sections to help you merchandise your online store. Sections can be added to any page on your store.

Discover the complete range of sections and their settings. Experiment by adding different types of sections and section blocks to the homepage and the other pages within your store.

{% hint style="success" %}
These sections can be placed on any page including:

* Homepage
* Product pages
* Collection pages and Collection list
* Blog index and Blog posts
* Shopify pages
* 404 error page, Search page, Password page
* Cart page
  {% endhint %}


# Section settings

To find the primary settings for each section, click on the section name to view the settings panel. These settings control the elements of the section.

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

{% hint style="success" %}
Wider desktop screens will display the settings panel on the right side of your screen.
{% endhint %}


# Adding sections

When adding a section to a certain template. The same content will appear on all pages that are also using that template.

You can create additional templates (such as a new page template or collection page template) and then assign them to your pages, products, collections, or blogs. This will allow you to create multiple pages with different content.

### Home page sections

Scroll towards the bottom, above Footer and Popups. Choose to **Add section**:

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

### Product page sections

Navigate to any product page or choose the default product template. Use **Add section** located above Footer and Popups:

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

### Other pages

Navigate to any page on your site or choose any template from the top drop-down. Choose to **Add section**, which is located above Footer and Popups on the left panel:

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

{% hint style="success" %}
New templates need to be created on the published theme. They will not appear as a template option for assignments if created in a draft theme.

This is a Shopify platform restriction. Always make new templates on the live/published theme.
{% endhint %}


# Hiding sections

Use the toggle (eye) icon next to the section title to toggle the display of the entire section:

![Hide an entire section](/files/-MiwQT6xQpDHpfVHn2MW)

{% hint style="info" %}
**Tip** - Section blocks have toggle icons as well. Using them, you can hide individual blocks.

Be sure to select the section toggle icon to toggle the display of the entire section.
{% endhint %}


# Reordering sections

Use the handle icon (stacked dots) which is located next to the eye icon to drag a section and drop it in a new position:

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


# Theme Settings

Under each section settings (as well as under all sections inside the Theme Editor) you will find a button to the Theme Settings. These are a number of global settings grouped together for ease of use. &#x20;

Some section settings are also placed under the Theme Settings so if you're looking for a setting you feel are not finding, it might be under this little tab:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-legacy-files/o/assets%2F-MhyVwxmMUUW9VvN1qbw%2F-MiwKLu7aony_ztOsRnM%2F-MiwT81LeN6UhUhNKl8S%2Ftheme%20settings.gif?alt=media&token=d05942b8-1f80-4100-81a0-e2b30f48019b>" %}


# Modular sections

## Theme sections

Click to view details of individual sections included with Modular:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Blog posts</strong></td><td>Showcase the latest posts from one of your blogs on your store pages.</td><td></td><td><a href="/files/EOSq9TbRpuWvWzV9mvQr">/files/EOSq9TbRpuWvWzV9mvQr</a></td><td><a href="/pages/Cuyk9yUCeRYKiS4tdgHe">/pages/Cuyk9yUCeRYKiS4tdgHe</a></td></tr><tr><td><strong>Collections list</strong></td><td>Аdd links to collections you want to highlight on your store pages.</td><td></td><td><a href="/files/TwjNoGbCTHxWxDtijybX">/files/TwjNoGbCTHxWxDtijybX</a></td><td><a href="/pages/CluuA9pPeKSQCsjehcxW">/pages/CluuA9pPeKSQCsjehcxW</a></td></tr><tr><td><strong>Contact form</strong></td><td>Let your customers get in touch.</td><td></td><td><a href="/files/kcf94QQcFmCBmqZAYtZZ">/files/kcf94QQcFmCBmqZAYtZZ</a></td><td><a href="/pages/xDkEK9cWzqb1z6RVHqFA">/pages/xDkEK9cWzqb1z6RVHqFA</a></td></tr><tr><td><strong>Custom HTML</strong></td><td>Add your own HTML or Liquid blocks.</td><td></td><td><a href="/files/6X8EfJyPQ0yBzTYmIN4m">/files/6X8EfJyPQ0yBzTYmIN4m</a></td><td><a href="/pages/9ekFMZdHiNedNDf1y8rG">/pages/9ekFMZdHiNedNDf1y8rG</a></td></tr><tr><td><strong>FAQ</strong></td><td>A place to promote your services, and brand strengths and also include product reviews.</td><td></td><td><a href="/files/fTHhAK0bGM91fRDRa7Az">/files/fTHhAK0bGM91fRDRa7Az</a></td><td><a href="/pages/Vpv5oL5P424jk14Hjvs4">/pages/Vpv5oL5P424jk14Hjvs4</a></td></tr><tr><td><strong>Featured collection</strong></td><td>Generate blocks with links to each product page.</td><td></td><td><a href="/files/IDcF7ilAoH8Z3bBa0xxw">/files/IDcF7ilAoH8Z3bBa0xxw</a></td><td><a href="/pages/Qj3vjhu4UpGNehDxbiWI">/pages/Qj3vjhu4UpGNehDxbiWI</a></td></tr><tr><td><strong>Featured product</strong></td><td>Bring a product gallery and form to your store pages.</td><td></td><td><a href="/files/cWwD5hkiAXBn6M5ZnRnj">/files/cWwD5hkiAXBn6M5ZnRnj</a></td><td><a href="/pages/mhnNU1Bvp0ipGYleTSgf">/pages/mhnNU1Bvp0ipGYleTSgf</a></td></tr><tr><td><strong>Icons row</strong></td><td>Present short bursts of information to your customers.</td><td></td><td><a href="/files/WNRBC8DPWxKNxr3KV6Qd">/files/WNRBC8DPWxKNxr3KV6Qd</a></td><td><a href="/pages/FIhyf7e5HnA8siQcNMIg">/pages/FIhyf7e5HnA8siQcNMIg</a></td></tr><tr><td><strong>Image with text</strong></td><td>Use this more striking design to grab your customer's attention.</td><td></td><td><a href="/files/Pp8shsXTyE0MbTWdigsc">/files/Pp8shsXTyE0MbTWdigsc</a></td><td><a href="/pages/VHWPYFqT8G1bayZPBCbg">/pages/VHWPYFqT8G1bayZPBCbg</a></td></tr><tr><td><strong>Image with text overlay</strong></td><td>A great banner section for your store pages.</td><td></td><td><a href="/files/BtAVaohuJQiyIpdV2Knb">/files/BtAVaohuJQiyIpdV2Knb</a></td><td><a href="/pages/3TrOFNoyplSd1V2TQOFR">/pages/3TrOFNoyplSd1V2TQOFR</a></td></tr><tr><td><strong>Logo list</strong></td><td>Include partner brand logos.</td><td></td><td><a href="/files/IMM2PyEnjm90RF9DBimp">/files/IMM2PyEnjm90RF9DBimp</a></td><td><a href="/pages/cjsUpJ8kfq6BpSIblUlk">/pages/cjsUpJ8kfq6BpSIblUlk</a></td></tr><tr><td><strong>Mosaic</strong></td><td>A unqiue layout with great flexibility.</td><td></td><td><a href="/files/nk2PSf2XTb9CLOJ7Uojs">/files/nk2PSf2XTb9CLOJ7Uojs</a></td><td><a href="/pages/zHaXJ1YH988wrhn5CP4W">/pages/zHaXJ1YH988wrhn5CP4W</a></td></tr><tr><td><strong>Newsletter</strong></td><td>Display a small-sized newsletter signup message.</td><td></td><td><a href="/files/uAeW9FibcZZEhwmPYmJI">/files/uAeW9FibcZZEhwmPYmJI</a></td><td><a href="/pages/Wwtcq8hZYNyFA6B4qEQl">/pages/Wwtcq8hZYNyFA6B4qEQl</a></td></tr><tr><td><strong>Product features</strong></td><td>Showcase a product.</td><td></td><td><a href="/files/lJhiqkxGjZXQV6Ws8nMx">/files/lJhiqkxGjZXQV6Ws8nMx</a></td><td><a href="/pages/A6cbhQZDEPwtX0RF0YFr">/pages/A6cbhQZDEPwtX0RF0YFr</a></td></tr><tr><td><strong>Rich text</strong></td><td>A split text section.</td><td></td><td><a href="/files/4YwVLjifzb39852z4LJN">/files/4YwVLjifzb39852z4LJN</a></td><td><a href="/pages/QU5SIKLBdvfaoAsE2GuW">/pages/QU5SIKLBdvfaoAsE2GuW</a></td></tr><tr><td><strong>Slideshow</strong></td><td>A home page banner with incredible customizability.</td><td></td><td><a href="/files/t7Zp8AqAK6zqJGyXXkji">/files/t7Zp8AqAK6zqJGyXXkji</a></td><td><a href="/pages/VZjHQGEpXiA0362He8A8">/pages/VZjHQGEpXiA0362He8A8</a></td></tr><tr><td><strong>Split hero</strong></td><td>Showcase side-by-side images.</td><td></td><td><a href="/files/2UaABx9UI3m0xxfS0YTv">/files/2UaABx9UI3m0xxfS0YTv</a></td><td><a href="/pages/dUogz9M36RrXN9WtQonf">/pages/dUogz9M36RrXN9WtQonf</a></td></tr><tr><td><strong>Testimonials</strong></td><td>Add quotes from business partners and client testimonials to your store pages.</td><td></td><td><a href="/files/O0EjY8tyX7BMECLlAIbb">/files/O0EjY8tyX7BMECLlAIbb</a></td><td><a href="/pages/eFbxlOf5xbYOcXe48drF">/pages/eFbxlOf5xbYOcXe48drF</a></td></tr><tr><td><strong>Video</strong></td><td>A video background section.</td><td></td><td><a href="/files/z7HxveoXweY0SPzTFL02">/files/z7HxveoXweY0SPzTFL02</a></td><td><a href="/pages/XczIARD6m6ekUlKYb2Kb">/pages/XczIARD6m6ekUlKYb2Kb</a></td></tr></tbody></table>

### Additional Theme Settings included with Modular:

* Custom Liquid
* Recently viewed


# Announcement bar

'Announcement bar' is a versatile tool that enables you to share vital messages with your website's visitors efficiently. Use it to advertise sales, new product launches, or free shipping offers.

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

## **Key components**

* **Layout:** Choose between a slider or marquee layout, providing flexibility in how your announcements are displayed.
* **Background:** Personalize the appearance of your announcement bar with customizable background and text colors to match your brand's aesthetic.
* **Text:** Easily create text-based announcements with rich formatting options, allowing you to highlight key information and calls to action.

## Configuring your section: Settings overview

* **Mobile optimization:** Optimize your announcements for mobile devices, delivering a consistent and engaging user experience across all platforms.
* **Header:** Seamlessly integrate the announcement bar into your website's header, ensuring maximum visibility and accessibility for your visitors.
* **Targeted deployment:** Apply targeting settings to custom code blocks, allowing you to control where and how your custom content is displayed.
* **Advanced customization:** For users with coding expertise, leverage the custom code block to integrate advanced functionality or design elements seamlessly.


# Background video

Elevate your website's visual appeal and captivate your audience by incorporating a background video section. This dynamic feature allows you to create immersive experiences that captivate visitors, leaving a memorable impact.

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

## **Key components**

* **Dynamic visuals:** Set the tone for your website with a stunning video background that grabs attention and adds an element of dynamism.&#x20;
* **Call to action:** Add a quick and clear prompt that encourages your visitors to take a specific action, boosting engagement and conversions.

## Configuring your section: Settings overview

* **Enhanced visibility:** Adjust the opacity and color of the overlay to create contrast and ensure legible text over your video or image background.
* **Tailored height options:** Choose from various height options to create the perfect balance between visual impact and mobile responsiveness.
* **Flexible styling:** Customize the button's text, color, size, and style to align with your brand's aesthetic and messaging.


# Blog posts

'Blog posts' allows you to share updates, insights, and news with your audience. Use this space to engage your customers with valuable content that keeps them informed and connected to your brand.

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

## **Key components**

* **Headings and text:** Our customizable headings and rich text capabilities ensure that your blog posts section seamlessly integrates with your store's branding and messaging.&#x20;
* **Navigation with call-to-action buttons:** Customize the button label and style to encourage clicks and guide users to discover additional blog posts and articles.

## Configuring your section: Settings overview

* **Flexible display:**  From displaying tags and author information to controlling the aspect ratio of featured images, you have the flexibility to create a layout that aligns perfectly with your vision.
* **Responsive design:** Our blog posts section is optimized for a seamless viewing experience across devices, ensuring that your content looks great whether your visitors are browsing on desktops, tablets, or smartphones.&#x20;
* **Padding controls:**  Adjust the padding at the top and bottom of the section to create the perfect balance between visual appeal and readability.


# Collections list

The 'Collection list' section is here to help you add links to collections you want to highlight on your store pages. This is a quick and easy way to run promotions or let your customers know about new collections.

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

## Key components

* **Headings and text:** Our customizable headings and text fields allow you to provide context and information about each collection.&#x20;
* **Layout:** Choose from different block heights and text positions to create a layout that suits your preferences.&#x20;

## Configuring your section: Settings overview

* **Mobile-friendly slider:** Enable the slider to navigate through collections effortlessly on your mobile device, ensuring a smooth and intuitive shopping experience wherever you are.
* **Colors and overlays:** Adjust the text color, overlay color, and opacity to match your brand's aesthetic.
* **Replacement images:**  Choose from our selection of replacement images or upload your own to ensure that your collections list section reflects your brand's unique style.


# Contact form

Create a custom contact form on any store page. Drag and drop blocks over each other to create a unique look.

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

## Key components

* **Purpose and usage**: Enhance the overall user experience by utilizing the contact form as a vital means of communication, accommodating inquiries, feedback, support requests, and other essential interactions.
* **Form fields and elements**: Optimize data collection by providing an in-depth overview of form fields and elements within the contact form, specifying their purposes, and guiding users on required and optional inputs.

## Configuring your section: Settings overview

* Add spacing to the top and bottom of the contact form for improved layout and aesthetics.
* Add blocks to this section to create a personalized contact form.
* Customize each block by changing its label.


# Custom code

'Custom code' empowers you to implement advanced customizations using Liquid code snippets and app integrations.

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

The section is made to allow the addition of custom elements. As such it doesn't have specific settings.


# FAQ

'FAQ' aims to provide clarity and address common queries about your products, services, and policies.

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

## Key components

* **Width options:** Choose between a standard width or a narrower layout to suit your preferences.
* **Section padding:** Customize the padding of our FAQ section to ensure optimal spacing and visual appeal.

## Configuring your section: Settings overview

* **Questions and Answers**: Add blocks to build out your FAQ section.


# Featured collection

The 'Featured collection' section allows you to highlight a specific collection of products on your store pages. This section generates blocks with links to each product page.

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

## Key components

* **Layout and design**: Select the layout that best suits your page’s design. Choose between a single-row carousel or a multi-row grid.
* **Display essentials**: Select the collection you want to present to your customers and add promo blocks to advertise and highlight current promotions or a specific product.
* **Text and call to action**: Define your section's heading and customize the main button to invite your customers to explore the rest of your collection.

## Configuring your section: Settings overview

* **Layout options**: As we mentioned above, there are two layouts:

&#x20;      \- **Grid:** Show multiple rows of products.\
&#x20;      \- **Carousel:** Show a single, scrollable, row of products.

* **Message and conveyance**: Customize the text accompanying your featured collection by setting the text alignment, overwriting the collection title, and adding a short message.
* **Button styling**: Add a compelling call-to-action button. Set its text, colors, style, and size.


# Featured product

Use the 'Featured product' section to bring a product gallery and form to your store pages.

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

## Key components

* **Product showcase**: Draw attention to a specific product that aligns with your marketing strategy or customer preferences.
* **Image layout**: Customize your product section by selecting a layout, defining the image width, and deciding on product thumbnail visibility for the carousel layout.

## Configuring your section: Settings overview

* **Section settings:** Select the product, adjust the image position and size, enable video looping, and set the top and bottom padding.
* **Blocks:** Add and customize various elements within the featured product section, like the product’s price and title, a form for purchasing, a product description, and social sharing options, each with settings for visibility and spacing.


# Icons row

The 'Icons row' section can be used to present short bursts of information to your customers. Use them in combination with predefined icons or with your own images.

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

## Key components

* **Icon selection:** Choose from a diverse range of icons to represent various features or concepts on your website.
* **Custom icon images:** You also have the option to upload custom icon images if you don't find the right icon.
* **Text and content:** Accompany each icon with descriptive text and headings to provide context and engage your audience.

## Configuring your section: Settings overview

* **Section settings:** Customize the layout and appearance of the icons row by setting the alignment, choosing background and text colors, and adjusting the top and bottom padding.
* **Blocks:** Add and configure up to 6 icon items.


# Image with text

'Image with text' is similar to the Slideshow section but it brings the text outside of the image. Add up to 6 image blocks to create a slideshow of images with text on the side.

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

## Key components

* **Image:** Choose captivating images that resonate with your brand and message. Customize separate images for desktop and mobile devices to ensure optimal viewing across different screen sizes.
* **Position and size:** Tailor the image position and size to create a balanced and aesthetically pleasing layout.
* Badges: You are now able to add multiple badges to your Image with text images.

## Configuring your section: Settings overview

* **Slideshow:** Toggle navigation arrows, choose arrows and dots color, select transition style, and toggle autoplay with adjustable slide duration.
* **Width:** Customize the section’s width by selecting between full-width or full-width padded options, controlling how the section spans across the page.
* **Height:** Adjust the height of the slideshow. Use 'Image height' to show the most of your images.
* **Image settings:** Choose the position and width of the image within the section.
* **Message and conveyance:** Add text content and configure the call-to-action.


# Logo list

This versatile section allows you to display a list of logos in an attractive and organized manner.

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

## Key components

* **Logo showcase:** Display logos of your partners, brands, or sponsors to build credibility and trust among your visitors.
* **Customizable background:** Choose a background color that complements your website's theme and enhances the visual appeal of your logo list.
* **Logo size:** Adjust the width of each logo to ensure consistency and visual harmony within the list.

## Configuring your section: Settings overview

* **Business collaborations:** Showcase collaborations with other businesses and organizations.
* **Sponsor recognition:** Acknowledge sponsors and supporters of your brand or events.
* **Affiliate marketing:** Highlight affiliated brands or products to drive engagement and conversions.
* **Maximum flexibility:** The section supports up to 25 logo blocks, allowing you to showcase a diverse range of partnerships and affiliations.
* **User-friendly interface:** The image picker and URL input make it easy to add logos and link them seamlessly.
* **Padding control:** Fine-tune the padding settings to create optimal spacing around the logo list, maintaining a clean and professional appearance.


# Mosaic

The Mosaic section is one of the signature features of the Modular theme. It creates a visually impactful grid layout that is perfect for storytelling through imagery, allowing users to showcase products, collections, or brand visuals in a collage-style presentation. This section can be customized to include various image sizes and shapes, giving your online store a unique and dynamic look.

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

## Key components

* Grid Layout: The Mosaic section displays images in a grid or collage format, making it ideal for visually engaging storytelling.
* Flexible Customization: Users can easily control the layout by adding or removing images and configuring the size and placement of each image within the grid  .
* **Image positioning:** Control the position of the image within the mosaic layout, enhancing visual appeal and composition.

{% hint style="info" %}
**Recommended image sizes:** The blocks of the section will change based on your device. With that in mind, there are no set sizes for the section or its blocks.

The best practice is to use images with the focal point in the center to avoid cropping. This ensures that the images look balanced across various screen sizes.

For retina displays, images should be created at twice the size of their block to ensure sharpness.
{% endhint %}

## Configuring your section: Settings overview

* **Overlay color:** Add an overlay color to the image for a stylish and cohesive look, matching your brand's aesthetics.
* **Text content:** Add descriptive text to accompany the image, providing context or highlighting key features.
* **Image block:** Showcase additional images with associated buttons for seamless navigation or product promotion.
* **Video block:** Embed videos with customizable overlays, creating interactive and immersive experiences for your audience.
* **Product and collection blocks:** Highlight specific products or collections directly within the mosaic layout, facilitating product discovery and sales.

### Example Use Cases:

* **Product Collages:** Feature multiple product shots in one grid for an overview of new arrivals or bestsellers.
* **Lookbooks:** Create a lifestyle grid by showcasing collections or brand stories.
* **Brand Storytelling:** Use a mix of images and text to tell your brand’s story visually, guiding users through your offerings.


# Newsletter

Create a quick and easy subscription form for your customers on any page.

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

Our newsletter section collects your customer's email address and tags them in your customer base as "Email subscribed". You can send these customers updates when integrated with an email marketing app. New subscribers will be seen as new Customers in your Shopify admin tab.

### Sending Newsletters

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

Shopify email marketing apps can be found here:

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

You can also search for them using this query:

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


# Product features

The product features section is designed to highlight the key aspects and benefits of your products, making it easier for customers to understand why they should choose your brand.

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

## Key components

* **Text and description:** Easily add headings and detailed descriptions for each feature.&#x20;
* **Images for visual impact:** Enhance the visual appeal with accompanying images for each feature. Choose the image position (left or right) for optimal layout.

## Configuring your section: Settings overview

* **Blocks alignment:** Choose between center or top alignment for text within each feature block.
* **Image aspect ratio:** Fine-tune the aspect ratio of images to ensure they display perfectly within the section.
* **Visual storytelling:** Use images and text together to create compelling narratives around each feature.
* **Engage with buttons:** Encourage action and exploration with strategically placed call-to-action buttons.
* **Add features:** Simply add new blocks to showcase additional product features.
* **Customize content:** Tailor headings, descriptions, images, and button details to fit your product specifics.


# Recently viewed products

Add a 'recently viewed products' section to your store pages. This tool allows customers to easily find items they were previously interested in, enhancing their shopping experience and improving conversion rates.

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

This section can be added to any page and works automatically as users visit different product pages. To ensure consistency, it takes the same grid style and options as the collection pages. You can find and set these options in the Theme Settings tab.


# Rich text

Create visually appealing and engaging content to captivate your audience.&#x20;

<figure><img src="/files/05X2vTOxylnuXfXjiNOh" alt=""><figcaption></figcaption></figure>

Build out your rich text section using different blocks. You can also use this section as an intro to other sections. Place the section above another to build a seamless look:

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


# Social gallery section

Social Gallery helps you showcase social media content directly in your store, creating an engaging and authentic shopping experience. Display images and videos from your community, brand ambassadors, or customers to highlight your products in real-world settings.

Use it to feature user-generated content, promote your social presence, and inspire shoppers with authentic product experiences. Perfect for homepages, landing pages, and campaign-focused content.

Gallery items can be linked to products, collections, or pages, making it easy for customers to explore and shop the content that inspires them.

<figure><img src="/files/NhAYt4GAZBobF3C1rqDG" alt="A gif showing how the social gallery section looks and functions by sliding slowly from left to right"><figcaption><p><strong>Social gallery section overview</strong></p></figcaption></figure>


# Shop the look

Shop the Look combines imagery and products to help shoppers discover and purchase the items featured in your grouped looks.

Use it to showcase a lifestyle image alongside a selection of products, making it easy for customers to shop the featured collection. Perfect for landing pages, lookbooks, seasonal campaigns, and promotional content.

Products can be displayed next to the image, allowing shoppers to quickly view details and navigate directly to the items featured in the section.

<figure><img src="/files/aCJvlg1y0kkK508UAo69" alt="Example of the Shop the look section from our Companion demo store"><figcaption><p><strong>Shop the look section overview</strong></p></figcaption></figure>


# Hero

The Hero section is designed to showcase and promote your collections, products or pages. It features a large banner image as the focal point, accompanied by a variety of content blocks. These include standard text blocks for informational content, image blocks that can be layered over the main banner image for added visual interest, and badge blocks displayed at the bottom to highlight key features, promotions, or selling points.

<figure><img src="/files/9LqRxxHFf8yPlu6nzD8f" alt="Showcase of the hero section and badge blocks"><figcaption></figcaption></figure>

The section features nested blocks which gives greater customizability when designing your banner.&#x20;

<figure><img src="/files/SG60RnbH4SivLPIhXQKU" alt="Image Showcasing the section nested blocks"><figcaption></figcaption></figure>


# Slideshow

This is the perfect hero section for most stores. Use the slideshow to create a home page banner with incredible customizability.

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

## Key components

* **Layout:** Choose from various height options such as full-screen, fixed heights, or custom sizes to suit your design needs.
* **Arrows:** Enable or disable navigation arrows for seamless browsing through slides.
* **Autoplay:** Engage your audience with an autoplay feature that transitions slides at customizable intervals.
* **Styles:** Select from slide, fade, or zoom-out transitions for captivating visual effects.
* Badges: You are now able to add multiple badges to your Slideshow images.

## Configuring your section: Settings overview

* **Heights:** Customize slide heights specifically for mobile devices to ensure optimal viewing experiences.
* **Image:** Add desktop and mobile-specific images for each slide to optimize visual appeal across devices.
* **Content alignment:** Align slide content as per your preference, whether centered, left, right, or bottom-aligned.
* **Color and overlay:** Enhance visuals with customizable overlay colors and opacity for added depth and style.
* **Buttons:** Drive conversions with customizable buttons, directing users to specific pages or actions.


# Highlights

This section gives you the option to highlight links in your store with the image and button blocks. The multiple settings options give the freedom of customizing the section in many ways.

<figure><img src="/files/GKfkFuTxePU5UrxmTjoX" alt="Two highlight images and four highlight buttons leading to links in the shop"><figcaption></figcaption></figure>


# Jumbo button

This section gives the option to add a big full-width button, which has different settings for design customizations.

The section can be used to build a separation between your content. Use it on the homepage, product pages, blogs, and other pages.

<figure><img src="/files/onB2XzIkdtirNLwoqnUz" alt="Big full width button saying &#x27;Find your new cleaning ritual&#x27; "><figcaption></figcaption></figure>


# Split content

Our split content section allows you to craft visually captivating product pages. This streamlined format emphasizes the unique selling points of your products.

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

## **Key components**

* **Blocks:** Utilize up to four blocks within the section to craft your product presentation. Each block can consist of text and/or image elements, allowing you to create versatile layouts that showcase your products in the best possible light.
* **Mobile-friendly design:** Tailor the display of your content for mobile devices with the option to choose between accordion headers.&#x20;
* **Button:** Easily incorporate call-to-action buttons within your content blocks to encourage further engagement from your customers.&#x20;


# Split hero

Split hero section, is a powerful tool to create captivating and immersive experiences on your website. This versatile section combines stunning visuals with engaging content, allowing you to showcase your brand, products, or services in a unique and impactful way.&#x20;

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

## **Key components**

* **Section height:** Choose from various height options to create a visually pleasing layout that suits your content and design preferences.
* **Image alignment:** Position images on the left or right side for balanced and harmonious visual storytelling.
* **Content alignment:** Align text and buttons to complement your images and maintain a cohesive design aesthetic.
* **Subheading and heading:** Craft compelling headlines to grab attention and convey your message effectively.


# Text columns with images

Display multiple columns with text and image content

Text Columns with Images lets you present key information in a clean, structured layout that combines visual content with supporting text. Each column can include an image alongside headings, text, and optional buttons, making it easy to communicate multiple ideas side by side.

Each column can be linked to relevant products, collections, or pages, helping customers move seamlessly from information to action. Perfect for homepage sections, landing pages, and promotional content.

<figure><img src="/files/hwFjRdKtRMbB9BxdDtXc" alt="An example of the text columns with images section from one of our demo stores"><figcaption><p><strong>Text columns with images section overview</strong></p></figcaption></figure>


# Testimonials

Testimonials section, you can effortlessly showcase glowing reviews and testimonials, fostering trust and encouraging conversions.

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

## Key components

* **Heading:** Tailor the heading of your testimonials section to suit your brand's style with customizable options for position and alignment.&#x20;
* **Text alignment:** Ensure that your testimonials are presented exactly as you envision by customizing the text alignment and opting to hide quotes if desired.


# Video

Add a video to your store pages that will autoplay as a background over text.

<figure><img src="/files/o4R66nj6mzm44LFlmD0v" alt=""><figcaption><p>Add a video link and set the text and overlay for this section.</p></figcaption></figure>


# Recommended Image Sizes

Image Size Recommendations in Modular

Here we will cover recommended image sizes you can use within various Modular sections. These include the slideshow section, collection banners, blog post featured images, logo, product images, and product feature section images.

{% hint style="success" %}
**The key** across all image sections is to keep the focal point of the image in the center. For example, if you're adding text or graphics on top of the image they can easily be cropped out of view.
{% endhint %}

## Logo Images

We recommend using logo images at a width of around 440px.

The maximum logo height applied is 100px therefore it is ideal to have a logo with a height around this size or lower.

## Popup Images

For our Popup section, we recommend using an image with at least 600 pixels in its lower dimension. The default aspect ratio here is 8 by 7.

In pixels that should translate to 690 by 600 pixels or 1380 by 1200 pixels if you're looking to create a **retina** image.

{% hint style="success" %}
A **retina image** is an image twice as big as its block or recommended size. This ensures that the final image is sharp even if rendered on an unusually bigger device.

There are also **triple retina images** which are three times the recommended size.
{% endhint %}


# Product Images

We recommend using images at a ratio of one to one and sizes around 1024 by 1024 pixels or smaller images of about 600 by 600 pixels.

{% hint style="info" %}
Using higher resolution images will make them sharper but slow down your load times
{% endhint %}

Modular also provides options to specify the image size on product pages.

![The setting provides an option to have large, small, or medium images on the product page.](/files/-MlGLpge42pfUxOXHhnv)


# Blog Images

## Aspect Ratio

### Aspect Ratio 1 to 1

This is the standard setting that works well with square-shaped images. We recommend this square ratio because the images will be cropped square on the blog overview page and they'll display in their uploaded ratio on the individual blog post page.

![](/files/-MlGO8H0FqLBilbTiRU4)

### Aspect Ratio 1.5 to 1

This ratio will result in taller images or portrait images.

![](/files/-MlGOYfIcwJ8yQvOfld2)

### Aspect Ratio 0.5 to 1

This ratio can be used to display wider images. We recommend it for landscape images.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-legacy-files/o/assets%2F-MhyVwxmMUUW9VvN1qbw%2F-MlGGqYw7EALkF84rXB4%2F-MlGP5iiYStwVbPdeJ1S%2Fonehalf-to-one.jpg?alt=media&token=b61fa9ed-0a69-4dcf-bda6-e8381ff754e5>" %}


# Slideshow Section Images

The Slideshow section allows you to specify desktop and mobile images as well as specify the slide height.

### Image width

**Desktop:** We recommend using images 1920px in width.

**Mobile:** We recommend using images 1080px in width.

{% hint style="warning" %}
**Remember:** Mobile devices are tall. You need to use an image that has a bigger height than it does width in order to fill the vertical aspect ratio.
{% endhint %}

### image height

Modular provides an option to specify various slide height sizes: Full Screen Height, Image Height, 750px, 650px, 550px,450px.

**Static sizes:** If you want to use a static slide height (750px, 650px, 550px, or 450px), make sure your image height is around that size.&#x20;

For example, if you'd like to use a slide image height of 750px, you'll want to save your image around this same size. This will prevent image cropping both towards the top and bottom. This applies to the other slide height sizes (650px, 550px, and 450px).

{% hint style="info" %}
**Note:** Because these settings keep the height static across all devices, the width will change. Your images may be cut off from the side so make sure that the focal point is in the center.
{% endhint %}

**Full-screen height:** This option will fit the images to the entire height of the browser window. This option is recommended for images with medium height sizes and not for images with large height sizes, as these will be cropped at the bottom of the image.

**Image height:** Setting this option will have the images displayed in the original height as uploaded. This option is quite useful if you want to have the full image displayed as there will be no cropping of the images.

For the best result on mobile view, we recommend using images that have a taller, or square, aspect ratio. Anything from 600px by 600px to 1200px by 600px (that's height to width) would fit the mobile aspect ratio the best.

{% hint style="info" %}
**Note:** It's important to use equal-sized images in terms of height for this option to maintain consistency in the slide height as the slideshow advances.
{% endhint %}


# Catalog Banner Images

This is the page with the "/collections/all" URL that lists all of the visible products in the store. By default, products on the catalog page are shown in alphabetic order.&#x20;

Modular provides an option to specify this image within the Image with Title section settings.

![](/files/-MlGQ4btga-XVzJ2s0ZI)

We recommend using image sizes around 1400px in width.

Modular provides you with options to specify the banner height. These include: Full Screen, Image Height, 750px, 650px, 550px.

These options are applied the same as with the slideshow section images definitions discussed above.


# Product Feature Images

## Aspect Ratio

### Aspect Ratio 1 to 1

This is the standard (and recommended) setting that works well with square-shaped images.

![](/files/-MlGSvLgrNvLBLZGdVFw)

### Aspect Ratio 0.5 to 1

This ratio will display wider images.

![](/files/-MlGTIwRC6xou5TX_Gkt)

### Aspect Ratio 1.5 to 1

This ratio will display images in a portrait format.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-legacy-files/o/assets%2F-MhyVwxmMUUW9VvN1qbw%2F-MlGGqYw7EALkF84rXB4%2F-MlGTdWczRTFfSuzVU4d%2Fpfs-onefive-to-one.jpg?alt=media&token=461085d5-7a62-4a9a-9069-bce037afc3a4>" %}


# Theme settings


# How to make changes

Global theme settings that can affect all pages

The 'Theme settings' tab is located under all sections in the theme editor. This tab contains a bundle of all global settings in Modular.

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

{% hint style="info" %}
Please note that global settings can affect multiple sections and multiple pages.
{% endhint %}


# Colors

Set the most widely used colors for your store here. We start with background colors (for sections and badges), text colors, and an accent (error) color.

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

{% hint style="success" %}
For the best overall design and flow, we recommend using two or three main colors. Use high-contrast colors to highlight accents or badges.
{% endhint %}

### Contrast

Be sure to use a contrast checker and ensure that your pages give out a readable layout.

{% embed url="<https://webaim.org/resources/contrastchecker/>" %}


# Typography

Typography allows you to set a different font for general elements across your store. We kick things off with arguably the most important bits of text, your headings, and body text:

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

You can choose from predetermined font stacks, this is all coming from the Shopify core code and is not theme specific.

{% hint style="info" %}
If you're having issues with any of the fonts, it's recommended that you reach out to Shopify support.
{% endhint %}

It's also possible to use fonts outside of the predetermined Shopify font stack. To learn more about this process you can check out our custom fonts post:

{% content-ref url="/pages/YJnHe9PV7pawByBnXMiH" %}
[How to add custom fonts](/custom/custom/how-to-add-custom-fonts)
{% endcontent-ref %}


# Buttons

Set the font and color for the different button styles in your store.

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

### Button types

There are two main button types in Modular. Almost all sections that use buttons present the option to choose which one to use. Here is where you can set a color for these two styles.

{% hint style="success" %}
Be mindful to use a color that is high in contrast with the text color to make text easier to read.
{% endhint %}


# Appearance

### Accent line, mobile menu and animations

A few distinctive styles can be created using Modular, and they all begin with the main appearance variables.

<figure><img src="/files/64gt7Agjef1aoiMf1wX3" alt=""><figcaption></figcaption></figure>

Here you can find an option to toggle different animations if you want that extra bump in speed. You can also set a few button features.

### Pagination and slideshow

Pagination is a must in Modular. Product loops in Shopify are limited to 50 products, so pagination is the way to get around this.

The main thing to note about our 'infinity scroll' feature is that if it's disabled, pages with multiple items will be 'paginated' into smaller pages.

### Show rounded corners

With this setting, you can show rounded corners on images and boxed components for your whole theme.

<figure><img src="/files/BPqINLgajBqkkeBMSv6i" alt="The following image shows an example of the mosaic section with rounded corners enabled around the images. The image is taken from our companion demo store."><figcaption><p>Example of the mosaic section with rounded corners enabled around the images</p></figcaption></figure>


# Search

### Header search and overlay

The search options in Modular allow you to toggle the search icon and search suggestions. You can also set and change the color for the overlay that comes over the page when the search bar is sown.

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

{% hint style="info" %}
The types of search results are no longer hosted on a theme level.

To set the type of results you want you need to install the free Shopify Search & Discovery app.
{% endhint %}

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


# Product grid

Your product and collection pages are a crucial part of your store. The product grid tab has global settings that affect both of those page types.

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

Most notably, you can change the aspect ratio for your product grid to make the blocks wider, taller, or square (1:1)

You can set the image to stretch across the block or to render itself in full inside of it. The latter can result in extra white spaces while the former could cut parts off. The most important thing here is to set the proper aspect ratio.

Another great option tucked away under this tab is the 'products per row'. This is split into two different settings, one for mobile and one for desktop.

A recent addition to the Product Grid settings is the "Display price" option, which allows prices to be shown on the Quick Add and Add to Cart buttons.

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

{% hint style="info" %}
Remember, these are ***global settings*** so they will affect all pages.

\
To give an example, your collection page grid is linked to these settings and so is your featured collection section on the home page.
{% endhint %}


# Product form

### Product form

Color swatches can be toggled here too. This feature can often require additional work to be fully set up. Modular can recognize a few custom color names but not all.

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

We highly recommend checking out our full-length post on the topic of color swatches.

{% content-ref url="/pages/-MksKwKf0ScyRIBzLdPg" %}
[How to add custom color swatches](/custom/custom/custom-color-swatches)
{% endcontent-ref %}

### Quick view and media

Quick view is a desktop-only feature. It works based on a mouse (and touchpad) event called 'hover'. This event is present on touch-based devices (at this time).


# Cart

### The cart popover

In Modular, the cart popover is an AJAX cart solution. We build a dynamically generated cart without refreshing the page which allows for the flow to remain constant and uninterrupted.

This extends to the functionality of the 'add to cart' button to also update the Shopify cart object without having to refresh the page.

A lot of apps might not work with AJAX carts so if you are experiencing trouble integrating app code into the cart consider changing the 'cart type' to a 'page'.

### Cart icon style and tax text

The 'cart' icon can not show the number of items in the cart but the 'circle' icon can.

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

### Terms and conditions and free shipping message

You can change the label for this checkbox but please note that enabling this option will disable the 'buy it now' buttons.

{% hint style="info" %}
The reason for this is that their main function is to skip the cart page. If your customers must agree with the terms of your store, skipping the cart shouldn't be done.
{% endhint %}

A good question is why not add this to the checkout page but the scope of a theme stops at the cart page? As third-party theme developers, we do not have access to the Shopify core code and our theme does not have access to the checkout page template.


# Breadcrumbs

Breadcrumbs, located on the collection and product pages, help users navigate through your products. They are generated automatically depending on the path your customers take through the store.

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


# Favicon

### Favicon image

The favicon is a small icon you see in the browser tab next to the page title. This is a good place where you can add your logo to build your brand consistency.

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


# Subheading badge style

The Subheading Badge Style option transforms subheadings throughout the theme into badge-style labels with a colored background, helping them stand out and draw attention to key content.

Use it to add visual emphasis to section subheadings, highlight important messages, and create a more distinctive design across your store. The badge styling is applied consistently throughout the theme, making it easy to update the look and feel of your content with a single setting.

This option is ideal for merchants looking to create a stronger visual hierarchy and a more modern, attention-grabbing storefront.

<figure><img src="/files/D4zlgqN6vP0Vor3tj5ie" alt="Example of the badge style subheadings with &#x22;Choose your base&#x22; text as a subheading"><figcaption><p><strong>Example of the badge style subheadings with "Choose your base" text as a subheading</strong></p></figcaption></figure>

This option can be found under the typography tab.

<figure><img src="/files/Y7g4FVdK4vM9M8NowJmv" alt="A gif showing how to enable the badge style from the theme customizer"><figcaption></figcaption></figure>

The badge style can be changed by selecting a different button style.

<figure><img src="/files/wgIlntYOd7qdufJWw2rM" alt="A gif showcasing how the subheading badge looks when different button styles are applied"><figcaption></figcaption></figure>


# Social media

### Social links

Social links are mainly displayed in the footer. They open in a new tab to keep customers from bouncing off of your page.

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


# Currency format

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


# Checkout

A very important note to make is that these settings are purely visual and aesthetic. Modular does not have any options to change the functionality of your checkout page.

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

The checkout page is generated entirely from the Shopify core code so for any issues, at checkout we highly recommend reaching out to Shopify support.

{% embed url="<https://help.shopify.com/en>" %}

{% hint style="success" %}
The options here are predetermined and similar to most other themes.
{% endhint %}


# Custom CSS

Custom CSS is a new block added by Shopify for all themes. Use it to add your own CSS without the need to access the theme code.

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


# Announcement bar section

Announcement bar settings and layout

Click on the a*nnouncement bar* section to reveal the section settings.

<figure><img src="/files/667tVFcopUXjyAA4UUwy" alt=""><figcaption></figcaption></figure>

These settings will allow you to:

* Enable the announcement bar on desktop and mobile separately.
* Change the text of the announcement itself.
* Add a link to your announcement bar. If the 'link' field is left empty, no link is applied.
* Change the background and text colors of your announcement bar section.


# Header


# Transparent header

Change the opacity to blend the header with a background image (or video)

### Where you can use the transparent header.

Modular can display a transparent header on the homepage, collection pages, and any customized pages that include a fullwidth background image (or video) section.

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

When using a transparent header, you may include a second logo to provide contrast with your main homepage asset.

### How to enable the transparent header.

To enable the transparent header you will need to first open the header section settings. From here, simply check the 'enable transparent header' checkbox and save the changes.

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


# Logo

### How to upload a logo for your header.

You can upload a logo in place of your store name by opening the header section settings and uploading a custom logo:

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

### How to upload a logo for your transparent header.

A separate option is available to help provide better contrast when transparency is used. This is an optional but helpful feature.&#x20;

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


# Mega menu

Setting up a mega menu for your header

A mega menu is a stylized submenu that allows you to also add an image and highlight a portion of your navigation. It can be used to put more links together and group them in a form of subcategories.

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

The mega menu feature in our Modular theme is automated, meaning that there aren't settings in the theme editor to enable or disable it. Instead, you'll need to create a navigation menu (link list) from your Shopify admin that has third-level drop-downs. There is a great article for settings this up by Shopify that goes into amazing detail about the process of creating drop-down menus:

{% embed url="<https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus>" %}

Once you have set up your navigation menu, you need to make sure that the header section is using it. You can do so by opening your header section settings and checking which menu is being rendered.

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

Lastly, the mega menu feature will also allow you to add an image to the expanded state. You can also add a link and a title to it if you want to use it as a call to action.

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

If you have any questions that were not answered above, please refer to the FAQ section below. If you don't find your question in the FAQ section, please feel free to contact our support: **<support@presidiocreative.com>**

## Frequently asked questions about our mega menu

### Can I have more than four columns?

The mega menu columns resize automatically depending on how many second-level links there are. Setting up more than four columns is possible but they will break into a new line. This is done automatically to prevent your store from getting too cramped.

### Can I have more than one mega menu?

Yes, you can set up more than just a single mega menu by creating multiple submenus with third-level links. However, if you're using the mega menu image, it will be repeated across all mega menus.&#x20;


# Footer


# Blocks and settings

The footer in Modular has a lot of customizable elements in the form of section blocks. You can add in blocks by clicking the small arrow icon next to the footer section then clicking the 'add block' buttons:

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

{% hint style="info" %}
While there are a good number of different blocks, you can only use five blocks here. Be sure to use the ones you need the most.
{% endhint %}

### Footer section settings

Other than the individual blocks, the footer section also has a number of settings itself. You can set the background and text color for this section individually.

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

There is also the option to show payment icons, currency and language selectors, as well as a short menu in the bottom bar.

{% hint style="info" %}
Note: There is no option to remove the 'powered by Shopify' text in the section settings.\
\
To remove it, please check out our [next post](/faq/frequently-asked-questions/footer-copyright).
{% endhint %}


# Logo

The logo block allows you to add an image (logo) and set its size. The image can be linked through a dynamic source to be shown differently on some pages (product pages, collection pages)

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

There is also the option to show or hide this block from your mobile view.


# Logo (full width)

The block allows adding a full-width image (logo) to the footer. The block has settings for the image alignment, width, padding, and dynamic source image.

<figure><img src="/files/n4TUy5nUFpYO2pxTBlqO" alt="Full width logo image in the footer"><figcaption></figcaption></figure>


# Menu

The menu block allows you to add a navigation menu. You have the option to add a heading as a title for the block.

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

{% hint style="info" %}
Note: The navigation menu here is different from the header. It can not show dropdown items.

Only first-level links will be displayed.
{% endhint %}


# Text

A text block does as a text block sounds. You can add a short message with a heading to give information about your brand or current promotions.

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


# Newsletter

A newsletter block comes with an automatic newsletter subscription box. There are also settings to add a heading and text.

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

{% hint style="info" %}
Note: The newsletter blocks in Modular can only create a new customer in your Shopify admin with the qualities of a subscriber (agreed to receive marketing emails).\
If you want to create more custom and more detailed mailing lists we highly recommend using third-party apps to manage them.
{% endhint %}


# Product pages

Settings and layout options for product pages

The new product page template in our Modular theme is built from the ground up with the new features introduced in online store 2.0 in mind. The use of JSON templates allows for dynamic sections to be used to truly customize your product pages to your style.

Accessing the product pages can be done by opening your theme editor and clicking on products. This will show all of the available product pages in the specific theme copy you are editing.

<figure><img src="/files/OQlRSBiq8CidtaLtT4EE" alt=""><figcaption><p>More product page templates can be created from the same menu.</p></figcaption></figure>

A big part of the settings can be accessed from the section blocks. They can also be moved around if you're looking to customize the look. You can move blocks the same way can sections. Each block has six small dots that you can click and hold to drag and drop them between one another.

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


# Pre-order

Replace the 'add to cart' button with a 'pre-order' button

Modular uses product tags for creating pre-order products. When you define a pre-order tag, you can easily convert the 'add to cart' button to a 'pre-order' button.

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

## How to setup

Setting up a **pre-order** tag is very simple and can be done right in your Shopify admin.

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


# Product ratings

Display options for product reviews app in Modular

Modular has built-in support for Shopify's product reviews app. Star ratings can be shown throughout the theme.

#### **Product detail page**

Star and average rating value next to product name:

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

Individual reviews and forms to add a new review can be shown below the product description:

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

**Collection page and product grid sections**

Stars can be shown above product name and price:

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

The option to enable this can be found in the collection pages section under the theme settings tab.

## How to setup

Modular includes quick and easy settings in the theme editor to display ratings. The main requirement is that you have the Shopify reviews app installed:

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

If you don't have the app installed, use this link to download it.

{% embed url="<https://apps.shopify.com/product-reviews>" %}

### Theme editor settings

For the product detail page, you can easily add the rating value, star, and the number of ratings from the price and title block under the 'product page' section:

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

There are checkboxes for the following:

* **Show star rating** - Adds a star icon next to the rating number.
* **Show rating count** - Displays the number of reviews for the current product.


# Creating new product page templates

Creating new JSON templates for your products

{% hint style="success" %}
When creating new JSON templates, you need to have at least one template to use as a base. The new Shopify theme editor is powerful and can create new templates without you ever needing to go into the theme code.
{% endhint %}

### Where do we start?

To create a new product template you need to click on the top drop-down menu and select the product tab. From here, click on 'create template' after which give your new template a name, and choose a template to base it on.

![The name you choose is up to you](/files/-Mk2S8ZSBG_IGVRvIi56)

### Where do the new templates go?

After the new template is created, you will find it under the same product tab in the drop-down menu. You will be able to set up each product page individually and create truly unique pages using this method.

![](/files/-Mk2TetgOxnap3AtAreI)

### How do we apply them to the live store?

Finally, after your product page is ready and customized all that's left to do is assign it to the product it was meant for. You can do this by going into your admin panel and clicking on products. After you locate the product you're looking for, simply scroll down to the 'theme template' tab and select the appropriate page template.

![](/files/-Mk2TzEC0DcoIYhDzYX6)

{% hint style="success" %}
**Note:** You can only select the templates of your live theme. Make sure to publish your copy of Modular so that you can assign the new product page template.
{% endhint %}


# Blocks


# Price and title

An essential block with a few extra options.

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

{% hint style="info" %}
To accurately represent your product reviews and ratings you need to use a review management app.
{% endhint %}


# Buy Buttons

The **Buy buttons** block allows customers with the ability to add products to their cart, adjust quantity, and, if enabled, use dynamic checkout options like *Apple Pay* or *Google Pay*. It's the final interaction point before purchase and a crucial part of the product page

> Only one Buy Buttons block is allowed per section (`limit: 1`).

<figure><img src="/files/p5D63Ai8sD5uP2SFzCN4" alt="Image showcasing the buy buttons block of the product pages section"><figcaption></figcaption></figure>

To add the price in the "Add to Cart" button you need to enable the option called "Display price" in the [Product grid Theme settings](/theme-settings/theme-settings/product-grid).

{% hint style="info" %}
The quantity picker option is also controlled by the "buy buttons" block.
{% endhint %}


# Accordion

Allows you to organize and present additional product information in a collapsible, space-saving format. Ideal for including specifications, materials, policies, or size charts without overwhelming the page visually.

<figure><img src="/files/duzRoPz4B6ofAS4IbyGd" alt="Image showcasing the accordion block of the product pages section"><figcaption></figcaption></figure>


# Icon

The Icon block highlights product features or benefits using visual icons, optional images, and supporting text. Ideal for building trust and conveying quick information.

<figure><img src="/files/qGHB9fU9HCxbK8CqBWGy" alt="Image showcasing the icon block of the product pages section"><figcaption></figcaption></figure>

You can have your icons stacked underneath each other or side-by-side as displayed in our example.

{% hint style="info" %}
Tip: To display them side-by-side use the block's "half" width setting.
{% endhint %}


# Product description

A simple way to integrate your product description into the product pages section with an extra spacing option.

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


# Social share

Include quick share buttons right on your product pages.

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


# Store availability

Store availability (or local pick-up) is a core Shopify feature. Learn more about how to set up pick-up for online orders at the link below:

{% embed url="<https://help.shopify.com/en/manual/fulfillment/setup/delivery-methods/pickup-in-store>" %}


# Collection pages

Collection and product grid settings and configuration options

The new collection page template introduces infinite customization options that you never knew you needed!&#x20;

Click on collection products to view settings for collection pages:

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

### Theme settings

Expand the theme settings panel to view additional settings related to the product grid:

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

### Product grid

Use the product grid options to customize how many products per row are displayed on desktop and mobile. You can also configure how many products per page are shown before pagination is displayed.

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


# Creating more collection page templates

Creating new JSON templates for your collections

{% hint style="success" %}
When creating new JSON templates, you need to have at least one template to use as a base. The new Shopify theme editor is powerful and can create new templates without you ever needing to go into the theme code.
{% endhint %}

### Where do we start?

To create a new collection page template you need to click on the top drop-down menu and select the collections tab. From here, click on 'create template' after which give your new template a name, and choose a template to base it on.

![](/files/-Mk2c66pk_5-beOrSK08)

### Where do the new templates go?

After the new template is created, you will find it under the same collections tab in the drop-down menu. You will be able to set up each collection page template individually and create truly unique pages using this method.

![](/files/-Mk2cVVH0XImLyEmQf58)

### How do we apply them to the live store?

Finally, after your collection page template is ready and customized all that's left to do is assign it to the collection it was meant for. You can do this by going into your admin panel and clicking on products > collections. After you locate the collection you're looking for, simply scroll down to the 'theme template' tab and select the appropriate page template.

![](/files/-Mk2d6zbKAsVJdbqYpuG)


# Customizing the collection list page

In Modular you have the option to select between two states of the collections list gird. You can either have all collections shown (in alphabetical order) or only have a few selected collections (in your own order).

To switch between them, you can use the radio buttons labeled 'select collections to show':

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

### All collections

The 'all' setting will show all collections in alphabetical order

### Selected collections

The 'selected' option will show all collections that you've added as blocks for the section. To add blocks to this section, you need to click on the small arrow next to the 'collections list' section and click on 'add collection':

![](/files/X5wXb2fb2AOFl1VOJGTq)

You can also set a replacement image for each individual block:

![](/files/8yIWnFFXQcsErEZwsozL)


# Cutline

This feature gives you the option to add a small, unique descriptive text below the product title.&#x20;

<figure><img src="/files/1naMJfpKSGd5vIohLvtv" alt="Representation of the cutline feature &#x22;Clean, off duty style&#x22; below the product title of a product named Ball Cap"><figcaption></figcaption></figure>

### Set up the metafield definition

To set up a cutline, you need to create a new, custom metafield definition that Modular can recognize.

{% hint style="info" %}
The most important part is to use this namespace and key: `theme.cutline`
{% endhint %}

To start, navigate to your **Shopify admin -> Settings** and choose **Metafields and metaobjects** from the left panel. Next, click on **Products.**

Click the **Add definition** button to begin. Choose a name, we'll use '`cutline`'. Next, we will use a custom namespace. This is **required**.

A crucial step here is to change the **default namespace** (usually called '*custom*') to **`theme` :**

Add a description *(this is optional),* then **Select type**. Next, choose **Single line text** *(it's the default option):*

{% hint style="success" %}
Don't forget to **save** your changes.
{% endhint %}

#### Product setup <a href="#product-setup" id="product-setup"></a>

Now that our custom metafield has been defined, the final step is to edit any of your products in the **Shopify admin -> Products** and update the new `cutline` metafield.

All you need to do is scroll to the bottom of the product setup page and fill them in:

Don't forget to **save** your product and preview it on any product grid view, such as a collection page.


# Badges - metafields

Add badges or 'stickers' to your individual products

Badges, small yet powerful symbols, convey a wealth of information in a concise and visually captivating manner.&#x20;

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

## How to create custom badges

### Creating a new definition

Custom badges are easy to create and all done in your Shopify admin. The first step is to define a custom metafield that Modular can recognize.

Start in your Shopify admin -> settings and choose custom data from the left panel and then click on products *(click on the images to zoom)*:

<div><figure><img src="/files/6257mVcnr1RFdvKjFOoF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tnylF83v5cZwaoQXoCwS" alt=""><figcaption></figcaption></figure></div>

Click the add definition button to begin. Choose a name, we'll use 'badge'. Next, we will use a custom namespace. This is **required** for custom badges.

A crucial step here is to change the default namespace (usually called '*custom*') to ***`theme`***

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

Add a description and choose select content type. Choose **text**, then select single line text (it's the default choice):

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

{% hint style="success" %}
Don't forget to save your new product metafield.
{% endhint %}

### Product setup&#x20;

The next and final step is to edit any of your products in the Shopify admin -> products and update the new badge metafield.&#x20;

Scroll to the bottom of the product setup page:

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

**Save** your product and preview it on your collection pages:

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


# Badges

Add badges or 'stickers' to your individual products.

Badges, small yet powerful symbols, convey a wealth of information in a concise and visually captivating manner.

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

## How to create custom badges

### Product setup

Custom product badges are simple to create and use a native Shopify feature - product tags.

Simply go into your Shopify admin page and click on the Products tab. Here, locate the product you're looking to add a custom badge for and add a tag starting with `_badge_`&#x20;

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

The part after this unique identifier will be used by Modular automatically and displayed as the badge text.

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


# Page templates

Modular includes ready-to-use page templates for your store including:

* About
* Contact
* FAQ
* Default page

These templates make it easy for you to quickly add content and build out pages that add value to your customer experience and company branding.&#x20;

## How to use page templates

### Creating a page

Pages are created in your Shopify admin under pages. Choose add page to create a new page:

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

Give your page a title (required), the content is optional. Next, choose a theme template to be used, also known as page template:

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

### Customizing pages

Using the theme editor, you can customize the template that's been assigned to your page:

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

You can start customizing the page with the pre-defined sections included in Modular. You can hide, reorder, remove sections that are included, and also add any new selection from Modular's list of over 25+ sections.&#x20;

Learn more about using sections and blocks in Modular:

{% content-ref url="/pages/91gAjGNYkv3RWmaCLxST" %}
[Modular sections](/sections/modular-sections)
{% endcontent-ref %}

## Creating a new page template

From the top drop-down menu select pages and click on create template. Give your new template a name and a template to base it on. This will make it so that there are one or two sections predefined but they can be removed or hidden later.

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


# Blog pages

Blog pages are meant to be a simple assortment of articles but who's to say you shouldn't customize them?

### Layout and settings

The blog pages section holds a handful of settings but they can be quite important. These settings can be accessed by first navigating to the blog page you're looking to edit.

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

Modular displays a rich grid of all your blog post articles. Click on **blog pages** to configure the layout of your blog index page.

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


# Creating new blog page templates

### Creating the new template

Start by opening the theme editor and clicking on the blogs tab in the top drop-down menu. From here, click on 'create template'.

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

### Editing the new template

Find your new template by going into the same blogs tab in the top drop-down menu and select the template you just created. You are now able to add sections to it without affecting any other blog template.

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

### Assigning the new template to your blog

The last step is to assign the new template to one of your blogs so that it can take the new style you've created. This is done by going into your Online store > Blog posts and clicking on manage blogs. Once you've found the blog you're looking to change, simply change the template name from the 'theme template' tab.

<figure><img src="/files/13DGXdpqc6YGoivfFqjT" alt=""><figcaption></figcaption></figure>


# Popup section

The popup section in Modular can be used as a newsletter popup or as a sales promotion tool to display custom messages and promo codes based on where the customer arrives from, is viewing, and how they are interacting with your site.&#x20;

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

### Popup behaviour

Popups can appear based on time and reappear after a certain period. Some of the popup options include:

* Show immediately
* Show after up to 60 seconds after the page load
* Never reappear
* Appear after 1, 2, or 3 weeks

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

### Test mode

After a user has closed down the popup it will not reappear again until a certain amount of time. This is also true for you as an admin. Test mode allows for the popup to be rendered on any page after reloading no matter how many times it's closed.

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

{% hint style="info" %}
Popups will not be shown on mobile devices due to [Google’s mobile-friendly requirements](https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html).
{% endhint %}

{% embed url="<https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html>" %}


# Theme license

Key licensing information about Modular

## Please ensure you have a valid license to use Modular

Here are some helpful tips about understanding theme licensing with Shopify.&#x20;

### Understanding theme licensing

{% hint style="info" %}

* Your version of Modular must be purchased directly from the Shopify Theme Store.
* Each store you operate must have a separate license to use Modular.&#x20;
  {% endhint %}

The Shopify Theme Store is the only legitimate channel to acquire themes that are guaranteed to comply with Shopify’s terms.&#x20;

{% hint style="danger" %}
Unfortunately, according to Shopify's policies, themes purchased through third-party marketplaces like Fiverr, eBay, Etsy, Creative Market, Template Monster, or a development agency are not valid purchases.&#x20;
{% endhint %}

### Transferring a theme license from one store to another

It is important to note that each Shopify store you have requires a valid theme license per Shopify's Terms of Service. In other words, you can only use a theme purchase on a single store. You may transfer a theme license from one store to another only if you have closed the store using your current theme license.

To transfer a theme license, contact Shopify Support's billing department directly and ask for help.&#x20;

Since all theme purchases go through the Shopify Theme Store (and not from us), we cannot transfer theme licenses on our end. Note, however, that we actively monitor theme licenses and verify proper licensing of themes while providing support, so you must be using a licensed theme on your store before we can provide support, or you can download the latest version of your theme.

### Action steps if you have an unlicensed theme

If your theme was set up by an agency, designer, or developer, you might not have been aware of the licensing issue. It’s a good practice to check with the agency and ensure they have secured a proper license. If that doesn’t resolve the issue, you may need to purchase the license or opt for a different theme.&#x20;

{% hint style="info" %}
A valid license can be acquired simply by purchasing the [Modular theme from the Shopify Theme Store](https://themes.shopify.com/themes/modular/styles/mayfair).&#x20;
{% endhint %}

### Authenticity

You can refer [here](https://www.shopify.com/legal/terms#:~:text=messages%20are%20received.-,9.4%20Theme%20Store,-Which%20means) to the official Shopify Terms of Service that outlines theme licensing policies and intellectual property rights, specifically the '***one theme, one store***' policy.

### Benefits of a valid license

Purchasing a valid theme license ensures you have free benefits from us, including:&#x20;

* Free technical support - Our support team can help you maximize the features and assist you with using Modular.&#x20;
* Free theme updates - Enjoy continuous improvements and new features without subscription fees.

{% hint style="success" %}
A licensed theme secures your store’s compliance and supports continuous improvement and security.
{% endhint %}

### Setting up after purchase

Upon purchasing a theme, you can continue using your current version. In other words, there’s no need to reconfigure your store. If you update to the latest version, standard setup procedures apply to any new theme installation.

### Handling Shopify DMCA notifications

If you receive a DMCA (Digital Millennium Copyright Act) notification from Shopify, it indicates that you may not have a valid theme license.&#x20;

{% hint style="info" %}
Please promptly follow the Shopify DMCA email instructions to address the concerns and avoid any disruption to your store.
{% endhint %}

### Privacy and your information

Presidio Themes respects your privacy and is committed to protecting your personal information. Any information collected through our compliance processes is used solely for enforcing and managing theme licenses and will not be publicly disclosed.


# DMCA FAQ

<details>

<summary><strong>How can I purchase Modular?</strong></summary>

You need to purchase the Modular theme directly from the official Shopify Theme Store.

Here’s how:

1. **Visit the Theme Page**

Go to the [Modular theme page](https://themes.shopify.com/themes/modular/presets/modular) on the Shopify Theme Store.

2. **Add the theme to your library**

Click Try theme to preview it in your own store. This step is mandatory, and it will add a legitimate copy of Modular to your store.

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

3. **Purchase the theme**

When you’re ready, click Buy theme. The price is shown on the theme’s page, and it's a one-time fee. You’ll be prompted to log in to your Shopify account if you aren’t already.

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

4. **DMCA Status**

Once payment is made, the DMCA notice is no longer valid since the store will have a theme license applied.

</details>

<details>

<summary><strong>I’ve been using my theme for ages. Why are you contacting me now?</strong></summary>

Two reasons. First, we’ve been waiting patiently for Shopify to solve this problem on their end, and they have not, so we’re starting to do it ourselves. Secondly, we’re a small company with limited resources. Chasing down payments takes a good deal of time and effort, and until now, we haven’t been able to prioritize this.

</details>

<details>

<summary><strong>I purchased my theme from Fiverr, eBay, Etsy, Creative Market, or Template Monster. Is this not a valid purchase?</strong></summary>

No, it is not valid. Shopify stipulates that every theme sold in the Shopify Theme Store can only be sold via the Shopify Theme Store. We, the theme creators, are not allowed to sell our themes anywhere except the Shopify Theme Store. This Shopify document explains and verifies this policy. If a theme that exists in the Theme Store is being sold in another marketplace, then it has been stolen and is being sold illegally, and using it is a violation of Shopify's Terms of Service.

</details>

<details>

<summary><strong>I had my website built by an agency designer, developer, or Shopify Expert. I had no idea my theme wasn’t licensed. What should I do?</strong></summary>

You can inform the agency that built your website of this policy and ask them to make the purchase. If they do not, you will need to purchase the theme yourself or remove the theme from your store completely. If you believe the agency has stolen our theme, please report it to us via <licenses@presidiocreative.com>

</details>

<details>

<summary><strong>How can you prove I’m using the Modular theme?</strong></summary>

All web browsers (Chrome, Safari, Internet Explorer, etc.) have built-in functionality to allow anyone to view the source code of any website on the internet. Our themes contain various code snippets and patterns that we can recognize when viewing this source code.

</details>

<details>

<summary><strong>How do I know your email isn't spam?</strong></summary>

Here are some links to Shopify sources that verify the claims we’re making:

* Shopify’s Terms of Service outline its[ ‘one theme/one store’ policy and our intellectual property rights](https://www.shopify.com/legal/terms#:~:text=9.4-,Theme%20Store,-You%20may%20establish)
* Shopify’s requirement that [themes sold via the Shopify Theme Store can not be sold on other marketplaces](https://shopify.dev/docs/themes/store/requirements#1-theme-store-exclusivity).

</details>

<details>

<summary><strong>Why are you coming after me and not the people selling your themes on other marketplaces?</strong></summary>

We will also be sending legal notices to those people stealing and reselling our themes illegally. If you wish to report these people directly to us, you may email us at <licenses@presidiocreative.com>

</details>

<details>

<summary><strong>What other benefits come with purchasing a valid theme license?</strong></summary>

You will have access to our dedicated support team and will be able to update your theme to the latest version (for free) through the [Shopify Theme Store](https://themes.shopify.com/themes/modular/presets/modular).

</details>

<details>

<summary><strong>Do I have to use the theme after I purchase it?</strong></summary>

No, you are free to continue using whatever version of the theme you currently have installed. The important aspect is that the theme purchase will assign a valid license to your store.

</details>

<details>

<summary><strong>I have now purchased a license for Modular. How can I inform you?</strong></summary>

Thank you for purchasing a license for Modular. You now qualify for free updates and theme support. You do not need to inform us, as we will be notified automatically. However, if you wish, let us know directly, you may email <licenses@presidiocreative.com>

</details>

<details>

<summary><strong>I got a DMCA notification from Shopify. What do I do?</strong></summary>

This can happen if you don't purchase the theme before the deadline (5 business days) stated in the original email we sent you. At this point, the matter is out of our hands and is being handled solely by Shopify. You will need to follow the instructions in the DMCA email you receive from Shopify to ensure your site is not taken down.

If you have not gotten an email from Shopify, check your junk mail folder.

If you cannot find any communications email from Shopify, then you will need to reach out to <legal@shopify.com> to have your site reinstated.

</details>

<details>

<summary><strong>I purchased the theme, but my website is still down. How do I restore it?</strong></summary>

Once a DMCA notification is sent, Shopify legal will send you an email stating that you have 24 hours to resolve the issue (ie, purchase the theme). You will need to respond directly to the Shopify email notifying them of your theme purchase. If you don't see any email from Shopify, be sure to check your junk email folder.

Please keep in mind that after the DMCA notice has been sent, only Shopify is able to bring your store back online, so make sure to respond to the email promptly.

</details>

<details>

<summary><strong>What is Presidio doing with my personal information?</strong></summary>

We will never share any of the information you provide publicly. We use the form details to protect your store from anti-piracy countermeasures such as DMCA takedown notices.

</details>


# Custom


# How to add custom color swatches

Color swatches in our Modular theme are saved inside the 'swatches.json' file. You can find this file by going into your Online store > themes and clicking on actions > edit code.

{% hint style="success" %}
Use the search bar to find the 'swatches.json' file inside of the assets folder.
{% endhint %}

![](/files/-MksNM2fOnuBmXD6wdtG)

This file holds references to custom color names assigned to color codes. These color codes are then used to set the custom color swatches.

{% hint style="success" %}
You can edit the existing color codes to change the shade of the color by using any HTML-supported color code method you'd like (HEX, RGB, HSL, and so on).
{% endhint %}

![](/files/-MksM3E2XNmMnLJOEbJO)

You can take this a step further and also use images to give your swatches a specific texture. To do this, all you need to do is upload a small 'png' image into the same assets folder and replace the color code assigned to the swatch you're looking to change with the exact file name.

![](/files/-MksO8Lc4z3aUupGWMQn)

If you don't find your custom color variant as part of the ones that come preloaded without theme you can add it manually to this file and assign a color code or a custom image to it just as we did above.

The new custom color swatch will require you to add a bit of code. We recommend adding this code near the bottom of the file, right after the last swatch closing bracket:

```
,
{
  "new color name": "new color code/image"
}
```

![](/files/-MksPgnPzPBC4LlhLyic)

{% hint style="info" %}
Make sure that the comma from the code snippet starts right after the closing curly bracket of the previous color swatch.
{% endhint %}


# How to make CSS customizations

Adding your own custom styles and CSS overrides to the theme

For developers and to make minor CSS style modifications, use the code editor and add your custom CSS overrides at the bottom of `theme.css` located in the assets folder:

### How to open the code editor

Click on the ellipses (three dots) icon at the top of the theme editor to view theme actions, and choose edit code:

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

### Alternatives and "theme.dev.css"

On some versions of Modular, "theme.css" is minified and you won't be able to easily change the styles. This is where the "theme.dev.css" file comes in handy.

{% hint style="success" %}
This file is not minified and holds the exact same code but in a much more user-friendly layout. While you can certainly change the styles in it, these changes won't take effect on your live store. The reason for this is that this file is not read by default.
{% endhint %}

To activate it, you need to access the "theme.liquid" file and replace the instances of "theme.css" on lines 16 and 39 with "theme.dev.css".

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

{% hint style="info" %}
**Note:** Minified CSS is slightly faster so using "theme.css" is also slightly faster.
{% endhint %}




---

[Next Page](/llms-full.txt/1)