shopify app
We're constantly creating new user guides and developer docs to support our users. We also manage the Builder Forum, where our community of users and our team collaborate on best practices, new feature ideas, and much more. Should those resources not have the answers you're looking for, please reach out via email at help@builder.io or using live chat (note: live chat support is not available to customers on our free subscription plan)
Think of Shopify as the holder of all your store's data. Anything that is dynamic, such as your product data, collection data, blog data, etc., will be handled in Shopify. Builder Theme Studio will pull in this dynamic data, such as pricing and products, from your Shopify store.
Builder Theme Studio is where you build, edit, and optimize your storefront - the possibilities are endless.
By default, Safe Mode is enabled. While working in Safe Mode, anytime you publish updates, these updates are not applied to the live storefront but instead published to a staged alternate view.
You can preview your staged content by clicking the eye icon and select View live page.
When you're ready to publish this content to your live site, turn off Safe Mode and click Publish in Builder Theme Studio.
Learn more about Safe Mode here
👉Safe Mode only applies to theme pages and theme elements, and not custom pages. Only admins and developers can change safe mode. Find out more about roles and permissions here
For each page in your store, Shopify has a concept of alternate views to make edits or create versions of pages without impacting your live default template. In Builder Theme Studio, you can create an alternate view, such as a new version of a product page, that uses a different style or layouts, and link customer to this alternate view (e.g. through email, social, or ads) by adding ?view=myview to the URL, where myview is the name of your view, which you can set from the options tab when editing any of your theme pages.
For example, the alternate view for my blog page shown below is:
When you're in Safe Mode, all your theme pages and theme elements default publish to an alternate view. When you're ready to publish your changes to your live storefront, you'll need to turn Safe Mode off, and Publish Live. Learn more about Safe Mode.
Draft: as you're working in Builder, you can make edits and updates to a page, but until you publish those updates, they will remain saved as a draft in Builder
Scheduled: Clicking the calendar icon in the editor, you can schedule a page to go live for a specific date and time range. The page will automatically be published and live during that window.
Expired: A page that is no longer live due to scheduling window. It will show as "expired" in the content list and can be republished at a later time.
Published: Directly from Builder, you can publish your page to be immediately live on your site or storefront.
👉 For Shopify users, there's an additional published (staged) option in Builder Theme Studio: You can make updates to pages and even create new versions without impacting your live storefront. When you publish your alternate view, the url will include ?view=builder to indicate the staging environment. If you'd like to change the name of your view, you can do so in the options tab by clicking the pencil icon.
When working with Safe Mode enabled, anytime you publish updates, these updates are not applied to the live storefront but instead published to an alternate view. When publishing these alternate views, it will indicate that it's staged rather than live in production. This separate staging environment is a great place for you to make edits and changes to your pages and content without impacting your live storefront.
You have the option of either importing your current pages from Shopify, using a fully editable Builder Theme Studio template, or create a custom page and start from scratch.
Importing existing pages allows you retain your original Shopify layout and add / modify content in the dropzones above and below the sections imported. For instance, on a collection page, you might want want to add a banner at the top of the page or, on a product page, create a carousel of product images below the main product section.
👉 More advanced: Any updates you make to the liquid code for these sections will reflect on any pages imported with the Theme Studio.
For more information on how to import your existing page, check out this guide.
We offer a variety of fully editable templates that allow you to update the look and feel of your storefront with preexisting layouts. Both hovering over the template and clicking the eye icon in the top right corner will show a full preview of the template.
Once you select a template, you can simply replace the placeholder content or edit/remove any element to make any desired updates and changes to the page to make it your own.
If you're looking to start a page from scratch, you can create a new landing page from within Builder Theme Studio. Simply click +New Landing Page at the bottom of the left sidebar and you can start building your page! To learn more about getting started with the visual editor click here.
Yes, Builder Theme Studio works with all pages in your theme (homepage, collection page, product page, etc). These will all be listed under "Theme Pages".
You can also add pages that are not included in your theme. These pages will show at the bottom of the left sidebar under Landing Pages where you can create new landing pages or edit existing ones.
Yes! You can edit existing pages from your store by importing them. To learn how to import your pages, follow this guide.
The ability to import your existing pages is currently in beta. This feature will soon be available for all theme pages and sections. The current status of importing each page and section are:
In Beta
- Product page
- Collection page
- Blog article
Coming Soon
- Homepage
- Blog
- Blog page
- Login page
- Signup page
- Reset password page
- Cart page
- 404 page
Custom landing pages are pages you create in Builder Theme Studio that are independent of your Shopify theme pages (e.g. collection pages, product pages, etc.). These pages can be added to any theme. Common use cases are About Us Pages, Promotion Pages, Landing Pages, and Contact Pages.
To add and edit custom pages in Builder Theme Studio, navigate to the bottom of the Studio side bar. Here you can create a new landing page or view your existing ones.
As you're working in Builder, you can preview drafts or live pages.
If the page or version hasn't been published, you can select View current draft. If you have published the page, you also have the option of View live page. Both of these options will allow you to preview the page and interact with its elements in the same way as your users.
The pages listed under Theme Pages in your left hand nav are theme specific. If you delete a theme in Shopify, all content or pages within that theme will be deleted as well. Landing pages, which can be found at the bottom of the left hand nav, are not theme specific and can be made available across any theme.
If you update your base theme, any templates or content using h1, h2, etc tags will update to match the new themes styles for those tags.
You can make several templates with different styled headings using the styles tab in Builder and save them as templates whenever you want.
For example, you can save H1, H2, H3 etc templates using the standard styling from your theme. Just make a text box and set the text to be "heading 1", and save as template. You can also make more variations like an "H1 alternate" template that you can add custom styling from the styles tab and save as a template as well.
In a Shopify landing page, you can hide your header and footer with a setting in the Options tab.
Navigate to your landing page, click the Options tab, and toggle the Hide header and footer toggle switch, like so:
Yes! Most of your Shopify apps should work in Builder Theme Studio. If you think there's an error or something is not working as you'd expect, please contact our support team.
Yes - Builder Theme Studio code is optimized as the code a developer would write!
This includes generating:
- Clean, semantic HTML
- ADA compliant HTML
- Inline SEO metadata
- JSON+LD structured data
- All of your existing meta tags (title, description, etc) will work as expected
- For custom pages in Builder, you can define the title and description tags per page as well
Additionally, we heavily optimize for page speed following best practices, such as:
- Lazy loading below the fold images
- Use next-gen image formats (e.g. webp) for supported browsers
- Optimize browser caching for long TTLs for all static assets (e.g. images)
- Optimize CSS delivery (only the styles for the server generated content are included)
- Prioritize visible content
- No render blocking javascript
- Minify HTML and CSS
👉Some elements of your SEO are controlled by your theme and e-commerce platform. For example, Shopify allows you to set your Homepage SEO directly from your preferences. From your Online Store select Preferences and fill in the homepage title and homepage meta description fields.
To undo or redo recent changes, use the arrows in the top right of your screen. If you want to navigate further back, use the History tab.
In the version tab you are able to reset the default theme. You should consider this your Escape Hatch . Use it to revert back to your original template and archive the current page.
Note there is no revert button for alternate templates, it is only available if you have edited a non-alternate template.
To learn more about History and Versions head over here.
In Builder Theme Studio, your organization is going to be your Shopify store. If you have multiple stores, each one will have their own organization. Organizations are where you administer users, billing and advanced settings. Learn more here about: adding users and roles.
In Builder, roles are used to grant permissions to a user to see and perform only tasks related to their job. Roles are assigned when a user is invited to to an organization by an Admin. The four oragnization roles are:
- Admin can manage everything including billing and users. Every organization must have at least one admin.
- Developer can manage everything at organization level except billing, including custom code and advanced configuration
- Designer can create and edit content, designs, and styling
- Editor can edit content (e.g. text, images) but not designs and styling
In Builder, roles are used to grant permissions to users to access and perform certain features and tasks. Roles are assigned when a user is invited to to an organization by an Admin. The four oragnization roles are:
- Admin - can manage everything including billing and users. Every organization must have at least one admin.
- Developer - can manage everything at organization level except billing. For Builder Theme Studio, specifically, developers (and admins) are the only roles that can turn Safe Mode on/off.
- Designer - can create and edit content.
- Editor - can only edit content.
👉Custom roles, which allow you to create customized user permissions and work flows, are only available to our Enterprise plans ← add link here
How do I manage Shopify users in Builder Theme Studio?
A list of users who have access to Builder Theme Studio can be found in the your Account → Organization page of your Shopify dashboard.
To add a user to your Builder Theme Studio account, they will need to have a staff account in your Shopify store as well as your Builder account.
Once a user has been added to your Shopify account, you can add them to Builder Theme Studio from the Account → Organization section of your Builder account. If you are at your max number of users, you will need to upgrade your account.
👉Note: Only admins are able to add and remove users. Learn more about roles and permissions here.
Our current trial period for early access to Builder Theme Studio is 30 days.
We are sorry to hear you want to cancel :( To cancel your subscription, simply uninstall Builder Theme Studio from your Shopify store.
You keep your live pages. We will never delete your content*, even if you stop paying for the app. However, without a subscription you will not be able to edit anything made in Builder Theme Studio.
Additionally, we will no longer have access to any of your Shopify data. So if you add custom product and collection widgets, those will no longer display as they did before.
If you cancel your subscription and later change your mind, we may be able to reactivate your account which would allow you to continue editing the themes/pages you had previously built. If you are interested in reactivating your Builder Theme Studio subscription please reach out (help@builder.io)
*If you requested a full account deletion, none of your content would be recoverable/editable in the future.
While you do keep all of your live pages on uninstall, there is some data that may be lost.
👉Due to GDPR changes on Shopify, we are requested to remove your data after a certain amount of time after you uninstall.
Builder Theme Studio leverages Shopify's billing system. Shopify will collect payment for your monthly app subscription at the time your Shopify subscription is due. The charge will appear on your regular Shopify subscription bill's 30 day billing cycle.
Have a question about your plan? You can get in touch with Builder's support team! We will be happy to answer any questions that you have about the plan that you are on, how much you are being charged and the features that you have access to on your plan.
You can also view your upcoming charges on your Shopify account or contact their support team for more information on your upcoming bills.
To read more about Shopify App charges head over here
Up next
