Designing Your Webstore

The webstore builder makes it easy to customize the look and layout of your CommentStore webstore.

This article covers the design and customization options for the new CommentSold webstore. Click here for resources on the Classic Webstore.

 

Watch the video below or read on to learn more!

 

 

This Article Covers:

Overview of the Webstore Design Tab

 

The Webstore Design tab is where you will customize the look and layout of the new webstore. If you have an existing webstore with CommentSold, you will see this tab in the lefthand menu of your CommentSold dashboard. If you are not using the CommentSold webstore, you will first need to click to Enable Webstore from within your Setup tab. 

 

Note: When you first visit this page from within your dashboard, you will see a graphic introducing you to the new webstore in place of the live preview. Click “Close” at the top right to dismiss.

 

Across the top of the Webstore Design page, you will see options for previewing the webstore as it will appear on desktop and on mobile, a link to view your live webstore, and a button to Publish the webstore. You will want to be sure you have visited all sections of the builder prior to publishing!



Screen Shot 2021-05-03 at 9.27.24 PM

 

Once you begin editing your webstore, an “Undo” button will appear at the top left of the screen. This button will undo the most recent action in the builder.

 

Next, you will see a menu on the left and a live preview of your webstore to the right. 



Screen Shot 2021-05-03 at 9.33.36 PM

Guidelines for Webstore Images

The Webstore Design tab is where you'll be uploading images to your webstore. Here's a quick look at our guidelines and recommendations for webstore images. 

  • Format: Images must be in .jpg or .png format. Other file types are not compatible.
  • File Size: Try to keep web images around 1MB or less. Large files can affect webstore load times.

The chart below will outline the types of images that will live on your webstore, as well as our general recommendations for image sizing. 

Image Type

Recommended Image Size

Logo

1000 px width / 500 px height minimum

Slideshow Images

(formerly known as “Banners”)

2000px width / 1000px height minimum

Promotional Block Images 

(formerly known as “Adverts”)

Promotional blocks can feature square or rectangular images.

Square Images: 410px width / 410px height minimum
Rectangular Images: 410px width /615px height minimum

Product Images

630 px width / 940px height minimum

Customization

 

The first section in the left menu is for Customization. Clicking on an item will open customization options.

 

Screen Shot 2021-05-03 at 9.14.22 PM

Branding

 

At the top of your Template Tools is the option to edit your webstore Branding. Here you will choose your webstore’s colors, button preferences, and icon style. As you make changes, you will see them reflected in the live preview to the right.

 

Hover above the “i” icon next to each of the color categories to see what items that color choice will apply to.

 

The Color Palettes are pre-selected Primary, Secondary, and Announcement Banner Colors that coordinate well together. You can use one of these options as is, or as a starting point for customization. These are not required; if you have specific brand colors you would like to use, you can enter the hex codes.

 

Screen Shot 2021-05-03 at 9.34.47 PM

In the Corner Radius section, you will choose how you would like the edges of your buttons, images, and product badges to appear. You can choose to have sharp corners or various degrees of rounding. 

 

 

The last section under Branding is for Icons. Here, you can choose between three styles for the shopping bag, search, and “X” (close) icons.

 

 

Fonts

 

In the Fonts section of the Customization menu, you will see recommended font pairings. You can select one of these options or select “Custom Fonts” to choose from any Google Font for your Heading and Body Fonts.

 

Header

 

In the Header section, you will upload your shop’s logo and select whether you would like it to display in the center or to the left in your webstore header.

 

 

Navigation

The Navigation section is where you will build the navigation menu for your webstore. 

 

Under Navigation Items, you will add all Internal and External Links that you would like to include in your navigation menu. For Internal Links, you can search for collections or pages or locate them in the dropdown menu. Click the link to “Create new page or collection” if the item you would like to link to has not yet been created. Learn more about managing your webstore content.

 

External Links allow you to link to any website from your navigation menu. The “Link Title” is what your shoppers will see and click on to visit the site, and the “Link URL” is the destination you would like to direct to. 

 

Once you have entered all of the Navigation Items you would like to include in your menu, you will arrange them in the Navigation Order section. Drag and drop the main Navigation Items, and click the arrow icons to create sub-categories.

 

 

You can have up to three levels of navigation. The main category will display in the navigation menu, and the sub-categories will display in a dropdown menu.

 

In the example above, Shirts is the main category, Long Sleeved is the sub-category, and Cold Shoulder Tops is a secondary sub-category nested underneath that.

 

Announcement Banner

 

The Announcement Banner allows you to prominently display a message to all of your webstore visitors across the top of your home page.

 

If you would like the Announcement Banner active on your webstore, enter the desired text in the Content box and select the Internal Link that shoppers will be directed to if they click the banner text (optional). Be sure to toggle the banner on if you’re ready to set it live.

 

Footer

 

In the Footer section, you will customize the content you would like displayed in the three footer columns, link to your social media channels, and detail how shoppers can get in touch with you. Click each of the sections to add links and text.

 

 

The Product Card section allows you to set your preference for how product images are displayed on product pages. You will set an Image Aspect Ratio and a preference for Image Resizing.

 

If you select "Fit" under Image Resizing, the entire product image will be shown. This may cause white space to be displayed around the image in order to fit it to the chosen Image Aspect Ratio.

 

If you select "Crop" under Image Resizing, a product image will be cropped to fit the chosen Image Aspect Ratio.

 

You will also be able to enable or disable Suggested Products from the Product Card section. When enabled, there will be a Suggested Products section at the bottom of product detail pages. The suggested products will be from the same Collection as the product a shopper is viewing.

 

 

Email Capture Popup

 

The last section for Customization is the Email Capture Popup. If you would like shoppers to be prompted to enter their email addresses to be added to your email marketing list, you can enable the popup and customize the messaging here.

 

 

Note: Shoppers will see the email capture popup 5 seconds into a new session with your webstore.

 

 

Home Page Sections

 

The next section of the Webstore Design tab is for Home Page Sections. There are several types of content blocks that can be added and arranged on your home page. 

 

Screen Shot 2021-05-03 at 9.15.19 PM

Click “Add Section” and select the type of content you would like to add. Click the edit icon next to added sections to edit the content.

 

When adding a section, you will be able to choose from:

  • Image With Text
  • Featured Collection
  • Slideshow
  • Promotional Block

Image With Text

 

 

An Image With Text section can be used to call attention to a specific product or webstore page. You will need to add an Image, a Title (“Dress” as pictured above), Text (“Pink dress” as pictured above), Internal Link, and Button Text (“View” as pictured above).

 

You will also set the ratio of the image to the other items and the position of the image (right or left).

 

 

Featured Collection

 

 

Featured Collections allow you to show a variety of products from a particular collection in a section on your home page.

 

Select the Collection you would like to feature, enter a Heading (“Shirts” as pictured above), and select “Grid” or “Slider” to determine how products are displayed in the section.

 

Shoppers will be able to open products from this section, either in Quickview or the full product page.

 

Slideshow

 

 

The Slideshow section is commonly used as the first section on a webstore home page. The slideshow features full-width images along with text and buttons. 

 

Under Slideshow Content, you can view, edit, and add slideshow items. When you click to add or edit, you will see expanded options.

 

You will see a section beneath Slideshow Content that allows you to enable or disable Autoplay for the slideshow. If enabled, you can set the speed at which you would like for content to scroll.

 

 

Promotional Block

 

Promotional Blocks allow you to highlight multiple specific collections or pages (“Adverts”). You can view, edit, and add Adverts from a Promotional Block section.

 

When adding or editing content, you can upload a photo, enter an Advert Title, and set the desired Internal Link.

 

Under Layout Controls, you can select to have Adverts displayed in a Grid, Fancy Grid, or Carousel. You can also set the Image Aspect Ratio for the Adverts.

 

 


 

Once all sections have been added, you can drag and drop them to reorder them on your home page.

 

When you have completed all sections of Customization and added and arranged your Home Page Sections, preview your webstore on desktop and mobile. Once you are satisfied, you are ready to publish! Click the Publish button at the top right of the builder to set your webstore live.

 

You can revisit the Webstore Design tab to make changes to your webstore at any time!

 

Note: If you were previously using the Classic Webstore, you will be able to revert at any time from the Webstore Content tab. Your webstore will be reverted to where it was just prior to migration.