Introducing the new and modern Shopify theme - Gondric designed with an image-focused approach. Our theme prioritizes simplicity and ease of use, allowing you to showcase your products and services with stunning visuals that are sure to captivate your audience. The modern and minimalist design of the theme ensures that your brand is always front and center, making it the perfect choice for businesses looking to make a lasting impression. Start showcasing your brand today with the new and improved Shopify theme Gondric!
To better illustrate this theme, we have created three demo stores.
IMPORTANT Storefrond password: 1
Gondric (default)
This guide will walk you through the process of editing the various settings and sections, giving you the ability to personalize your shop to perfectly match your brand. Whether you're a seasoned e-commerce expert or just starting out, this guide will provide you with all the tools and information you need to create a truly unique and engaging online experience for your customers.
You can use theme settings to make changes to your online store's typography, colors, layout, social media links and more. When you make changes to your theme settings, the changes apply to your entire online store.
For more information about theme settings refer to Theme Settings.
This setting enables you to modify the colors throughout the Gondric theme.
There are 3 main categories of color settings - General, Header and Footer.
General:
• Background (background color of the entire theme)
• Text (text color of the entire theme)
• Paragraph (text color of paragraph elements)
• Highlight color (color for subheading in Collection slideshow section, cart labels, compare at prices, pagination and heading in About details section)
• Error (color for all of the errors)
• Success (color for success text)
• Placeholder background (color for placeholder background and lazy loading images)
• Cart button and dot background (background color for checkout button and cart dot in the header)
• Cart button and dot text (text color for checkout button and cart dot text in the header)
• Address delete button background (address delete button background color on Customer addresses page)
• Address delete button border (address delete button border color on Customer addresses page)
• Address delete button text (address delete button text color on Customer addresses page)
Header:
• Background (background color for header and header dropdowns)
• Text (text color for header text - this includes all of the links, icons and dropdown text)
• Borders (color for borders in header and dropdown borders)
Footer:
• Background (background color for the footer)
• Text (color for text, links, icons and newsletter)
• Borders (color for borders in footer)
Note: Some sections have their own color settings which supersede the theme's color settings.
This setting enables you to modify the text throughout the Gondric theme. In Typography setting you can change the font, font size and line height of your text.
Uppercased text:
Makes all text uppercased except paragraphs.
Headings:
Use this to modify the font family, size, and line height of all headings, which range from H1 to H6 (with H1 being the largest and H6 being the smallest). The font size setting is specifically for the H1 heading, while the rest are gradually 10% smaller.
Body text:
Use this to modify the font family, size, and line height of all text throughout the theme except paragraph and headings. There are also 4 different text sizes which you can use in various sections: Large text, Big text, Medium text and Small text.
Paragraph:
Use this to modify the font family, size, and line height of all paragraphs throughout the theme.
Note: Some sections have their own typography settings which supersede the theme's color settings.
This setting enables you to modify the page, section, and grid spacing throughout the Gondric theme.
Page side padding:
Side padding for the entire template.
Section vertical padding:
Each section has its own settings for top and bottom padding but Section vertical padding enables you to add universal spacing which applies to every section.
Grid:
Spacing between items in grid (products grid, featured blog grid etc.).
Page side padding (red), Section vertical padding (blue), Grid (green)
Note: Most of the sections have padding settings which adds padding on top of the Section vertical padding.
This setting enables you to modify the border thickness throughout the Gondric theme.
Thick border:
Border thickness in Hero section.
Regular border:
Border thickness in Featured collection, Image with text, Footer, About details, Animated button, Collection list, Collection slideshow, Featured blog etc.
Thin border:
Border thickness in Customer order, Product page, Pickup availability etc.
This setting enables you to modify the discount badge icon throughout the Gondric theme. Discount badge is an icon that can be displayed on a product thumbnail when it is on sale.
Show discount badge when on sale:
Shows or hides the discount icon with the percentage number.
Discount badge font size:
The font size of the text inside the discount badge.
Discount badge position:
There are 2 options (4 positions in total) for the discount badge position. You can set the vertical position (top, bottom) and horizontal positino (left, right)
Discount badge animation:
You can set the discount badge animation. The badge rotates clockwise with a speed you determine. The animation speed will apply only if the Show discount badge animation is checked.
This setting enables you to modify the currency format for your products.
Show currency codes:
If the 'Show Currency Codes' option is enabled, the currency codes will be displayed alongside all prices. For example, with this option enabled, prices would be displayed as '$49.99 USD', and with it disabled, prices would be displayed as simply '$49.99'.
Note: Cart and checkout prices always show currency codes.
This setting enables you to modify the cart for your store.
Cart type:
The Gondric theme offers three different types of cart: Drawer, Pop-up Notification, and Page. The Drawer Cart is an overlay that can be accessed from any page, not requiring the use of the standard Cart page. The Pop-up Notification is a type of cart that displays a pop-up every time an item is added to the cart. The Page cart type is a standard cart and can be accessed by clicking the cart button. It takes the user to the standard Cart page every time a new item is added.
Cart type: Drawer
Cart type: Popup notification
Cart type: Page
Heading:
Font size and height for 'Your Cart' text with borders on top and bottom.
Cart Item:
Sets the image height of product and its hover animation (on hover in the image scales up and on hover out it scales back down).
Other settings:
You can enable cart notes and show tax included text, vendor and shipping policy.
This setting enables you to modify the search logic for your store. Search can be accessed from any page by clicking the search icon on the Header icon. You can get search results on the spot with Predictive search or you can redirect the user to the Search page.
Enable search:
Enables and displays the search.
Enable predictive search:
Enables predictive search functionality across all pages. Results are displayed as soon as characters are entered into the search box. To see all results, the user can be redirected to the Search page.
Predictive search
Search page
This setting enables you to modify the styles for the following pages: Login, Register, Reset password and Activate account.
Vertical inner padding:
Vertical padding for content between the borders.
Font size:
Font size for the heading (Login, Register etc.)
Show border:
You can show or hide the top and bottom border.
Section padding:
Vertical padding of the entire section.
Vertical inner padding (red), Section padding (green)
This setting enables you to modify the styles for the following pages: Password and Giftcard.
Header:
Controls the logo image and its width. The logo does not include a link to the Home page.
Heading:
Font size for the heading (Password, Opening soon, Your gift card)
This setting enables you to modify the favicon for your store.
Favicon image:
Favicon image (recommended size is 32px x 32px). Favicon is the small image that appears on a website's tab in a web browser window.
Note: For more information about favicon refer to Favicon.
This setting enables you to modify the styles for Checkout page.
Settings:
The checkout settings allow you to customize various elements such as the banner, logo, logo position, typography, colors, and more.
Note: For more information about Checkout styles refer to Checkout.
This setting enables you to add custom CSS that is used throughout the Gondric theme.
Note: For more information about Custom CSS refer to Custom CSS.
This setting enables you to add different theme styles to your store.
With Shopify Editor, you have the advantage of creating multiple instances of your store, each with its own unique style. The Gondric theme, for example, offers three different theme styles: Gondric, Godric (light), and GreenLeaf.
Sections in Shopify are a powerful feature that allows you to customize the look and feel of your store's pages and templates. They allow you to create dynamic, engaging, and highly personalized content without needing to know any code.
Sections are pre-designed blocks of content that you can add, reorder, and customize in the Shopify theme editor. They include features like slideshows, image grids, videos, collections, and more. You can choose from a variety of sections, including header and footer sections, product sections, and collection sections, and you can also create your own custom sections if you have knowledge of Liquid, Shopify's template language.
Using sections, you can create a unique shopping experience for your customers, showcasing your products and collections in a visually appealing way. You can also use sections to add custom content, like FAQs, to your store's pages, making it easy to provide helpful information to your customers.
In short, sections are a flexible and powerful tool that you can use to take your Shopify store to the next level and create an online shopping experience that truly stands out.
Note: For more information about sections and blocks refer to Sections.
The header section is a crucial element that appears on every page of your store and allows customers to easily navigate through it.
Logo:
Controls the logo image and its width. Header logo is shown on every page except Password page and Giftcard page. They are using a logo that is accessible through Theme settings (Utility pages). Default logo is connected to Logo file that is located in Brand assets.
Note: For more information about logo and brand assets refer to Brand assets.
Menu:
Adds a menu (links) that are created in the Navigation.
Note: For more information about navigation refer to Menus and links.
Enable sticky header:
Header is sticky which mean it moves with your current position on the screen. The header is hidden when you are scrolling down and visible when you are scrolling up.
Position links to the left:
Default position of links is to the center. If this option is checked then links are positioned to the left. You can also add left margin to the menu. This applies only to dekstop devices.
Links position: Center
Links position: Left
Country / region selector:
The language and currency of the store are controlled by setting a market in the store settings. You have the option to abbreviate the text, such as changing "United States" to "US". To display different currencies, you need to enable the "Show local currency" option in the store settings.
If the "Show local currency" is unavailable to operate then you need to add Geolocation App to your store. With this app the checkbox should be available. You can remove the Geolocation App afterwards if you do not need it.
Note: For more information about multiple currencies refer to Multiple currencies.
The language selector controls the language of the store. In order for this to work you need to use an app like Shopify Translate & Adapt or you need to provide your own translation.
Note: For more information about languages refer to Store languages.
Section text:
Font size for primary and secondary/nested (dropdown) navigation links.
Link underline:
Link hover in animation. This controls the line thickness and visibility of the animation.
About details section helps you with your store presentation. You can use it to describe your store, your story, your employees and more.
About details:
For the section on desktop, there are two layout options available: centered in a single column or aligned to the left using two columns. The content width can be adjusted to your desired width, and you have the choice to include or exclude top and bottom borders.
Heading:
The heading text, font size, and height are all customizable in this section. If the content is aligned to the left on desktop, you can also enable a sticky heading, which will follow the user's scroll. The color of the heading is controled by Theme settings -> Colors -> Highlight color.
Blocks:
You can add two types of blocks (image, text).
About details example (Gondric)
About details example (Gondric)
About details example (GreenLeaf)
Animated button section is a button that is infinitely moving to the left side.
Animated button:
Controls the text, link, font size, font height, and borders of the button. The animation speed is described in seconds, with a longer duration resulting in a slower animation.
Star:
You can edit the star size and its animation (star rotation).
Animated button example (Gondric)
Announcement bar section is a powerful tool for communicating important messages to your store's visitors. It can be used to highlight promotions, sales, new arrivals, or any other important updates that you want to make sure your customers are aware of.
Announcement bar:
Announcement bar text, font size (Small text, Medium text, Big text, Large text), animation speed. The animation speed is described in seconds, with a longer duration resulting in a slower animation. Announcement bar background color is set to Theme's text color. Announcement bar text color is set to Theme's background color.
Star:
You can edit the star size and its animation (star rotation).
Announcement bar example (Gondric)
Announcement bar example (GreenLeaf)
Article comments is a template section for Blog post page. It is used for submitting and displaying comments. Comments can be disabled, posted automatically or posted after moderation.
Note. For more information about comments refer to managing comments.
Article comments:
Adjusts the section's content width.
Blocks:
Article comments section contains two main blocks: the Comments block, which displays all comments related to the blog post and is lazily loaded using pagination, and the Form block, which allows users to post a comment for the blog post.
Article comments example (Gondric light)
Blog grid is a template section for Blog page containing a grid of blog posts with customization options.
Blog grid:
Posts per page and row with or without excerpt. Posts are lazy loaded using pagination. You can also change the font size of post's title and configure image size and its animation (on hover in image scales up).
Blog grid example (Gondric light)
Blog header is a template section for Blog page containing a prominent heading and an optional first blog post, allowing for greater customization options.
Blog header:
Blog's heading text, font size and height with optional borders.
Blog post:
You can choose to display the first blog post in this section, which is larger and can help draw attention to your content. Please note that this post is only visible on desktop devices. You can customize this post by adjusting the excerpt width, font size, image size, and image hover animation to fit your design preferences.
Blog header example (GreenLeaf)
Blog post section is a template section designed for displaying the content of a single blog post. It includes the blog post title, author, date, image, post content, and social sharing icons.
Section padding:
Padding for this section.
Blocks:
Blog post section contains several block types including Heading, Image (featured image of the post), Metadata (blog post author and date), Content, and Social icons for sharing the post on social media platforms like Facebook, Twitter, and Pinterest.
Blog post example (Gondric)
Blog posts section displays a list of your blog posts, including the post title and featured image.
Blog posts:
This allows you to showcase a selected blog and its heading. You can adjust the number of posts displayes per row on desktop devices and the number of rows on desktop devices. On mobile devices, only one post is shown per row.
Image:
Image size and its animation (on hover in image scales up)
Heading:
Heading font size, height and optional borders. Heading is also a link to the blog.
Post title:
Controls the blog's font size.
Additional button:
If the heading link is not intuitive enough you can add an additional button at the end of the section that leads to the blog page.
Blog posts example (Gondric)
Cart is a template section used for Cart page. This section is applicable to 2 cart types: Popup notification and Page.
Section padding:
Cart section vertical padding.
Note: Other cart customization settings can be found at Theme settings -> Cart.
Cart example (Gondric)
Collection header section is a template section for Collection page. It display collection's title, image and description.
Collection header:
Displays collection's heading, image and description with border padding.
Heading:
Heading font size and optional borders.
Description:
Description content width and font size (Moderate text or paragraph).
Image:
Collection's featured image size.
Collection header example (Gondric)
Collection list is a section that displays a list of collections, on your store's homepage or other pages. This allows customers to easily navigate your store and find the products they're interested in.
Collection list:
Collection heading and the number of collections per row can be configured. On desktop, up to three rows can be displayed while only one row is shown on mobile devices.
Image:
Image height and hover animation (hover in scales/zooms the image).
Heading:
Font size and height of the heading with top and bottom border. Subheading's color is set to Highlight color (Theme settings).
Collection text:
The font size of collection text (text below the image). You can choose between Small, Medium, Big or Large text.
Collection list example (Gondric light)
Collection list example (GreenLeaf)
Collection slideshow is a section that provides an interactive and visually appealing way for customers to discover new products. It allows for showcasing various products in a slideshow format, making it easy for shoppers to navigate and find the products they're interested in.
Heading and subheading:
Settings for heading/subheading font size and height with optional top border.
Image:
Primary image size with hover animation (image scales up on hover in).
Price:
You can scale the discount badge icon the way you like it. If the default is too big for this section scale it down.
Slideshow animation:
Slideshow transition can be set to auto which means it will go to the next slide after a specified duration. Animation duration is transition that happens on slide change.
Blocks:
The Collection slideshow section is comprised of a single block type, called "Slide". This section allows you to customize the product, collection link, heading, subheading, font size, and description length. There's also an option to show only the primary image or both images, with the secondary image displayed below the description.
If the slideshow contains only 1 Slide then the navigation arrows and slide transition is disabled.
Collection slideshow example (Gondric) - with 2 product images
Collection slideshow example (Gondric light) - with 1 product image
Collections list page is a template section used for Collection list page. It displays all of the collections and paginates them.
Collections list page:
Number of colections per page. They are paginated and you can set the pagination font size.
Heading:
Collection's heading font size and height with optional borders. Heading is also a link.
Image:
Collection's image size and its animation (on hover in image scales up). Image is also a link.
Additional button:
If heading and image link is not intuitive enough you can add an extra button at the end of each collection item.
Collections list page example (Gondric light)
A section that includes contact form and additional store's information (mail, phone number, address).
Heading:
Heading text, font size, height, border and vertical padding.
Form:
Form width and font size for inputs, text area and button.
Additional information:
With the store information section, you can showcase important details about your store, such as its address, phone number, and email. You can align this information to the right or left and choose to display labels or not. Additionally, you can add a link to your store's location on Google Maps.
Contact form example (GreenLeaf)
A section for custom liquid code (app snippets).
Note: For more information about liquid language refer to Liquid.
Customer account is a template section that is used for Customer account and Customer order pages. These pages are accessed only with user accounts. In order to configure this section you need to create a user account and login. Customer account page shows your order history and your account details.
Note: For more information about user accounts refer to Customer accounts.
Heading:
Heading font size with vertical border and optional borders.
Customer account example (Gondric)
Customer addresses is a template section that is used for Customer addresses page. This page is accessed only with user accounts. In order to configure this section you need to create a user account and login. Customer addresses is a template section that displays the default address and other saved addresses that can be edited or deleted. Additionally, the user can add new addresses.
Note: For more information about user accounts refer to Customer accounts.
Heading:
Heading font size with vertical border and optional borders.
Customer addresses example (Gondric)
Customer addresses example (Gondric) - Adding new address form
Customer login is a template section for Customer login page. All of the settings for this section can be configured in Theme settings -> Customer forms.
Customer login example (Gondric light)
Customer register is a template section for Customer register page. All of the settings for this section can be configured in Theme settings -> Customer forms.
Customer register example (Gondric light)
The FAQ section is a useful tool for answering common questions about your store, products, and services. It allows you to list questions and provide detailed answers in an organized and easily accessible manner. This section helps to improve the customer experience by providing quick and clear information, reducing the need for direct customer support.
FAQ:
Content width of this section for desktop devices.
Heading:
Heading text, font size, optional border and vertical padding.
Blocks:
The FAQ section is designed to provide answers to the most common questions from your customers. Each question and answer pair is represented by a Collapsible row block that can be expanded and contracted for a more user-friendly experience.
Faq example (Gondric light)
Featured collection section showcases a specific collection of your store's products. Customize its style to best highlight your products.
Featured collection:
This allows you to showcase a selected collection and its heading. You can adjust the number of products displayed per row on desktop devices and the number of rows on desktop devices. On mobile devices, only one product is shown per row.
Image:
Image size and its animation (on hover in image scales up).
Heading:
Heading font size, height and optional borders. Heading is also a link to the collection.
Price:
Controls the collection's font size. You can also scale the discount badge icon and remove the compare at price if you don't like it shown in this section.
Additional button:
If the heading link is not intuitive enough you can add an additional button at the end of the section that leads to the collection page.
Featured collection example (Gondric)
Featured collection example (GreenLeaf)
Featured products section displays a select number of products that are prominently featured on the store. This section allows you to choose the specific products you want to showcase and customize the number of products.
Featured products:
Number of products per row on desktop devices. Only one product per row on mobile devices.
Image:
Image size and its animation (on hover in image scales up).
Price:
Controls the collection's font size. You can also scale the discount badge icon and remove the compare at price if you don't like it shown in this section.
Blocks:
You can add one type of block named Featured product. The maximum number of featured products in this section is 3.
Featured products example (Gondric)
Footer section is the bottom section of every page where it displays information such as links to social media profiles, site navigation, copyright information, and contact information. It serves as an important means of providing additional information and helps visitors find what they need quickly and easily.
Footer:
Controls the visibility of payment icons, copyright and top border.
Spacing and padding:
With these options you can set the top margin of the Footer section, side padding and block gap between Blocks.
Blocks:
Footer section is comprised of several block types, each with its own settings. The block types in footer include Text, Line Separator, Menu, Return Button, Newsletter, and Social Icons. The content width of each block type can be adjusted for desktop devices, allowing for customization of the footer section.
Footer example (Gondric)
Footer example (Gondric light)
Footer example (GreenLeaf)
Hero section is a key visual element of a website and is typically the first thing a visitor sees when they land on a page. This section can be used to promote products, highlight promotions, and set the tone for the rest of the website.
Hero:
Padding customization.
Blocks:
Hero section is comprised of two types of blocks: Heading with borders and Single product. These blocks allow you to display your most important product or message front and center for visitors to see.
Hero example (Gondric)
Image banner section allows you to display an image banner with optional text and buttons. This section is ideal for promoting your store's products, services, or sales.
Image:
The image of the Image banner, its height and opacity.
Content:
This setting allows you to move the content to the desired position. You can also reverse the content colors. That means that Background color and Text color are reversed.
Blocks:
The Image Banner section is composed of four optional blocks: Subheading, Heading, Paragraph, and Button. These blocks can be used to create an eye-catching banner to promote a product or offer.
Image banner example (GreenLeaf)
Image banner example (Gondric light)
Image with text section is composed of an image, text blocks including heading, subheading, and a paragraph and a button. This section is designed to showcase an image and accompanying information to highlight a product, feature, or promotion.
Color:
Background color of the Image with text section.
Image:
Controls the image, its size and position.
Content:
Use this to move your content the way you like it.
Blocks:
Includes 4 block types: Subheading, heading, paragraph and a button with link.
Image with text example (Gondric light)
Image with text example (GreenLeaf)
Multicolumn section allows you to display various types of information using card content. This section can be used to showcase your business features, employees, customer testimonials, and much more.
Color:
Background color of multicolumn section.
Content:
This enables customization of the content's layout and appearance. The settings allow you to align the content, specify the number of columns per row, and set the border color.
Image:
Image/Icon size.
Heading:
Heading font size (Small, Moderate, Medium, Big or Large text).
Blocks:
Multicolumn has one type of block: Column.
Multicolumn example (Gondric light)
Multicolumn example (GreenLeaf)
Multicolumn example (GreenLeaf)
Password page is a template section used for Password page that appears when a store owner sets a password to restrict access to their online store. It includes a form for customers to enter the password to gain access to the store. This section is designed to provide a professional and branded experience for customers who are prompted to enter a password to access the store.
All of the settings for this section can be configured in Theme settings -> Customer forms.
Password page example (Gondric light) - with newsletter
Password page example (Gondric light) - with password input
Product grid section displays a grid of products from a collection, with the option to filter and sort them. To ensure fast loading times, the products are paginated. Default product filter only uses Availability and Price. To add filters that you are using on variants you need to include a filtering app.
Note: For more information about product filtering refer to filters.
Product grid:
Number of products per page and row (products are lazy loaded with pagination). You can also show product count, filtering and sorting.
Image:
Product image size with its animation (on hover in scales up).
Price:
Product name and price text font size. You can hide unit prices, compare at prices and scale discount badge icon.
Product grid example (GreenLeaf)
Product Information section displays detailed information about a specific product. This section allows the user to view product details such as the name, description, price, and options (such as size, color, etc.) and more. The user can also view the product media and any additional images that are associated with it. This section is important for customers to understand the product better and make informed purchasing decisions.
Product information:
Enables sticky content on desktop. When you scroll down the text content stays with you.
Media:
Media width and height (left side on desktop by the text content).
Blocks:
This section showcases your product information with various blocks. The "Title with price" block displays the product title and price, with the option to show vendor and tax information. The "Description" block is a rich text field that displays the main text content of your product. The "Variant picker" block displays all product variants. The "Pickup availability" block specifies the pickup availability for each store, which opens as a drawer from the right. The "Quantity selector" allows customers to select multiple instances of a product for faster checkout. The "Buy buttons" block contains add to cart, buy now, and dynamic checkout buttons. The "Social media" block lets customers share the product on Facebook, Twitter, and Pinterest. The section also includes text blocks for additional information, separator blocks, custom liquid blocks for extra code, and collapsible rows for FAQs.
Note: For more information about pickup availability refer to pickup docs, for more information about dynamic checkout buttons refer to dynamic buttons.
Product information example (Gondric light)
Product information example (GreenLeaf)
Product recommendations section displays personalized product recommendations for each customer, based on their recent searches and purchases.
Product recommendations:
Controls the heading and subheading text. You can also set the number of product per row and number of rows.
Heading and subheading:
Heading and subheading font sizes and heights with optional top border.
Price:
Product and price text font size. You can also scale the discount badge icon and hide compare at price if you don't want to show it in this section.
Note: For more information about product recommendation refer to recommendations.
Product recommendations example (GreenLeaf)
Rich text section displays a block of texts including subheading, heading, paragraph and a button with link.
Color:
Background color of Rich text section.
Blocks:
Includes 4 block types: Subheading, heading, paragraph and a button with link.
Search page is a template section used for Search page. It allows users to search for specific content on the store. This section includes a search bar where users can enter keywords or phrases to find relevant content. The search results are displayed on the same page, showing a list of pages, posts, products or any other content related to the search query. The search page also includes filters to refine the search results or sort them by different criteria (applies for products only).
Note: For more information about search refer to Search Theme Settings.
Heading:
Heading font size and height with optional top border.
Search grid:
Items per page and row that are lazily load using pagination. You can also display result count, filtering and sorting (only applies for products).
Image:
Image size and its animation (on hover in image scales up).
Item:
Card text font size. You can also scale the discount badge icon.
Search example (GreenLeaf)
Secondary hero section is a key visual element of a website and is typically the first thing a visitor sees when they land on a page. This section can be used to promote products, highlight promotions, and set the tone for the rest of the website.
Border vertical padding:
Vertical padding between borders.
Heading:
Heading text, font size and optional borders.
Description:
Description text, font size and description width.
Image:
Image and its size.
Secondary hero example (Gondric light)
404 page is a template section used for 404 page. It displays when a website visitor attempts to access a page that does not exist or cannot be found on the website. The 404 page is used to inform the visitor that the requested page is not available. It also contains a button that returns them to the Home page.
Heading:
Heading font size with vertical inner padding and optional borders.
404 page example (Gondric)
The Gondric Theme supports the use of color swatches on the Product page's Variants block. To enable this feature, you must name the color variant "Color."
Color variants use color options such as Orange, Yellow, Mustard, Dark Red, etc. For each color variant option, you must upload an image of the specified color to the Content -> Files section of your store. The Gondric theme supports only JPG and PNG files for color swatches, and the recommended size for the image is 128 x 128 pixels.
The name of the image is also important - it should be in lowercase and spaces should be replaced with hyphens. For example, "Mustard" should be named "mustard.jpg" or "mustard.png," "Blood Red" should be named "blood-red.jpg" or "blood-red.png," and "Shinny Bright Pink" should be named "shinny-bright-pink.jpg" or "shinny-bright-pink.png."
If you have followed all of the steps correctly, the text of the color options will be replaced with images. If an image can't be found or an error occurs, the color options will be displayed as text.
Color swatches example (Gondric)
In order to replace the star icon that is used for discount badges, Animated buttons, Announcement bars and footer return button you will need to replace some custom code.
Go to your Online Store and click on 3 dots. In the dropdown click the Edit code option.
Navigate to snippets -> icon-star.liquid and open the file. Paste your svg code in the white box and set the Path fill to "currentColor".
Note: We do not support our theme with custom code so do some research about this customization or hire an expert. Make sure to duplicate the Theme before you do any changes so you can revert it back to previous version if anything goes wrong.
"vw" in stands for "viewport width". It's a unit of measurement that represents a percentage of the viewport's width, which is the visible area of a web page. 1vw is equal to 1% of the viewport's width. Using "vw" allows us to create responsive designs that adapt to different screen sizes and orientations so no more narrow design on big devices, everything scales like a modern store should!
This setting enables you to modify the your social media links in Footer section.
Social accounts:
Supported social media: Twitter, Facebook, Pinterest, Instagram, Tiktok, Tumblr, Snapchat, Youtube and Vimeo.
In Social media settings you can add the links to your social media accounts. All of the icons are already included in the theme. The icons can be displayed in the Footer section.
Note: For further guidance on setting up social media icons, please refer to the Footer section.