How to Customize Superstore Theme from Out of the Sandbox?

Superstore is an exclusive Shopify theme by Out of the Sandbox, offering seamless customization for a positive online shopping experience. With user-friendly features like easy color customization, variant swatches, and optimized performance, Superstore caters to both seasoned entrepreneurs and newcomers. In this guide, we’ll see various ways to customize Superstore Theme Out of the Sandbox – Basic customization, performance settings, color settings, swatch settings, etc.

Basic Customization of Superstore Theme

Superstore, a premium Shopify theme by Out of the Sandbox, is exclusively available from their platform. To explore this theme for your store, follow these steps using the Theme Updater:

1. Install Theme Updater: Add Out of the Sandbox’s Theme Updater to your shop. This can be done for free, without the need for a paid subscription.
2. Try additional themes: Inside the app, find Superstore in the Additional Themes from Out of the Sandbox section. Click “Try theme” to add the trial version to your store. Select “Install trial” in the modal window and wait for the process to finish.
3. Customize the theme: Click “Customize” to enter the Superstore theme editor. Here, you can explore a variety of options and features tailored to your preferences.

Please note that any customizations made during the trial won’t be saved after purchasing the Superstore theme. This process applies similarly to other themes from Out of the Sandbox theme as well. Enjoy customizing your Superstore theme to enhance your Shopify store’s visual appeal and functionality. For more theme styles, wait until the purchase is complete. Once you own the theme, you’ll have access to all styles and can upload your preferred preset to your store.

How to Customize Superstore Theme for High Performance?

Enhancing your storefront’s speed is effortlessly achieved using Superstore’s Performance features offered in the Theme settings tab within your theme editor. Let’s explore how you can amp up your online presence

• Accelerate Link Loading with InstantPage: Activate Use InstantPage to supercharge your page speed. This ingenious feature preloads links in the background through AJAX, ensuring that when customers click a link, the heavy lifting is already completed.
• Rendering with Style Before Content: Opting for Fastest can expedite the first paint time but may result in a brief visual flash as components get styled later. If InstantPage is active, this setting takes a back seat. Tailor your loading strategy by selecting from the Style page before rendering the dropdown:
  • Swift (load all styles before displaying content)
  • Quicker (load some styles before displaying content)
  • Fastest (display content before styles load)
• Lazy Loading Activation: By default, the theme postpones loading out-of-view areas, optimizing page speed for above-the-fold content. Toggle Enable lazy loading if you wish to deactivate this feature.
• Font Loading Strategy Selection: Use the Font loading behavior dropdown to choose your font display strategy. Options include Auto, Swap, and Fallback. To enhance page speed, consider enabling the Use system font to override Typography settings.
• Preconnect to Facebook Pixel: Enhance your page speed by enabling Preconnect to the Facebook Pixel tracking server. Note: This might marginally impact performance if you don’t utilize Facebook Pixel.
• Preconnect to Google Analytics: Amplify your page speed by enabling Preconnect to the Google Analytics tracking server.
• By adjusting these settings, you’ll have your Superstore theme operating at its best, ensuring a seamless and swift shopping experience for your customers without compromising on originality.

How to Customize Superstore Theme Color Settings?

To access the color settings in the Superstore theme, follow these steps:

• Log in to your Shopify admin panel.
• In the left-hand menu, click on “Online Store.”
• From the “Online Store” dropdown, select “Themes.”
• In the Themes section, find and click on “Customize” next to the Superstore theme.
• Within the theme customizer, look for a tab or section labeled “Theme Settings” or a similar name.
• In the Theme Settings section, you should find a category related to colors. Click on this category to reveal the color settings.

Superstore offers easy-to-use controls for customizing colors throughout the theme. Let’s explore the simple steps to personalize the colors in various sections:

• Header: Adjust the colors of the Header’s Background, Logo text, and Cart icon effortlessly using the color picker beside each label.
• Header Search Bar: Tailor the colors of the Header search bar with expanded customization options. Click the color picker beside each label, and the changes will be reflected in the right-side preview.
• Header Navigation: Fine-tune the colors for the header navigation, including links, dropdowns, and mega navigation menus. Use the color picker beside each label, and witness the changes in the right-side preview.
• Text: Customize the colors for basic text across the theme. Click the color picker beside each label to make adjustments, and see the changes in the right-side preview.
• Buttons: Personalize the colors of add-to-cart (ATC), call-to-action (CTA), and other buttons on your storefront. Simply use the color picker beside each label to make the desired changes, and view them in the right-side preview.
• Forms: Adjust the colors for text fields in forms, such as the contact page, newsletter signup, and order notes. Utilize the color picker beside each label, and observe the changes in the right-side preview.
• Products: Tailor the colors for product details like Price, Vendor, etc. Click the color picker beside each label to make adjustments, and preview the changes on the right side.
• Product Cards: Control the background color for product cards on the Collection page grid. Use the color picker beside the label to make changes, and see the updated color in the right-side preview.
• Product Reviews: Manage the appearance of Star ratings in Product Reviews. Adjust the colors using the color picker beside each label, and see the changes in the right-side preview.
• Layout: Customize elements of the overall storefront, assigning colors to backgrounds and dividers. Click the color picker beside each label, and observe the changes in the right-side preview.
• Content Containers: Tailor the color of boxes containing text, media, etc. in sections like Blog posts and Twitter feeds. Use the color picker beside the label, and view the changes in the right-side preview.
• Popups: Control the color for pop-up-style windows, such as quickshop. Adjust the color using the color picker beside its label, and preview the changes on the right side.
• Site Overlays: Adjust the colors for the darkening effect surrounding popups. Use the color picker beside Overlay, and determine the opacity strength with the Opacity slider. Preview the changes in the right-side preview.
• Footer: Customize the main components of the Footer with ease. Click the color picker beside each label, and see the changes reflected in the right-side preview.
• Social Icons: Fine-tune the color and contrast scheme of social media icons for Share buttons and Footer icons. Choose from Dark on light, Inverted, or Colored schemes to match your brand’s style.

How to Setup Swatches in Superstore Theme?

Color swatches add a visual touch to your product variants, making it easier for customers to identify different options. Superstore simplifies the process of setting up swatches for your product variants on the Product page, product cards, and tag filters on the Collection page.

• Set up Variants: Ensure your products have variants established. If not, follow Shopify’s guide on setting up variants.
• Identify Variants for Swatches in the Theme Editor:
  • Navigate to the theme editor (Customize).
  • Open Theme settings, then go to Products.
  • Scroll down to the Color Swatches section and find the Swatch trigger field.
  • Modify the value in this field to match your desired variant group name (e.g., ‘Color’ or ‘Colour’ – note that spelling must match).
• Activate the Swatches:
  • Once the Swatch trigger is set, activate swatches by checking the ‘Enable color swatches’ option.
  • Common color names will automatically connect with predefined color swatches. Add custom colors using the Custom colors field.
• Add or Replace Colors for Swatches: Use the Custom Colors field to fine-tune the colors for available variants.
  • If a color doesn’t display a filled swatch, create a PNG image of the color, ensuring the file name matches the variant spelling. Example: ‘Fluorescent Grey’ becomes ‘fluorescent-grey.png’.
  • Upload the image file in your Shopify admin under Settings > Files.
  • If the default colors don’t match the product variant, use the Custom colors field. Add the variant name, followed by a colon (:). Example: Light Grey:
  • Add the replacement color name or hex code. Example: Light Grey: #C0C0C0 or Light Grey: silver.