Editing Main Styles

Your store template's main styles can be edited at any time. The editable main styles include the following:

Logo
Favicon image
Product thumbnail aspect ratio
Checkout button color
Contact us button color
Add to cart button text
Add to cart button color
Quantity selector on product page
Number of rows on the catalog of collections
Number of rows on a collection page
Number of rows for related items
Number of rows on a blog posts page
Primary theme accent color
Featured collection on home page heading
Featured collection on home page

To start editing the main styles, on the navigation bar of your admin panel, click CMS, then Main styles, then click the Edit link on the All styles row.

❗️

DO NOT edit the Name and the URL & Handle fields as this will break your store's template.

Logo

To upload a custom logo for your store, just drag and drop a JPG, GIF or PNG file into the logo drop area.

Alternatively, click the Upload button, then select and upload a logo from your computer.

Favicon Image

To upload a custom favicon for your store, just drag and drop a JPG, GIF or PNG file into the Favicon image drop area.

Alternatively, click the Upload button, then select and upload the favicon image from your computer.

Product Thumbnail Aspect Ratio

By default, the product thumbnail's aspect ratio is set to Smart crop. You can also set the aspect ratio for your store's product thumbnails to either Wide or Tall.

Checkout Button Color

To set the color of the checkout button on your shopping cart, click the box on the left to bring up a color spectrum from which you can select your preferred checkout button color.

Alternatively, and if you know the hex color code for your preferred checkout button color, enter it on the box to the right.

Contact Us Button Color

To set the color of the Submit button on your store's Contact Us page, click the box on the left to bring up a color spectrum from which you can select your preferred Contact Us button color.

Alternatively, and if you know the hex color code for your preferred Contact Us button color, enter it on the box to the right.

Add to Cart Button Text

Enter the text you want to display on the Add to Cart button on your store's product pages.

Add to Cart Button Color

To set the color of the Add to Cart button on your store's Product pages, click the box on the left to bring up a color spectrum from which you can select your preferred button color.

Alternatively, and if you know the hex color code for your preferred Add to Cart button color, enter it on the box to the right.

Quantity selector on product page

Toggling this button ON displays a quantity selector on your store's product pages. The reverse is true if you toggle the button OFF.

Number of rows on the catalog of collections

This sets the number of rows displayed on a single page of your catalog of collections. For example, setting this number to 4 means that four (4) collections will be displayed on each page of your collections catalog.

Number of rows on a collection page

This sets the number of product rows displayed on a single collections page. For example, setting this number to 10 means that 10 products will be displayed on each collections page.

Number of rows for related items

This sets the number of related items displayed on a Products page. For example, setting this number to 4 means that four related items, at most, will be displayed on any of your product pages.

Number of rows on a blog posts page

This sets the number of posts displayed on a Blog Posts page. For example, setting this number to 4 means that four blog posts, at most, will be displayed on each Blog Posts page. If you have five blog posts so far, you will have four blog posts on the first Blog Posts page, and another blog post on the next Blog Posts page.

Primary theme accent color

This controls the main color that is used to accent different elements in your store's theme.

Click the box on the left to bring up a color spectrum from which you can select your preferred primary theme accent color.

Alternatively, and if you know the hex color code for your preferred primary theme accent color, enter it on the box to the right.

Featured collection on home page heading

This sets the heading for the featured collection on your home page. For example, setting this to Featured Products means that the featured collection on your home page will be shown under a Featured Products heading.

Featured collection on home page

To set the featured collection on your home page, enter the URL and Handle of the collection here.