Other theme settings
If you're unsure about accessing the theme settings, please refer to the overview for guidance.
Additionally, for a more in-depth understanding of typography customization and color customization within the theme, we offer two dedicated articles.
In this article, we aim to provide you with a comprehensive list of options, allowing you to customize various aspects of your online store according to your unique preferences. Below is a concise overview of some additional settings available:
Layout Settings
When customizing the overall layout of your website, you have the ability to adjust parameters such as page width, page padding, and mobile page padding. Let's delve into the concept of padding:
Padding: Padding refers to the space between the content (text, images, etc.) and the border of an element. In the context of webpage layout, it specifically pertains to the space inside a container or a section, creating distance between the content and the outer edges of that container.
When you customize the padding for a webpage, you're essentially determining the amount of space between the content and the edges of the container or the browser window. This can have a significant impact on the visual presentation and user experience
Breadcrumbs
Control the display and style of breadcrumbs, providing visitors with an easy-to-follow navigation path through your website.
Example of breadcrumbs
Product Labels
Configure labels for products to highlight new arrivals.
Setting the Duration for New Products:
- Once you've selected the "New" label, you may have an additional setting to specify the number of days a product remains labeled as new.
Adjust the number of days based on your preference. For example, if you set it to 7 days, any product added within the last week will be labeled as new.
Product item
You can see an example of a product item below. The product items appear on the collection pages and in other sections that display products in the same form.
In the Theme settings subsection, you have the ability to personalize various elements. One such customization involves toggling the complex URL option. When activated, this feature adjusts the product URL based on the associated collection, offering a contextual structure. For instance, if you're browsing the Accessories collection and encounter the product "Sophia Hat," with this setting enabled, clicking on the product will lead to a URL like /collections/accessories/products/sophia-hat instead of the default /products/sophia-hat.
The following three settings pertain to the visual style of product items. You can decide whether to autoplay the first video, include borders around the product items, and display color swatches,
Color swatches variants
Swatches serve as miniature representations showcasing the colors or textures of a product, assisting customers in evaluating and selecting their preferred options before completing a purchase. In the initial configuration, it's essential to specify the option name (from the product administration page) for which you wish to generate color swatches. For example, Color in the picture below.
If you have your store in multiple languages, you will need to make sure that all those translations are also added in the input below. Example:
In the next setting, named Configuration, you will add all Color names and their assigned color hex.
Under the format label:color. For example
The next setting lets you configure the style of your swatches. They can be either text, Shatch color from the list mentioned above or the variant image. To use an image, upload an image with the file name matching the color name and spaces replaced by hyphens. E.g. for 'Sandy Floral', upload 'sandy-floral'.
Share Buttons
Incorporate social media share buttons to facilitate customers in effortlessly sharing product details or their shopping experiences on their preferred platforms. You have the flexibility to activate the share group option on both article and product pages. Within this subsection, you can toggle the buttons on or off for each platform as per your preference.
Buttons
Customize the appearance and style of buttons throughout your website, ensuring a cohesive and visually pleasing design. You can adjust the opacity of the border, the corner radius and the lateral spacings. You can also set the style of the buttons and links, choosing between Capitalize, Uppercase, Lowercase and default.
Input Style
Tailor the appearance of input fields, creating a consistent and user-friendly interface for forms. You can update the border opacity, the corner radius, and the lateral spacing for inputs. This will affect the inputs in forms such as login, register, contact, and subscribe to the newsletter.
Media Settings
Adjust the border radius of all media inside the website.
Social Media Links
Add and manage social media links in the footer, promoting seamless integration with your brand's social presence.
Search behavior
Predictive search is an online search approach that aims at anticipating the search needs of a user, by making suggestions related to their queries as they type in a search bar. You can enable it or disable it from the switcher below. If you want you can display some products as recenly viewed products in the search bar, you can add a menu as suggested search list and you can filter the products by tags, type or vendor.
Favicon
A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a web page. Short for “favorite icon,”' favicons are commonly displayed on tabs at the top of a web browser, but they're also found on your browser's bookmark bar, history and in search results, alongside the page url. You can change your favicon in the image picker below.
Cart Type
Customize the appearance and functionality of the shopping cart, including its layout and interaction style.
These settings collectively provide you with a comprehensive toolkit to shape the visual and functional aspects of your online store. By fine-tuning these elements, you can create a unique and tailored user experience that aligns with your brand identity and engages your audience effectively.
In cart, you can add a free shipping notice. Enter minimum order amount(s) to qualify for free shipping (one per line). Format instructions and examples below.
EC:USD:120 = $120 USD for Ecuador.
USD:50 = $50 USD for any country without an individual amount specified.
Country specific amounts MUST COME BEFORE general currency amounts.
Currency code reference Country code reference
Other settings for the cart include disabling enable vendor and cart note. When the cart is empty you can add a collection that will be visible when the cart drawer is empty. For that products, you can choose the desired image aspect ratio.
Drawer settings:
Another drawer in the theme is the quick shop drawer, in the tabs on the product page you can choose to put the extra information in a drawer, including pick-up availability details. For these drawers and the cart drawer itself, you can customize the Heading style and fill.
Advanced
You can enable or disable the prefetching option. Prefetching loads pages in the background to improve the speed of your store. Learn more. You can enable or disable the image loading animation,
images will fade in as they load. A 20px image is loaded and blurred before the actual image to create a smooth transition.
Custom CSS
Lastly, you can add some custom CSS that will apply globally
