Settings
Colors
Accent color
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).
Primary color
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).
Text color
Used for all the text on the page beside buttons and inputs.
Page background
Typography
Headings font
Used for the text inside sections' title bars, and headings in general.
Body font
Used for text everywhere else.
Link style
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.
Shadows
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 style
Controls how the corners of the buttons are styled throughout the theme.
Inputs style
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.
Search Behavior
Enable search
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.
Grid
Image ratio
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).
Show vendor
Controls whether or not the vendor (Brand) appears on products
Enable filtering
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)
Enable sorting
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.
Disable shadows
Disables the shadows on product cards.
Cart
Enable cart note
If cart note is enabled customers will be able to leave extra details for their order.
Show vendor
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 boxes
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).
Favicon
This is the little icon that appears in your browsers tab along with the title of the page you're on.
Color swatches
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.
Sections
Universal settings
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.
Heading
The text that appears inside the title bar.
Center header bar text
Centers the text inside the header bar.
Maximum width
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).
Blog posts
Section settings
Blog
Choose the blog that you want to display articles from.
Show tags
Displays tags on the blog articles, if it has any.
Show author
Displays the name of the author on the blog articles.
Show date
Displays the date at which the article was posted.
Articles limit
Controls how many articles from the blog you want to display in that section.
Collection list
Section settings
make images square
Forces all images in the displayed collection to have the same ratio, when disabled the images keep their aspect ratio.
Section blocks
Collection
Displays the selected collection.
Custom Liquid
Used to insert custom liquid code into the page. Liquid reference (Shopify)
Email signup
Used for collecting customer email addresses.
Section blocks.
Heading
Used as a title inside the section.
Text
Used to add text into the section.
Email form
Displays the email form used for collecting customer addresses.
Featured collection
Section settings
Collection
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).
Products limit
How many products to display from the selected collection.
Featured product
Used to display a product along with it's options so that the users can quickly add it to their cart.
Section blocks.
Product info
Displays the product title, price and description.
Variant picker
Displays the different options of the product (if any) so the users can select different variants.
Quantity selectors
Displays the quantity inputs for the product.
Buy buttons
Displays the add to cart button and optionally the dynamic checkout buttons. Dynamic checkout buttons (Shopify)
Pickup availability
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.
Section settings
Image aspect
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.
Section Blocks
Image
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).
Rich text
Used for writing paragraphs.
Section Blocks
Title
Text
Paragraph of text that can include links, bold and italic text.
Slideshow
Renders one image with an optional link at a time.
Section settings
Image height
Sets how tall you want the slides to be, adjust depending on your images.
Autoplay
Controls whether or not the sides changes the images automatically.
Change slides every
Controls how often the slides change.
Transition effect
Controls the type of effect slides get when they change.
Transition effect duration
Controls how long the transition effect lasts when the slides change.
Section Blocks
Image
An image of the slider with an optional link.
Video
Section settings
Video url (from local files)
Use this field to link to a file from your shopify admin. Uploading and managing files
Show controls
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).
Autoplay
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.
