đź’ˇ Access these settings in your dashboard under Storefront > Theme.

There are two options for customizing your Swell storefront: You can customize your theme right in the dashboard—you can also access the source code for even more control. Check out our documentation on storefronts to see more storefronts options, or read on to learn about what you can customize within the storefront visual editor.

After activating your theme in the dashboard, you access the storefront editor by clicking the Customize button within the Storefront section of the dashboard. The editor is where you can preview your store on different viewports, which approximates the appearance on desktop, tablet, or mobile. You can Preview any changes you make and Publish those changes when you’re ready.

Using the storefront editor

Within the editor, you can customize many aspects of your storefront—allowing you to make your storefront your own and implement branding and stylistic changes for your store. There are also various settings for page and content creation that allow you to control the flow and presentation of content within the pages on your storefront. Origin, our basic starter theme, includes all of the following outlined in this article, though other themes may expand the editor functionality.

đź’ˇ The settings sections and features outlined below are default settings included for all Swell storefront themes. Depending on which theme you are using, you may encounter a different set of options.

Design and global settings

Edit your store’s appearance by clicking Design and global settings. As you make changes, the preview will update accordingly, so you can always be sure as to what you’re updating.

  • Style settings include customization for colors, typography, and products previews.

  • Header settings include editing the logo (and favicon), creating a promo bar, and managing the main menu navigation.

  • Footer settings include the footer menu, an optional secondary footer menu, and the option to show social icons, contact info, and an email signup. You can also choose whether the footer should have a dark or light background.

  • Social media and sharing settings include the ability to indicate any social media accounts you have, such as Twitter, Facebook, and Instagram.

  • Product list includes the ability to enable features on items such as the quick add to cart feature.

  • Subscriptions includes setting available actions for customers to edit their subscription plans, subscription frequency, and other subscription options from their profile.

  • Cart includes the ability to specify the start shopping link endpoint—this is where the user is directed to begin shopping—for example, setting it to /categories/ will direct a user to the product categories page when they click Shop. You can also enable stock validation on products when they are added to a cart.

  • Analytics includes an area to link a Google Tag Manager ID. For more information, see our article on configuring your storefront analytics.

  • Global scripts include areas to add global analytic scripts for both header and body.

  • Checkout includes options for customizing the different checkout sections, such as the header, logo image, content, and cart area. You can also edit the background image, colors, and typography.

Product detail pages

This section allows you to specify product details for display on product pages. In addition to creating and editing various product benefits, you can enable the ability for social sharing for products and the ability to set and display the stock levels for products.

Category detail pages

This is where you can customize the category detail page. Settings include the option to show a hero image and specify the text color, the number of products per row, and the number of rows per page.

Pages

Here you can customize page content for existing pages of your store or add new pages and content to your storefront. Each page is built up of various content blocks, which can all be customized with various forms of content. For more information, see our content blocks article to learn more about these blocks and their configuration options. Additionally, you can also clone and delete pages—as well as designate your storefront homepage.

Did this answer your question?