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.

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.

Key components

• Headings and text: Our customizable headings and text fields allow you to provide context and information about each collection.

• Layout: Choose from different block heights and text positions to create a layout that suits your preferences.

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.

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.

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

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.

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:

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

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

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

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.

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:

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

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

Key components

• Layout: Choose between a slider or marquee layout, providing flexibility in how your announcements are displayed.

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:

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.

Key components

• Dynamic visuals: Set the tone for your website with a stunning video background that grabs attention and adds an element of dynamism.

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

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.

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

• Padding controls: Adjust the padding at the top and bottom of the section to create the perfect balance between visual appeal and readability.

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.

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

Key components

• Heading: Tailor the heading of your testimonials section to suit your brand's style with customizable options for position and alignment.

• Text alignment: Ensure that your testimonials are presented exactly as you envision by customizing the text alignment and opting to hide quotes if desired.

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:

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.

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.

Theme sections

Click to view details of individual sections included with Modular:

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

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.

Similar to the Slideshow section, 'Image with text overlay' is perfect when you only need a single image banner section.

Unlike the Slideshow section, you can rearrange the order of text blocks.

Key components

• Banner image: Choose a captivating image to serve as the background for your overlay content, setting the tone and mood for your website.

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.

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.

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.

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.

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

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

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.

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:

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

Create visually appealing and engaging content to captivate your audience.

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:

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.

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.

Include quick share buttons right on your product pages.

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

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.

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.

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.

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.

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.

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.

The product form includes variant pickers (for products with variants), the quantity picker, and the product form submit buttons - 'Add to cart' and 'Buy it now'.

An essential block with a few extra options.

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

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.

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

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.

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.

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.

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:

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.

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.

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.

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

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.

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

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.

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.

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:

- Grid: Show multiple rows of products. - 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.

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

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.

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.

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.

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.

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

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

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

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.

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:

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.

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

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.

Aspect Ratio 1.5 to 1

This ratio will result in taller images or portrait images.

Aspect Ratio 0.5 to 1

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

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.

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.

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.

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

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

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

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_

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

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

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.

Contrast

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

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

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.

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.

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.

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:

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.

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.

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.

Key components

• Text and description: Easily add headings and detailed descriptions for each feature.

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

• About

• Contact

• FAQ

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.

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

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.

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.

Key components

• Grid Layout: The Mosaic section displays images in a grid or collage format, making it ideal for visually engaging storytelling.

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.

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.

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

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:

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.

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.

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.

Please ensure you have a valid license to use Modular

Here are some helpful tips about understanding theme licensing with Shopify.

Understanding theme licensing

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

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.

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.

Authenticity

You can refer 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:

• Free technical support - Our support team can help you maximize the features and assist you with using Modular.

• Free theme updates - Enjoy continuous improvements and new features without subscription fees.

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.

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.

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:

Product page sections

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

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:

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.

Aspect Ratio

Aspect Ratio 1 to 1

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

Aspect Ratio 0.5 to 1

This ratio will display wider images.

Aspect Ratio 1.5 to 1

This ratio will display images in a portrait format.