You can customize your Swell storefront under the "Storefront" section. This is where you can edit the design of your website, update your navigation menu, connect a custom domain, and much more.

Here are the steps you can take to complete your storefront before launching.

Click the “Storefront” drop-down menu from the Swell sidebar to display the above settings.

Customizing your theme

After activating your theme, you can customize your storefront. Click the “Customize” button on the top right of the storefront page.

Styling your theme

You can change colors, buttons, fonts, and many other settings in Swell's theme. Change your store's appearance by clicking "Design and global settings".

Styling

Under "Style", you can set up body, buttons and background colors. Click on the field you want to change from preset color or create your own. You can also change the color's opacity if needed.

You can also customize your font and font size from the drop-down menu.

The header is an important component of your online store. It’s the first area that users see, and can be used to display promotions, branding, and main navigation. Under Design & global settings, hit “Header” from the sidebar section.

These are the different components you'll be able to customize:

Upload your logo and favicon by clicking "Add image" or drag & drop your file. You can change your height's logo in order to better fit header.

Enabling the Promo bar

Click Show Promo bar to enable it. You will be able to define the text and hyperlink.

Navigation menu

The navigation menu for your store can be defined through the Header settings. Click on Edit menu to modify your settings or Switch to a pre-existing menu.

The following pop-up will appear:

You are able to group your menu items in different clusters, dependent of their hierarchy and relevance.

The footer of your Swell store is equally as important as your header. You can use the footer to provide customers with more information about your store or products and invite them to follow you on social media.

Click the “Footer” button from the sidebar to begin editing it.

The first two options you can enable are to display your latest blog posts and a footer menu.

You can choose the exact menu to display by clicking the blue “Select menu” button and choosing one from the popup window.

You can also opt to display social icons, payment methods, contact info, and a newsletter signup. 

Homepage

You can edit the homepage of your Swell store to display specific sections, sliders, featured categories, and more. Click the “Home page” button to begin.

The sections that appear on the homepage can be changed by hitting the drop-down menu and choosing one of the options.

Featured categories are an effective way to display popular products. Change the number of rows and products per row by selecting either drop-down menu.

Product page

You can begin editing the product page by selecting the “Product page” button.

There are several options you can enable or disable from this menu. The first of which is to display quantity input. This changes whether or not customers can edit the quantity of the products they are purchasing. If you do not sell more than one item per order, you can safely disable this.

Both the image zoom and thumbnail position can also be managed from their drop-down menus.

If you wish to center the product description, show it below the images, display related products, or promote customer reviews, enable those options accordingly.

Category page

The category page is where you can organize all products by category for browsing ease. You can customize how the category page looks by selecting the "Category page" from the storefront sidebar.

Edit the number of products per row and how many rows are displayed by picking a number from their drop-down menus.

Cart page

The cart page is where customers will see line items, quantity, and other crucial information before checking out. You can optimize it by clicking the “Cart page” from the sidebar.

You can disable or enable the ability to keep customers on the page when they add a product to cart or forward them to the cart page.

Social media

You can connect your social accounts from the “Social media” tab so customers can follow you.

Enter the URL of your social accounts in the appropriate fields.

You can also enable social sharing by choosing any of the options under "Social sharing."

Checkout page

You can customize your store's checkout page by navigating to the "Checkout" portion of the Storefront settings.

You can include custom images in the header, content area, and cart area by clicking the "Upload image" button.

You can also customize the fonts and colors used on the checkout page.

Click the save button to publish any changes you've made.

Did this answer your question?