Online Store 2.0 (or OS 2.0) themes take advantage of additional Shopify platform features.
The new features are native to Shopify, and not unique to our themes, so if you have any questions about these you can contact Shopify here.
Updating your theme
NOTE – Themes cannot be automatically updated – you install the latest version of a theme (for free), populate your theme again with sections and settings, then publish it. Shopify has an article with more detail about this here. Any custom code will need to be re-added (if needed), and some apps may need reinstalling. This is a Shopify platform process so every theme available on the themes store operates in this way.
If you wish to update your existing theme with new code, or transfer any previous custom coding to a newly installed theme version, please try the following resources (we cannot do this for you):
How to update your theme
- Log in to your store.
- Visit the themes store: https://themes.shopify.com/
- Find your theme and click “try theme” which will install your theme without affecting existing your live or unpublished themes.
- Head to Admin > Online store > Customise theme > You will see your newly installed theme in your theme “library”.
- Optional (to help speed up setup): Click “customise theme” on your fresh install and then the same for an existing theme you wish to copy the setup of. You should then have two browser tabs open which you will use to compare your empty theme with your populated theme. Use your existing theme’s sections as a reference, going through each section you’ve applied, making sure you add the same to your new theme, in your second browser tab. Repeat this process by expanding the sections themselves and replicating any content blocks and settings inside each of these sections.
- Check your apps list and remove any you no longer wish to keep as this will keep your site’s speed running super fast. Reach out to the app developers directly to check whether app code also needs removing (some apps require this).
All of our themes take advantage of OS 2.0 architecture. The first version of each theme, compatible with OS 2.0 is listed below:
Showcase 5.0.0 – (Aug 11th, 2021)
Symmetry 5.0.0 – (Aug 11th, 2021)
Canopy 4.0.0 – (Aug 17th, 2021)
Alchemy 4.0.0 – (Aug 23rd 2021)
Boost 2.0.0 – (Sep 2nd 2021)
Masonry 4.0.0 – (Sep 15th 2021)
Expression 6.0.0 – (Sep 21st 2021)
Shopify OS 2.0 support documentation
Here are Shopify’s help pages for the new admin, filters, templates, sections and metafields:
- Editing your theme in 2.0: https://help.shopify.com/en/manual/online-store/themes/os20/customize/edit
- Product filtering: https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters
- Templates guide: https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates
- Sections (everywhere) & blocks: https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections
- Metafields: https://help.shopify.com/en/manual/metafields
How to create multiple unique product page templates
- Head to Admin > Online store > Customise theme > Use the dropdown list at the top of the preview window to select “Products” > “Create template” (this ensures your original product template remains unchanged whilst we work on a new one).
- Add a name of your choice, like “Bag”
- Choose “default product” as your “based on” option and click “create template”
- Your new template will be loaded in the editor preview window to work on. If you wish to work on a different product, click “change” next to “preview” in the top left hand corner of the screen.
- Expand “product pages” in the left hand side settings panel and add / remove any content blocks or add any sections you wish to display on your page. Here’s more information on how sections and content blocks work.
- Assign the template to your product page by heading to Admin > Product > Select your product > On the right lower side you will see an option for ‘theme template’, click this and select the new template you created previously. Make sure you have your theme published for this part, otherwise you won’t be able to select the template.
- Once you have assigned this template, click save, and that’s it. You should now be able to view this product page and see your unique layout applied.
How to create multiple unique pages (multiple story pages)
- Admin > Online store > Customise theme > Use the dropdown list at the top of the preview window to select “Pages” > “Create template” (this ensures your original page template remains unchanged whilst we work on a new one).
- Add a name of your choice, like “Story Page One”
- Choose “default page” as your “based on” option and click “create template”
- Your new template will be loaded in the editor preview window to work on. If you wish to work on a different page, click “change” next to “preview” in the top left hand corner of the screen.
- On the left hand side, next to “page”, click the eyeball icon to hide the page content.
- Add any sections you’d like to display. Save your changes. Here’s more information on how sections and content blocks work.
- Assign the template to an existing page by heading to Admin > Pages > Select your page > On the right lower side you will see an option for ‘theme template’, click this and select the new template you created previously. Make sure you have your theme published for this part, otherwise you won’t be able to select the template.
- Once you have assigned this template, click save, and that’s it. You should now be able to view this page and see your unique layout applied.
- To add this to a new page, simply go to Admin > Pages > Add page > On the right lower side you will see an option for ‘theme template’, click this and select the new template you created previously.
- To set this up additional pages, simply repeat the steps of creating new templates and assign them to existing or new pages as you see fit. Remember you have the option to choose “based on” for step three above, if you wish to use an existing template and only make a few changes when creating a new template.
- Once you have finished the above, go here to link your new page/s to your navigation menu if you wish: Admin > Online store > Navigation.
To remove a page template, firstly duplicate your theme for peace of mind, then head to: Admin > Online store > Actions > Edit code > Open the “Templates” folder > Look for your template name/s preceded by “story.” > Click “delete file”
How to set up collection filters
- Head to Admin > Online store > Navigation > Under “filters” you’ll see list of your active filters.
- Drag and drop these to change the order in which they display on your storefront or click the ‘x’ to remove them. Add more filters by clicking “add filter” and then ‘product options’ if needed and tick your desired checkboxes. The product options checkboxes are generated from your product page options you have set up. To add more checkboxes, you will have to create these as options in Admin > Products.
- Click save.
- Make sure you have enabled your collection page filtering by heading here: Admin > Online store > Customise theme > Select “Collection pages” on the left hand panel > Toggle the “Enable filtering” checkbox.
- Save changes.
How to set up custom filters using metafields
- Admin > Settings > Metafields > Products > Add definition > Add a name of your choice for your reference > Select “content type” – “text” > Click “save”. This creates our metafield.
- Admin > Online store > Navigation > Under “Filters”, “Click “Add filters” > Under “metafields”, you should see your newly created metafield from step one. Select this and save.
- Admin > Products > Find your product which is to have it’s metafield activated > At the bottom of the product settings, you’ll see the new metafield listed. Add your text to this field. Click save.
- Repeat for any additional products.
- To check all is working as expected, take a look at your storefront and your newly added metafield/s should show in your collection page filter.
How to create a sub collection within a collection
Step A: Creating the template
- We first need to create a new page template by heading to Admin > Online store > Customise theme
- In the template picker at the top of the customisation window, select Pages > Create a template. Give it a descriptive name like “Groceries Coll List”
- You will now be taken to that template. Look on the left-hand side and you’ll see the options to add sections to this page. Add a ‘Collection list’ section to the page.
- Use the settings to pick the collections you want to show, and also disable any features you don’t want to use on this page – like a carousel layout, or ‘View all’ links.
- Once done, save this template. You are now ready to assign it to a page.
Step B: Creating your page and assigning your template
- Make sure you have your theme published for this part, otherwise you won’t be able to select the template.
- Head to Admin > Online store > Pages > Add page. You can name the page whatever you like and insert a page description if you desire. (The theme editor area settings allows you to hide the title and description, if you wish – just remember a clear main heading is important for ‘accessibility’ and SEO).
- On the right lower side you will see an option for ‘page template’, click this and select the new template you created in step 1.
- Once you have assigned this template, click save, and that’s it. You should now be able to view this page and see your collections displayed on it.
How to create unique product tabs/size charts with metafields
- We first need to create a new page containing your size chart by heading to Admin > Online store > Pages > Add page > Call this ‘Mens size chart’ or similar.
- Add content to the page as an image or as a table, using the built in content editing tools.
- Head to Admin > Settings > Metafields > Products > Add definition > Enter a name of your choice, like “Size charts”
- Add a description of your choice (used internally, as a reference so you know later on, why you created the metafield). Say something like “Guide to size charts”.
- Assign a “content type” which defines the metafield’s purpose. Choose “reference” > “Page” > Save changes. This metafield will now show on all products but will only become active on your storefront for customers to view once it is triggered (on a per-product basis), explained in the next steps.
- Head to a product that you wish to activate your metafield on: Admin > Products > Choose your product > You should see your new metafield listed at the bottom of the page.
- Click on your newly created, grey metafield content box which should display a dropdown list where you can choose your page to link to (like ‘Mens size chart’ we created in step 1).
- Save your changes to apply this to your product. Repeat steps 6-8 for any other products where you wish this to display.
- Return to your product in your theme editor area.
- Select the content block called “size charts” (you may need to add this content block if you do not see it yet).
- Under “Tab content”, click the “connect dynamic source” icon and select “Size charts” and save your changes. You should see your size chart page shown when you expand the “size charts” tab on the page preview window.