Used for the accent line in the header and footer and for the color of the accent icons inside the accent boxes (the icons boxes that appear everywhere there's an input, variant selectors, form, cart, etc).
Used for buttons, inputs, and accent bars (the bars that appear behind variant inputs, forms, header bars).
Buttons text color
Used for the text inside buttons and inputs (when customizing make sure you pick a color with enough contrast to the primary color).
Used for all the text on the page beside buttons and inputs.
Used for the text inside sections' title bars, and headings in general.
Used for text everywhere else.
Make links bold
Makes all the links on the page bold, including the navigation and menus.
Make links uppercase
Makes all the links on the page uppercase.
Show link underline
Controls when the underline appears on links, either is always visible or only shown when a link is being hovered on.
Enable header shadow
Enables the shadow at the bottom of the header.
Enable footer shadow
Enables the shadow at the top of the footer.
Enable shadows in sections
Enables shadows for content containers, images, banners and title bars throughout the theme's sections.
Enable shadows in buttons
Enables shadows in buttons, both when active and inactive.
Enable shadows in inputs
Enables the inner shadows for inputs (newsletter, account pages, comments).
Buttons and inputs
Controls how the corners of the buttons are styled throughout the theme.
Controls how the corners of the inputs are styled throughout the theme.
Make buttons uppercase
Controls weather or not the text inside buttons is capitalized or normal.
Controls whether or not the search button appears in the header.
Enable search suggestions
If search suggestions are enabled then a modal is used and users can search from any page without the need to go to the search page, when search suggestions are disabled the users are taken directly to the search page when clicking the button.
Suggestions per type
Controls how many suggestions of each type is shown, for example: If 5 is chosen, the users will see a maximum of 5 results from each type, product, page, etc (if those search suggestions are enabled).
Show products in search suggestions
Controls whether or not products will appear in the search suggestions.
Show collections in search suggestions
Controls whether or not collections will appear in the search suggestions.
Show articles in search suggestions
Controls whether or not articles will appear in the search suggestions.
Show pages in search suggestions
Controls whether or not pages will appear in the search suggestions.
Controls how product images appear, you can force them all to be in portrait, landscape or square, this way the grid will be even, or you can choose auto and the images will retain their aspect ratio, but the grid will not be even (choose what best suits the design you're going for and that best fits your images).
Controls whether or not the vendor (Brand) appears on products
Enables or disables the filter functionality and modal on collections pages and the search page that lets users better search for products depending on the options you provide (size, color, price, custom filters, etc). Add storefront filtering (Shopify)
Enables or disables the sorting functionality on collection pages and the search page.
Filter modal visibility
Choose whether or not the filters are visible when the page loads or users need to click the filter button first (The filters are always hidden on mobile).
Products grid gap
Controls the distance between rows and columns on product grids.
Products border radius
Controls how rounded the corners of product cards are.
Distance between image and product info
Controls the distance between the product image and the product description on product cards.
Disables the shadows on product cards.
Enable cart note
If cart note is enabled customers will be able to leave extra details for their order.
Shows vendor(Brand) on products inside the cart.
Here you can add all of your social media links that are used to display a link in the footer's social media block.
Accent box style
Controls the appearance of the accent boxes (the icons boxes that appear everywhere there's an input, variant selectors, form, cart, etc).
This is the little icon that appears in your browsers tab along with the title of the page you're on.
How to setup
In order to turn a product option into a color swatch you just need to add the color value separated by a hyphen to the color list. Like so Blue-#2e82ff. You can have as many color swatches as you want, just make sure to separate each color value with a comma, like so pink-#ff1f66,blue-#388bff,green-#65db02,orange-#f28a29,white-#d9d9d9. Capitalization does not matter, so if you have a product with a option Blue, you can add the color in lowercase blue-#388bff and vice-versa.
Enable color swatches
When color swatches are enabled, color swatch button will appear on the product page for the options that you added a color to, when disabled normal button with just the name of the color will be used.
Color swatches style
The style of the color swatch button.
These are settings that you will find on almost every section.
Show header bar
Displays a bar at the top of the section that holds a title, in case you need to give more context tot the section or simply give a title to the section.
The text that appears inside the title bar.
Center header bar text
Centers the text inside the header bar.
How wide the section can be on bigger screens, adjust depending on the feel you're going for, you can have all the sections be the same width or make some section wider (Every section has equal width on mobile).
Choose the blog that you want to display articles from.
Displays tags on the blog articles, if it has any.
Displays the name of the author on the blog articles.
Displays the date at which the article was posted.
Controls how many articles from the blog you want to display in that section.
make images square
Forces all images in the displayed collection to have the same ratio, when disabled the images keep their aspect ratio.
Displays the selected collection.
Used to insert custom liquid code into the page. Liquid reference (Shopify)
Used for collecting customer email addresses.
Used as a title inside the section.
Used to add text into the section.
Displays the email form used for collecting customer addresses.
Select a collection from which to display products.
Show collection banner
Makes the first card to display the collection info and image, so users can navigate to that collection.
Make collection banner image same ratio as products
Makes the image card that displays the collection to be the same ratio as the product images (the value selected inside the grid settings for product image aspect ratio).
How many products to display from the selected collection.
Used to display a product along with it's options so that the users can quickly add it to their cart.
Displays the product title, price and description.
Displays the different options of the product (if any) so the users can select different variants.
Displays the quantity inputs for the product.
Displays the add to cart button and optionally the dynamic checkout buttons. Dynamic checkout buttons (Shopify)
Displays information regarding the pickup availability of local stores (if any). Local pickup for online orders
Image with text
Displays one or two images with optional links and description.
In case there are two images choose whether or not you want them to be the same size, or let them keep their aspect.
Make descriptions boxes the same height
In case one of the images descriptions has longer text, you can choose to make both containers the same size.
Render a image and optionally a link to redirect customers to a page and a description (Can be used to redirect customers to a product, article, collection, etc).
Used for writing paragraphs.
Paragraph of text that can include links, bold and italic text.
Renders one image with an optional link at a time.
Sets how tall you want the slides to be, adjust depending on your images.
Controls whether or not the sides changes the images automatically.
Change slides every
Controls how often the slides change.
Controls the type of effect slides get when they change.
Transition effect duration
Controls how long the transition effect lasts when the slides change.
An image of the slider with an optional link.
Video url (from local files)
Use this field to link to a file from your shopify admin. Uploading and managing files
Shows pause/play and full screen buttons (Depending on the type of video and how you use this section, you may want to give the customers the ability to go back and forth and pause the video, or to just use it decoratively).
Controls if the video will play by itself without user interaction (if you have controls disabled, you need to enable autoplay, otherwise the customers won't be able to play the vide).
Video url (external)
Use this to link to a video from Youtube or Vimeo.