How it works

Profit Pages was built to ensure your site runs as fast as possible. To do this we provide a lightweight codebase built on Shopify and website best practices.

Core Components

In order for Profit Pages to functional properly, the following components must be included as part of your theme. During the setup process, Profit Pages attempts to install these components. However, the variety of themes in the marketplace

1. CSS and JavaScript assets 
2. CSS and JavaScript references 
3. Page Metadata 
4. Product Metadata 

CSS and JavaScript Assets

CSS and JavaScript files are included as assets in every theme that you setup with Profit Pages. It is recommended that you do not manually edit or override these files. They include the the styles and functionality for your Profit Page elements. Not including or overriding these files will prevent the elements from displaying and functioning properly.

assets/page-builder-${version}.css
assets/page-builder-${version}.js

CSS and JavaScript References

The CSS and JavaScript is defined using the page-builder-assets snippet. By default, this snippet is referenced by the theme.liquid file. If you have a page or product that does not use the theme.liquid file, then you must manually reference this snippet in the head of your document.

LAYOUT/THEME.LIQUID

{% include 'page-builder-assets' %}

SNIPPETS/PAGE-BUILDER-ASSETS.LIQUID

<link type="text/css" href="{{ 'page-builder-${version}.css' | asset_url }}" rel="stylesheet">
<script src="{{ 'page-builder-${version}.js' | asset_url }}" defer="defer"></script>

Page Metadata

All the content you create for pages in Profit Pages is stored in metafields within your Shopify installation. To display the content, you simply need to include a reference to the metafield in your page. For pages, this is done in templates/page.liquid.

TEMPLATES/PAGE.LIQUID

{{page.metafields.pagebuilder.content}}

Product Metadata

All the content you create for products in Profit Pages is stored in metafields within your Shopify installation. To display the content, you simply need to include a reference to the metafield in your product. For products, this is done in sections/product-template.liquid.

SECTIONS/PRODUCT-TEMPLATE.LIQUID

{{product.metafields.pagebuilder.content}}