Superstore comes packaged with five theme styles: Fashion, Tech, Interior, Agency, and Beauty. These are presets to help curate your store's colors, fonts, and styles.
If you want to start off with the full styling of a particular theme style, you may need to manually set the theme style in the theme files.
Superstore's theme styles
-
Fashion
Alongside Tech, this was one of two original theme styles for Superstore.
-
Tech
Alongside Fashion, this was one of two original theme styles for Superstore.
-
Interior
Added in Superstore version 2.0.1, the Interior theme style is the third theme style.
Transferring content to the latest version with the Theme Updater App will not include this new theme style. New theme styles must be added manually. Feel free to contact our support team if this is an important feature for your storefront.
-
Agency
Does our website look familiar? It might be because we use Superstore Agency as our Shopify storefront.
This theme style was added to the theme in Superstore version 2.1.1.
Take another look at our website
Transferring content to the latest version with the Theme Updater App will not include this new theme style. New theme styles must be added manually. Feel free to contact our support team if this is an important feature for your storefront.
-
Beauty
Added in Superstore version 3.0.0, the Beauty theme style is the fifth theme style.
Transferring content to the latest version with the Theme Updater App will not include this new theme style. New theme styles must be added manually. Feel free to contact our support team if this is an important feature for your storefront.
You may notice a pop-up feature on the Beauty demo storefront. This is our app Pixelpop, which features a free plan.
Learn more about Pixelpop
Select a theme style in the theme settings
To select the theme style to use in your store, go to the Theme settings tab, then scroll all the way to the bottom to the Change theme style button.
Here, you can preview the theme styles and select the one that's right for your store.
Applying and saving a new theme style will overwrite your current style settings, however, you will not lose any content from your store following this change.
Starting with the full styling of the preset
Switching the theme style in the theme editor will only apply a limited amount of styling changes to the preset. Consider making the following theme file adjustment to take advantage of the full theme style.
Step one: Upload the theme zip
Upload the theme's unopened zip file to your Online Store. Once this has uploaded, go directly to Actions > Edit code (do not open the theme editor).
Step 2: Edit the settings data file
Open the Config folder, then the settings_data.json file
At the top, there should be this line:
“current”: “Fashion”,
Change “Fashion” to any of the other preset names:
- Fashion
- Tech
- Agency
- Interior
- Beauty
Double-check to make sure the quotations and commas still match the original layout. The only change should be the word Fashion.
Step 3: Save then open the theme editor
Save the file and open the theme in the editor to confirm the desired theme style has been applied.
Didn't work?
If you instead see “current:" and a bunch of code (no theme style name), scroll down to the "presets:" line.
Select all the code up until this line, then delete that code.
Add one of these codes to the beginning of the file to replace the deleted code:
For Beauty
{
"current": "Beauty",
For Agency
{
"current": "Agency",
For Interior
{
"current": "Interior",
Then Save.