- Installation Steps
- Create a Page
- Create a blog
- Navigation Menu
- Create a products collection
- Recommended Images size
- Configuration Settings
-
Configuration All Section Settings
- Custom announcement bar section settings
- Header section settings
- Announcement bar section settings
- Slideshow section settings
- Rich text section settings
- Featured collection section settings
- Rich text section settings
- Collection list section settings
- Brand with text section settings
- Multirow section settings
- Image banner section settings
- Blog posts section settings
- Testimonial section settings
- Multicolumn section settings
- Clip coupon
- Custom instagram image section settings
- Footer section settings
- Collection page settings
- Product page settings
- Default Section And Basic Option Settings
- Show multiple variant images of the selected variant settings
- Configuration Basic Settings
Champions – Best Shopify Clothing Store Theme
FEATURES:
- Direct to checkout
- Related products
- Inventory quantity bar
- Advanced ajax filter
- Smart quickview
- Ajax search
- Smart mega menu
- Mini-cart with product sub-drawer
- Multiple menu style
- Unlimited languages
- Unlimited currency
- Newsletter popup
- Autoplay video option
- Multiple collection layout
- Multiple product page layout
- Multiple header layout
- Social sharing
- 100% responsive design
- Free shipping method
- Live sale notification popup
- Cookies popup
- Color swatches
- Delivery time
- Multiple footer layout
- Wishlist & Compare
- Collection page product grid-view and list-view
- Customer viewer count
- Countdown timer
- Multiple variant image switch
1. Installation Steps
Go to your store "Admin > Online store"
- Go to add theme option and upload the theme zip file to your store.
- Go to the publish option and publish the theme.
2. Create a Pages
Go to your store "Admin > Online store > Pages > Add page" button. Give the title of the page and content of the page then click on the save button.
2.1 Create a wishlist page
Go to your store "Admin > Online store > Pages > Add page" button. Give the title of the page and theme template select as a wishlist then click on the save button.
2.2 Create a compare page
Go to your store "Admin > Online store > Pages > Add page" button. Give the title of the page and theme template select as a compare then click on the save button.
3. Create a Blog
Go to your store "Admin > Online store > Blog posts > Add blog post" button. Give the detail of the blog, upload the featured image and select the visibility visible option then click on the save button.
5. Create a products collection
Go to your store "Admin > Online store > Products > Collections" option.
Below screenshot top right side corner click on create collection button and give the detail of the collection and save it.
6. Recommended Images size
- Header section logo image size is (170 X 34)px
- Slideshow section main banner size is (1900 X 800)px
- Featured collection section product image size is (1275 X 1275)px
- Collection list section image size is (606 X 836)px
- Multirow section image size is (910 X 720)px
- Blog section image size is (1740 X 1140)px
- Testimonial section image size is (480 X 600)px
- Multicolumn section icon image size is (30 X 24)px
- Image banner section image size is (1820 X 550)px
- Clip coupon section image size is (221 X 190)px
- Custom instagram image section image size is (380 X 380)px
- Collection banner section image size is (1900 X 450)px
- Product page service icon section image size is (100 X 100)px
- Product page image with text section image size is (750 X 511)px
- Product page image banner section image size is (1420 X 350)px
- About, Contact, Faq First image banner section image size is (1900 X 450)px
- About, Contact, Faq First image banner section mobile image size is (750 X 300)px
- About page image with text section image size is (710 X 485)px
- About page meet the team section image size is (550 X 550)px
- About page bottom image banner section image size is (1900 X 720)px
- Contact page multicolumn section icon size is (30 X 30)px
7. Configuration Settings
Go to your store "Admin > Online store > Themes > Customize" option.
-
7.1 Default skin color settings
Go to "Customize > Theme settings > Colors"
-
7.2 Font settings
Go to "Customize > Theme settings > Typography"
Headings:You can enable and disable the heading font here. If you want to use other fonts then disable the theme font option and select the font from the below option.
Body:You can select the body font you want.
-
7.3 Theme settings
Go to "Customize > Theme settings"
Logo:You can set the header logo and favicon icon from here.
Header navigation menu:You can set the header navigation menu from here.
(Note: If the desktop menu type is selected as a drawer then this menu will work.)Colors:You can add color schemes here.
Layout:You can set store layout here.
Animation:You can set animation settings here.
Buttons:You can set all the button settings styles from here.
Products cards:You can set all product card settings from here.
Collection cards:You set the all collection list settings from here.
Blog cards:You set the blog card settings from here.
Media:You can set almost all the image settings from here.
Cart:You can configure cart drawer settings from here.
Newsletter popup:You can set newsletter popup enable/disable settings from here.
Product grid swatch:You can set product section, filter, and product page swatches(Ex: Color) settings from here.
Product notification popup:You can enable/disable product notification from here and other settings you can change.
Cookies popup:You can configure cookies popup settings from here.
Wishlist:You can configure wishlist page settings from here.
Compare:You can configure compare page settings from here.
8. Configuration All Section Settings
Go to your store "Admin > Online store > Themes > Customize" option.
-
8.1 Custom announcement bar section settings
Go to "Customize > Custom announcement bar" section.
Auto-rotate slides:Enable/Disable auto rotate slides.
Text alignment:Set the text position you want.
Color Scheme:Select the color scheme for the announcement bar.
Go to "Customize > Custom announcement bar > Announcement bar block" section.
Text:Set text for the announcement bar block you want.
Link:Set the redirection link for the announcement bar block you want.
-
8.2 Header section settings
Go to "Customize > Header" section.
Desktop logo position:Select the suitable option for your store header. You can change the menu and logo position using this option. (Note: Add/upload logo from theme settings.)
Menu:Select the menu for navigation.
Desktop menu type:Select the style for the menu.
Sticky header:Select the option for sticky header.
Color scheme:Select the color scheme for the header section.
Menu color scheme:Select the color scheme for the menu.
Social icon bg color:Select the social icon background color you want.
Social icon color:Select the social icon color you want.
Social icon bg hover color:Select a social icon background hover color you want.
Social icon hover color:Select a social icon hover color you want.
Country/Region selector:Enable the country/region selector option to display a currency.
Language selector:Enable the language selector option to display a language.
Social media icons:Enable the show icons on desktop option to display the social media icon in the desktop view.
More Menu Settings:Enable/disable more menu:Enable this option to display the more menu.
More menu limit:Select the range from which position you want to add more menu.
Example: If you want to add more menu at 6th position then you have to select more menu limit 5.Mobile Layout Settings:
Mobile logo position:Select the logo position in mobile view.
Custom mega menu settings.
(Q) How to enable a custom mega menu ?Answer: Go to your store "Admin > Online store > Themes > Customize > Header" section.
(Note: Here you have to select "Custom mega menu" from the "Desktop menu type" option.)(Q) How to enable a custom mega menu in drawer menu ?Answer: If you selected the "Drawer" menu from the "Desktop menu type" option then follow the below path.
Go to your store "Admin > Online store > Themes > Customize > Theme settings > Header navigation menu" option.
Go to "Customize > Header > Mega menu" block.
Link title:Give the proper link title name, So mega menu appears in this link below.
Hide default menu:If you want to hide the default menu then select the true option.
Number of columns show mega menu:Select the column for custom mega menu block.
Mega menu layout:Select the custom mega menu layout you want.
Mega menu background color:Select the custom mega menu background color you want.
Mega menu text color:Select the custom mega menu text color you want.
Item 1 settings:Select menu item type:Here you can see 4 options available. you can use only one option from the list. Whatever option you want to use please select it.
Banner:Select the image you want to show it. (Note: If select menu item type is selected as a Show image with text option then it will work.)
Select Menu:Select the menu you want to show it. (Note: If select menu item type is selected as a Show Menu option then it will work.)
Select Collection:Select the collection you want to show it. (Note: If select menu item type is selected as a Show Collection option then it will work.)
Select Product:Select the product you want to show it. (Note: If select menu item type is selected as a Show Product option then it will work.)
Title:Set the title text.
Content:Set the content text.
Button Title:Set the button title text.
Button URL:Set the redirection link for the button.
-
8.3 Announcement bar section settings
Go to "Customize > Announcement bar" section.
Color Scheme:Select the color scheme for the announcement bar.
Show separator line:Enable the option to display announcement bar bottom line.
Social media icons:Enable the Show icons on desktop option to display the social icons.
Auto-rotate announcements:Enable/Disable auto rotate slides for this section.
Country/Region selector:Enable the country/region selector option to display a currency.
Language selector:Enable the language selector option to display a language.
Go to "Customize > Announcement bar > Announcement bar block" section.
Text:Set text for the announcement bar block you want.
Link:Set the redirection link for the announcement bar block you want.
-
8.4 Slideshow section settings
Go to "Customize > Slideshow" section.
Layout:Select the layout you want.
Slide height:Select the slide image height you want.
Pagination style:Select the pagination style you want.
Enable the auto-rotates slides option for rotating images.
You can set any time between ranges for rotating the image.
Animation:Select the image behavior option you want.
Mobile layout:
Show content below images on mobile:If you want to show the content below images on mobile view, select this option.
Go to "Customize > Slideshow > Slideshow block" section.
Image:Add/upload the image you want. (Recommended image size is 1900 X 800)
Mobile Image:Add/upload the image for mobile devices. (Recommended image size is 750 X 850)
Heading:Set the heading text you want.
Heading size:Set the heading size you want.
Subheading:Set the subheading text you want.
Button label:Set the button label you want.
Button link:Set the redirection link of the button.
Button label 2:Set the second button label you want.
Button link 2:Set the redirection link of the second button.
Button style:Select the button style you want.
Desktop content position:Set the content position on the desktop.
Desktop content Alignment:Set the content alignment on the desktop.
Color scheme:Select the color scheme for content. When you use this option then enable the Show container on the desktop option.
Second button bkg color:Select the second button background color.
Second button text color:Select the second button text color.
Second button bkg hover color:Select the second button background hover color.
Second button text hover color:Select the second button text hover color.
Mobile Layout:
Mobile content alignment:Set the content alignment on the mobile view.
-
8.5 Rich text section settings
Go to "Customize > Rich text" section.
Desktop content position:Set the content position on the desktop.
Content Alignment:Set the content alignment.
Color scheme:Select the color scheme for content.
If you want to set the rich text section to be full width then enable the make section full width option.
Top padding:Set the top padding for the section top spacing.
Bottom padding:Set the bottom padding for the section bottom spacing.
Go to "Customize > Rich text > Rich text block" section.
Caption:Set the caption text you want.
Heading:Set the heading text you want.
Text:Set the description text you want.
Buttons:Set the button label and redirection link of the button.
-
8.6 Featured Collection section settings
Go to "Customize > Featured Collection" section.
Heading:Set the heading text you want.
Heading size:Set the heading size you want.
Description:Set the description text you want.
If you want to show collection description from admin then enable the option.
Description style:Set the description style you want.
Collection:Select the products collection from the collection list.
How many products to show then set a maximum product to show option.
How many columns to show then set a number of columns on the desktop option.
If you want to set the product section to be full width then enable the make products full width option.
View all style:Set the button label style you want.
Enable the carousel on desktop option for a slider on desktop view.
Color scheme:Select the color scheme option for the section.
Product Card Settings:-Image ratio:Select the image ratio you want.
Image shape:Select the image shape you want.
Show second image on hover:Enable the option to show a second image on mouse hover.
Show vendor:Enable the option to display the vendor.
Show product rating:Enable the option to display the rating.
Enable quick add button:Enable the option to display the quick add button on the products.
Mobile Layout Settings:-How many columns to display in mobile view then select the number of columns on the mobile option.
If you want to make a slider in mobile view then enable the swipe on mobile option.
-
8.7 Rich text section settings
Go to "Customize > Rich text" section.
Desktop content position:Set the content position on the desktop.
Content Alignment:Set the content alignment.
Color scheme:Select the color scheme for content.
If you want to set the rich text section to be full width then enable the make section full width option.
Top padding:Set the top padding for the section top spacing.
Bottom padding:Set the bottom padding for the section bottom spacing.
Go to "Customize > Rich text > Rich text block" section.
Caption:Set the caption text you want.
Heading:Set the heading text you want.
Text:Set the description text you want.
Buttons:Set the button label and redirection link of the button.
-
8.8 Collection list section settings
Go to "Customize > Collection list" section.
Heading:Set the heading text you want.
Description:Set the description text you want.
Heading alignment:Select the heading alignment you want.
Image ratio:Select the image ratio you want.
Set the number of columns on the desktop device.
Color scheme:Select the color scheme you want.
Select the “View all” button option for the display of the view all button.
Mobile Layout Settings:-Set the number of columns on the mobile device.
Enable swipe on mobile option for slider.
Go to "Customize > Collection list > Collection block" section.
Custom image:Add/upload the custom image you want. (Recommended image size is 606 X 836)
(Note: You can also add/upload collection image from "admin>products>collections" option.)
Collection:Select the products collection from the collection list.
-
8.9 Brand with text section settings
Go to "Customize > Brand with text" section.
Heading:Set the heading text you want.
Image width:Select the image width you want.
Image ratio:Select the image ratio you want.
Select the number of columns on the desktop view.
Column alignment:Set the column alignment you want.
Secondary background:Select the background color for the column.
Button label:Set the button label text you want.
Button link:Set the redirection link of the button.
Color scheme:Select the color scheme for this section.
Offer text top:Set the liquid code for the top line offer text.
(Note: You can rename the text label but don't remove the class name.)Offer text bottom:Set the liquid code for the bottom line offer text.
(Note: You can rename the text label but don't remove the class name.)Enable the Enable carousel on desktop option for a slider on the desktop view.
Mobile layout settings:-The select number of columns you want to display on a mobile view.
Enable the Enable swipe on mobile option for a slider on a mobile view.
Go to "Customize > Brand with text > Column block" section.
Image:Add/Upload the image you want.
Heading:Set the heading text you want.
-
8.10 Multirow section settings
Go to "Customize > Multirow" section.
Image height:Select the image height you want.
Desktop image width:Select the image width you want.
Button style:Select the button style you want.
Desktop content position:Set the content position in the desktop view.
Desktop content alignment:Set the content alignment in the desktop view.
Desktop image placement:Select the image position you want.
Color scheme:Select the color scheme you want.
Container color scheme:Select the container color scheme you want.
Mobile layout settings:-Mobile content alignment:Set the content alignment in the mobile view.
Animation:You can enable/disable animation from here.
Go to "Customize > Multirow > Row" block section.
Image:Add/Upload the image you want. (Recommended image size is 910 X 720)
Caption:Set the caption text you want.
Heading:Set the heading text you want.
Text:Set the text content you want.
Button label:Set the button label you want.
Button link:Set the redirection link for the button.
-
8.12 Blog posts section settings
Go to "Customize > Blog posts" section.
Heading:Set the heading text you want.
Heading Size:Set the heading font size you want.
Heading alignment:Set the heading position you want.
Blog:Select the blog from a created blog post list.
Select the range of a number of blog posts to show.
Select the range of a number of columns on the desktop.
Color scheme:Select the color scheme for the blog section.
Show featured image:To display the image enable this option.
Show date:Enable this option for the display date.
Show author:Enable this option for the display author.
To display the view all button then enable this option.
-
8.13 Testimonial section settings
Go to "Customize > Testimonial" section.
Heading:Set the heading text you want
Heading size:Set the heading size you want
Heading alignment:Select the heading alignment position you want.
Description:Set the description text you want.
Description style:Set the description style you want.
Maximum reviews to show:Select the range of maximum reviews to show.
Select the range of number of columns on desktop.
If you want to set the section to be full width then enable the make section full width option.
Enable the Enable carousel on desktop option for a slider on the desktop view.
Color scheme:select the color scheme you want.
Image ratio:Select the image ratio you want.
Mobile layout settings:-The select number of columns you want to display on mobile view.
Enable the Enable swipe on mobile option for a slider on a mobile view.
Go to "Customize > Testimonial > Testimonial block" section.
Image:Add/Upload the author/customer image you want. (Recommended size is 480 X 600)
File video Url:Add file video url you want. (Recommended video size is 480 X 600)
(Note: Above the image and video options, you can choose to display either image or video.)Rating image:Add/Upload the rating image. (Recommended image size is 78 X 14)
Reviewer name:Set the reviewer name you want.
Verified buyer text:Set the verified buyer text you want.
Review content:Set the content you want.
Reviewed product:Select the product to display.
-
8.14 Multicolumn section settings
Go to "Customize > Multicolumn" section.
Heading:Set the heading text you want.
Heading size:Set the heading size you want.
Image width:Select the image width you want.
Custom image width:Select the custom image width you want. (Note: If the above image-width option is selected as a custom width then will work.)
Image ratio:Select the image ratio you want.
Select the number of columns on the desktop view.
Column alignment:Set the column alignment you want.
Secondary background:Select the background color for the column.
Column background color:Select the column background color for the column.
Button label:Set the button label text you want.
Button link:Set the redirection link of the button.
Color scheme:Select the color scheme for this section.
Mobile layout settings:-The select number of columns you want to display on mobile view.
Enable the Enable swipe on mobile option for a slider on a mobile view.
Go to "Customize > Multicolumn > Column block" section.
Image:Add/Upload the icon image you want. (Recommended image size is 30 X 24)
Heading:Set the heading text you want.
Description:Set the description text you want.
Link label:Set the link label you want.
Link:Set the redirection page link you want.
-
8.15 Clip coupon section settings
Go to "Customize > Clip coupon" section.
Caption:Set the caption text you want.
Heading:Set the heading text you want.
Heading size:Set the heading font size you want.
Description:Set the description text you want.
Description style:Set the description style you want.
Text alignment:Set the text position you want.
Show scissor:Enable the option to display scissor.
Coupon details settings:-Heading:Set the coupon details heading text you want.
Sub heading:Set the coupon details sub heading text you want.
Coupon details bkg color:Select the coupon details background color you want.
Image:Add/Upload the image you want. (Recommended image size is 221 X 190).
Button label:Set the button label text you want.
Button link:Set the redirection link of the button.
Color scheme:Select the color scheme for the blog section.
-
8.16 Custom instagram image section settings
Go to "Customize > Custom instagram image" section.
Heading:Set the heading text you want.
Sub Heading:Set the sub heading text you want
Heading size:Select the heading size you want.
Heading alignment:Select the Heading alignment you want.
Image ratio:Select the image ratio you want.
If you want to set this section to be full width then enable the make products full width option.
Gap between images:If you want to eliminate the space between images, enable this option.
Color scheme:Select the color scheme for this section.
Select the number of columns on the desktop view.
Top padding:Set the top spacing for the custom instagram section.
Bottom padding:Set the bottom spacing for the custom instagram section.
Enable the Enable carousel on desktop option for a slider on a desktop view.
Mobile layout settings:-The select number of columns you want to display on mobile view.
Enable the Enable swipe on mobile option for a slider on a mobile view.
Go to "Customize > Custom instagram image > Image block" section.
Custom Img:Add/Upload the image you want. (Recommended image size is 380 X 380)
Image link:Set the redirection image link you want.
Go to "Customize > Custom instagram image > Video block" section.
File video url:Add file video url you want. (Recommended video size is 380 X 380)
Video link:Set the redirection video link you want.
-
8.18 Collection page settings
(1) Collection banner section settings
Go to "Customize > Default Collection Page > Collection banner" section.
Show image:Select the show image option you want.
(Note: If the show image is selected as a show background image then the display of the fixed below image will be set. But If the show image is selected as a show collection image then display the collection image. )Background image:Add/Upload the collection banner image you want. (Recommended image size is 1900 X 450)
Enable the show collection description option to show the description.
Collection banner style:Select the collection banner style you want.
Enable the Show desktop parallax effect option for parallax on the desktop view.
(Note: If style-2 is selected then it will work.)Enable the Show mobile parallax effect option for parallax on a mobile view.
(Note: If style-2 is selected then it will work.)Color scheme:Select the color scheme you want.
(2) Product grid section settings
Go to "Customize > Default Collection Page > Product grid" section.
Product per page:Select the range of how many products to display per page.
Select the number of columns for desktop view.
Color scheme:Select the color scheme you want.
Product Card Settings:-Image ratio:Select the image ratio you want.
Image shape:Select the image shape you want.
Show second image on hover:Enable the option to show a second image on mouse hover.
Show vendor:Enable the option to display the vendor.
Show product rating:Enable the option to display the rating.
Enable quick add button:Enable the option to display the quick add button on the products.
Enable list-view quick add button:Enable the option to display the quick add button on the list-view products.
Filter and Sorting Settings:-Enable filtering:You can enable/disable the filter option.
Desktop filter layout:Select the filter layout you want.
You can enable/disable the Sorting option.
Mobile layout:-Select the number of columns to display on mobile view.
-
8.19 Product page settings
Go to "Customize > Default Product Page > Template > Product information" section.
Enable sticky content on desktop:Enable the option to display content sticky.
Color scheme:Select the color scheme you want.
Enable section left and right bkg color:Enable the option to display left and right background color.
Section left bkg color:Set the section left part background color.
Section right bkg color:Set the section right part background color.
Desktop media width:Select the desktop media image width you want.
Constrain media to screen height:Enable the option to constrain media to screen height.
Media fit:Select the media fit option you want.
Desktop layout:Select the desktop layout you want.
Thumbnail images setting:Thumbnail Postion:Select the thumbnail position you want.
(Note: If the desktop layout is selected as a thumbnail or thumbnail carousel then it will work.)Thumbnail image radius:Give the thumbnail image radius you want.
Vertical Postion:Select the vertical position you want.
(Note: If the thumbnail position is selected as a vertical then it will work.)Desktop media position:Select the desktop media position you want.
Image zoom:Select the image zoom option you want.
Mobile layout:Select the mobile layout option you want.
Hide other variants’ media after selecting a variant:If you want to hide other variants thumbnail image after selecting a variant then enable this option.
Enable video looping:If you want to continuously play a video then enable the option.
Select color swatch option:If you choose the color option, the color will be displayed. If you choose the image option, the image will be displayed.
(Note: If you choose the image option, you will select the variant image then display the variant image. If not, you'll see the swatch image.)Swatch image radius:Select the swatch image radius you want.
10. Show multiple variant images of the selected variant settings
Go to your store "Admin > products" option.
-
Go to the "Products > Select any product" and follow the below steps.
Step-1: Go to the selected product.
Step-2: Select the variant images.
Step-3: Hover over the media image and click on the image a popup will open then edit the alt text and then save. Do the same process for other images.
(Note: Variant names must match with alt text.)
11. Configuration Basic Settings
-
(1) Payments method settings
Go to your store "Admin > Settings > Payments" option.
Here you can add payment methods you want.
-
(2) Customer accounts settings
Go to your store "Admin > Settings > Customer accounts" option.
Here you can set customer account related settings.
-
(3) Shipping and delivery settings
Go to your store "Admin > Settings > Shipping and delivery" option.
Here you can set shipping and delivery related settings.
-
(4) Language settings
Go to your store "Admin > Settings > Language" option.
Here you can add language and change the default language.
-
(5) Country/region settings
Go to your store "Admin > Settings > Markets > Manage > Edit" option.
Here you can add country/region.
-
(6) How to add all images settings
Go to your store "Admin > Content > Files" option.
Here you can upload single and multiple images.