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.

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.

Showcase your recent blog posts on your store pages.

Add custom HTML to embed elements into your store pages.

The custom HTML input field size is set by Shopify. We recommend that you only paste custom HTML into the section.

The 'Mosaic' is a unique feature of Modular. The blocks are automatically resizable.

There are different types of blocks with different settings. Control the content of each block individually.

Add testimonial blocks to showcase qotes you've gotten from your customers or business partners.

Add a questions and answers module to your store pages.

Set the heading and subheading for the section.

Set each individual question (tab heading) and answer (tab content).

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.

Select the collection you want to highlight on your page. Choose between styles for your buttons and layout.

'Logo List' creates a carousel view that you can use to showcase your brand or partnered brand logos.

Set the individual logo images, size, and link.

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:

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.

Set the icon (or image) for each block. Change the text and heading under each icon.

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:

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.

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

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

Headings

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:

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

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

Set the individual block settings to customize each slide. Control the image, text, and buttons of each slide.

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

Showcase multiple images side by side with text and overlay.

The 'Product Feature' section creates a split view of text and images.

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.

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:

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.

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.

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: [email protected]

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.

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.

The 'Collection list' section allows you to add up to 5 collection blocks per section. You can use multiple sections to show more collections.

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

Click on the Announcement bar section to reveal the section settings.

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.

Add stylized text to your store pages.

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.

Accent line, Mobile menu and Animations

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

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.

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)

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

We recommend using square images around 600 by 600 pixels.

Aspect Ratio

Where do we start?

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.

How to setup

Setting up a Pre-order tag is very simple and can be done right in your Shopify Admin.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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:

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

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.

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

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.

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:

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.

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.

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).

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.

The 'Theme Settings' tab is located under all sections in the Theme Editor. This tab contains a bundle of all global settings 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:

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

Collection page and Product Grid sections

Stars can be shown above product name and price:

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:

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

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:

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.

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.

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.

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.

General

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.

Buttons and Products

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.

On the topic of colors, here is a great contrast checker that you should almost always use to make sure your colors give out a readable layout.

Modular has three filtering methods to choose from. They can be found under the Collection products section settings.

Default

The default method is a new feature introduced with Online Store 2.0. This feature is automatically generated based on your product information such as variant price, availability, product type, brand, and vendor.

Filter by tag

Filtering by tag method simply takes all of the unique tags applied to each product of the collection and lists them inside the filters menu.

This is the most simple method of all and as such, the fastest. If your priority is speed, we definitely recommend giving this method a try.

Filter by group

The filter by group method has been a staple in our theme for years and we are happy to include this in this version too. While this method is similar to the filter by tag method, as they both use product tags, it is a lot more advanced.

Setting this method up requires the use of product tags with a specific pattern. For each of your products, you need to specify tags that consist of a combination between the group name and the option name.

The group and option need to be separated with an underscore but they can contain spaces if they need to.

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:

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.

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

Add our custom Tabs section to your store pages to give more information for your products.

What is a preview link?

When working with an unpublished theme (also known as a draft), you can send out a preview link that allows anyone who has the link to preview your work/store. Shared preview links expire after a certain number of days and are randomly generated by Shopify.

How do you share it?

1. In the Theme Editor, click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions.

2. Choose Preview.

3. When the new preview window appears, choose the green Share Preview button at the bottom of your browser.

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.

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

Blog layout

Controls to customize the layout of your blog index page:

TIP - Use Show tags to display the navigation tabs which allows readers to filter though your articles

Articles

Adjust image aspect ratio with the range slider and toggle article attributes:

Adjust the aspect ratio for wide to tall style images:

Showcase a banner image with text.

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

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):

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

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

Product setup

The next and final step is to edit any of your products in the Shopify Admin -> Products and update the new badge metafield.

Scroll to the bottom of the product setup page:

Save your product and preview it on your Collection pages:

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.

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

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.

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:

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.

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:

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

Customizing pages

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

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.

Learn more about using sections and blocks in Modular:

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.

'Image with text' uses a solid color block to make the text stand out over the image. Use this more striking design to grab your customer's attention.

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.

Header search and Overlay

Set the type of results you want to return in your Search query. The available options are products, blogs, and pages (a mix of all).

Create a quick and easy subscription form for your customers.

The new Collection page template introduces infinite customization options that you never knew you needed!

Click on Collection products to view settings for Collection pages:

Theme Settings

Expand the Theme Settings panel to view additional settings related to the product grid:

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.

Modular provides an option to adjust image aspect ratios for the blog page.

Aspect Ratio

Theme Support.

To reach us with questions or additional assistance with using Modular, our support staff is here to help you by email. To better support all our customers, we handle all our support via email. This helps us manage support across multiple time zones in a timely manner.

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.

Popup Behaviour

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

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':

All Collections

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

Product grid layout

A crucial and very important part of your store are your product and collection pages. There are global settings that affect both in this tab.

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.

Accessing the Theme Code.

Click on the ellipses (three dots) icon at the top of the Theme Editor to view the theme actions and choose Edit code:

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:

Modular is built to use Shopify's Online Store 2.0 (OS2) which allows you to use all of Modular's 20+ sections everywhere including the Homepage, Product pages, Collections, Pages, Blogs, Cart page, Search page, and more. Endless flexibility options for your store.

Shopify's Online Store 2.0 also includes Collection filtering tools, unique content using Metafields (dynamic source), easy to create custom templates, improved storefront performance. Modular uses all the features included in Shopify's new modern platform.

Getting started with Online Store 2.0.

Shopify's platform change completely remodels how you can use your store. Start with learning the features and changes Shopify has introduced:

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'.

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

Updating from a previous version of Modular.

Updating from Modular 3.0.0

Coming from Modular 3.0.0 (or 3.0.1) you are using the new structure of JSON templates. There might be a chance for you to transfer over some of the settings in your edited page templates.

To start, you will need to first download a fresh copy of our latest version of Modular from the .

Next, you can open the code editor of your current copy by going into your Online Store > Themes and clicking on Actions > Edit code.

Here, you should find the edited page templates with a small grey dot as an indication that they are changed.

What you can do here is to open up the edited page templates, we'll use index.json for our example, and copy the content to paste in the new theme.

The last step is to open the code editor for the new copy, and open up the same file, in our case index.json, and paste in all of the code.

Lastly, all that's left is to save the changes. If no build errors pop up, you have successfully transferred all of the settings that are still compatible with the new version.

Please note that it's possible not all settings will be compatible in which case you could run into a build error or just have missing sections.

If you run into a lot of build errors, then the best thing to do would be to manually redo all sections from the Theme Editor for the template.

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.

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.

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.

Uploading your Font Files

In order to use your own custom fonts, you will first need to upload the font files. To do this, you'll need to head on over to your Online Store > Themes and click on Actions > Edit code.

From here, open the Assets folder and upload your font files into it:

Defining the new Font Families

Now that we have the assets sorted out we can head on over to the 'css-variables.liquid' file. It's located inside the Snippets folder.

Here you need to scroll all the way to the bottom and add a bit of code before the closing style tag (' {%- endstyle -%} '):

This is the place where you need to add this code snippet:

In this code snippet, you need to replace all references of 'Gotham' with your own font name and font files names.

Assigning your Custom Fonts

Finally, all we need to do is assign the new fonts to be used. There are two global font variables that control the fonts for the headings and body text.

You can easily find all of them by using CTRL + F (or Command + F) and searching for 'font-family':

All you need to do here is to replace the first value assigned to the variables you're looking to change, we'll continue to use 'Gotham' in our example to keep it consistent but this is also a place where you input your custom font name:

That's it, you're all set and ready to go. Don't forget to Save the changes.

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

To check the version of your current copy of the Modular theme, click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions including the version number:

Theme sections

Click to view details of individual sections included with Modular:

Modular is designed to showcase brand imagery in a minimalist, grid-focused design. Packed with modern sections and blocks, Modular includes a signature product grid to showcase collections and products in a statement collage-style layout.

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

Demo stores

Explore our Shopify demonstration stores running Modular:

Try Modular

Download our Modular theme from the Shopify Theme Store:

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 from our contact form: