BUILDER

Resources

Γ—

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

☰

Home

Forum

Blog

Github

Login

Signup

This page was made in Builder!

Shopify FAQs

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)

Builder Theme Studio vs. Shopify - What do I do where? 

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.

What is safe mode?

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.

πŸ‘‰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

What is Safe Mode?

Choosing whether or not to use safe mode depends a lot on your specific use case. Generally, it is there to prevent unwanted or unintentional changes to your live site - think of it as a checkpoint. When in doubt, we would recommend leaving it on.

Let's say you aren't that happy with your current store and know you want to immediately start making improvements. In this case, you can leave safe mode off and start tweaking, replacing and styling your whole site. You can go to town, edit pages, create new pages, whatever you feel like!

Alternatively, if you're not in a rush to make adjustments to your site and want to make sure you made and reviewed all your changes before going live, leave safe mode on. This more judicious approach lets you edit all of your templates, review, and then publish once you are sure you are happy with everything.

πŸ‘‰Tip: It's always good to make a copy of your default theme for editing purposes...just in case.

When should I use Safe Mode?

While working in Safe Mode, anytime you publish updates, these updates are not applied to the live storefront but instead published to a staged or alternate view. Learn more about Safe Mode here and Alternate Views here.

Choosing whether or not to use Safe Mode depends a lot on your specific use case. Generally, it is there to prevent unwanted or unintentional changes to your live store while you are building and optimizing your theme pages and elements - think of it as a safety check. Our recommended best practice is to keep safe mode on and then switch it off when you are ready to publish live.

πŸ‘‰ Tip - Shopify recommends that you always make a copy of your default theme for editing purposes, just in case. We agree! To make a copy of your default head over to your Shopify Store. Under Sales Channel β†’ Online Store β†’ Live Theme β†’ Actions β†’ Duplicate

What are alternate views?

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:

https://store.myshopify.com/**blogs/news**?view=builder

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.

What are page statuses and what do they mean?

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.

What does staged mean?

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.

What's the difference between importing a page vs using a template?

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.

Import your current page

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.

Fully Editable Templates

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.

Start from Scratch with Custom pages

If you're looking to start a page from scratch, you can create a new, custom page from within Builder Theme Studio. Simply click +New 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

Does Builder Theme Studio work on all my pages?

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 "Custom Pages" where can add more Custom Pages or edit existing ones. Learn more about custom pages here.

Can I edit existing pages from my store?

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

What are Custom Pages?

Custom 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'll see a list of your custom pages and the ability to create new custom pages.

Previewing pages

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.

Are pages independent of themes?

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. Custom 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 I update my base theme, will my H1-H6 styles update?

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.

Will Builder Theme Studio work with other Shopify Apps?

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 [link to chat]

How is Builder Theme Studio content optimized for SEO?

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

πŸ‘‰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. 

How can I undo changes?

Undo Small Changes

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.

Starting over

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.

What is an organization?

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.

What are organizational 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

What roles can I assign users? 

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?

Viewing Users

A list of users who have access to Builder Theme Studio can be found in the your Account β†’ Organization page of your Shopify dashboard.

Adding Users

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.

How long is your Shopify trial period?

Our current trial period for early access to Builder Theme Studio is 30 days.

What happens if I uninstall or stop paying for Theme Studio? 

What happens if I uninstall the app?

We are sorry to hear you want to cancel :( To cancel your subscription, simply uninstall Builder Theme Studio from you Shopify store.

What happens to my live pages once I uninstall?

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.

What happens to my data?

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.

How does billing work for Theme Studio?

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

Getting started with Shopify
Was this article helpful?