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!



1.png

 

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. 



2.png

 

Guidelines for Webstore Images

 

The Webstore Design tab is where you'll be uploading images to your webstore. 

 

Images must be in .jpg or .png format. Other file types are not compatible. Try to keep web images around 1MB or less. Large files can negatively impact webstore load times.

 

The table below outlines 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.

 

3.png

 

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.

 

4.webp

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. 

 

5.png

 

Under Icons, you can choose the style of icons used to display the cart (shopping bag), the search bar (magnifying glass), and the exit button (X).

 

6.png

 

The last section under Branding is where you will upload your Favicon. A favicon is a small pixel icon that will show on the tab that your webstore is on.

mceclip2.png

You can upload the image for your favicon here and add a title, caption, and alt-text to it.

 

 

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.

 

7.png

 

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.

 

8.png

 

Navigation

 

9.png

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.

 

10.png

 

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.

 

11.png

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.

 

12.png

 

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 (Facebook, Instagram, Twitter, & TikTok), and detail how shoppers can get in touch with you. Click each of the sections to add links and text.

 

webstorefooter.png

 

Product Card

 

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.

 

14.png

 

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.

 

15.png

 

Email Capture Popup

 

In the Email Capture Popup section, you can turn on and customize a popup that will prompt webstore visitors to join your email marketing list.  

 

16.png

 

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

 

Collections & Search Results

In Collections & Search Results sections, you will determine whether or not to display sorting and filtering options. By default, both options are enabled and will appear on every page featuring a collection. If disabled, they will be hidden from your webstore.

 

mceclip2.png

 

 

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. 

 

17.png

 

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

 

18.png

 

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).

 

19.png

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

 

20.png

 

Featured Collection

 

21.png

 

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.

 

22.png

Slideshow

 

23.png

 

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. 

 

24.png

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

 

25.png

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.

26.png

 

Promotional Block

 

27.png

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

 

28.png

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

 

29.png

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.

 

30.png

Live Replays

mceclip0.png

The Live Replays section will allow you to showcase thumbnails of all past live sales so shoppers can easily find them and "shop the replay".

Please note that Live Replays must be published to your webstore in order for them to appear in this section. You can learn more about how Live Replays work and how to publish and manage them here.


 

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. 

Was this article helpful?
2 out of 3 found this helpful