Shopify Crave Theme: Best Shopify 2.0 Theme for Food and Beverages

  • Shopify Crave Theme: Best Shopify 2.0 Theme for Food and Beverages

    Content Writer

  • 1280 Views
  • Last updated: July 6, 2022
  • 17 Minutes

With the arrival of Online Store 2.0, both Shopify merchants and developers are highly benefited. For developers, Online Store 2.0 made it easier to develop customized features and apps. And for Shopify merchants, Online Store 2.0 gives greater flexibility to design and build their online storefront easily. Shopify 2.0 has easy-to-use templates, fully customizable layouts, sections, metafields, and many more to improve the shopping experience.

Shopify has brought 3 new free Online Store 2.0 themes to make your store stand out from the crowd after the Dawn theme. These 3 themes are Crave, Craft, and Sense. All these themes are mainly for food and beverages, home and garden, and health and beauty. In this blog, we’ll discuss the Crave theme and how to customize the crave theme.

Shopify Crave Theme

Crave theme is a free Online Store 2.0 theme suitable for food and beverages stores of any catalog size. Crave is an eye-catching theme with mobile optimized layouts and dynamic checkout options for shopping on the go.

Features

  • Slideshow
  • Advanced product filtering
  • Fixed navigation
  • Promotional banner

Benefits of Crave theme

  • Vibrant and playful design with bold colors and distinct shadows that attract the buyer’s attention
  • Mobile optimized layouts that are for the on-the-go buyer
  • Flexible and advanced customization options without the need to edit code.

Customizing Crave theme

With the help of sections and blocks, you can easily customize your store’s content without any need to touch the code.

Let’s understand each and everything present in the Shopify Crave theme. I will show you how to design and customize your storefront from scratch with the Crave theme. I will pick each and every template and explain the usage of sections on each page. So stick to the end of this blog.

To start customizing click on the Customize button as shown below.

customize-crave-theme-shopify

On clicking the Customize button you may be landed on the theme editor which may look like as shown below. The editor is divided into 3 panels. Left, middle, and right.

The left side panel is the layout in which you can add sections and blocks as per your need. The middle panel is the preview panel where you can see the changes/customization made by you. And right panel shows the settings or options of each section and blocks that you select which are customizable.

crave-theme-editor

Sections

Sections are provided to create the desired layout as per your needs. Most of the sections contain blocks that allow you to customize and give a new look to your store without editing code. Now let’s see the sections offered by the Crave theme.

  • Announcement bar
  • Header
  • Footer
  • Blog posts
  • Collage
  • Collapsible content
  • Collection list
  • Contact form
  • Custom liquid
  • Email signup banner
  • Email signup
  • Featured product
  • Featured collection
  • Image banner
  • Image with text
  • Multicolumn
  • Page
  • Rich text
  • Slideshow
  • Video

Let’s understand these sections under each of the templates that we are going to see below.

Templates

templates

To open the pages click on the dropdown of templates as shown above. Here is the list of templates and let’s start customizing each of them one by one using required sections.

  • Home Page
  • Products
  • Collections
  • Collections list
  • Pages
  • Blogs
  • Blog posts
  • Cart
  • Checkout
  • Others

Home Page

The home page is the king of the website. The home page is the place where your customers can see the first impression about your store. Let’s see how we can make it better using sections.

Announcement bar

The announcement bar helps you to display any important information for your customers. It provides no settings to customize but you can customize up to 12 blocks to display.

Section Settings Description
Text The text that you want to show your customers or the announcement you want to make.
Color Scheme The Color of the announcement bar.
Link The link where you want to redirect your customers while clicking the announcement bar.

Steps to customize the announcement bar

Step1: Click the announcement bar from the left panel.
Step2: By clicking on the announcement you can see the corresponding settings in the right panel.
Step 3: Add the text you want to display.
Step 4: Choose the color scheme of the announcement bar.
Step 5: Add the link where you want to take your customers when they click on the announcement bar.
Step 6: Click on the Save button to save changes.

So here I have customized my announcement bar. Have a look at it.

announcement-bar

Header

Header shows all the pages present in your online store.

Section Settings Description
Color Scheme Background color of the header.
Logo image Logo of your brand.
Edit alt text A brief description of the logo image you add to improve search engine optimization (SEO) and accessibility for visually impaired customers. 
Custom logo width Width of the logo. It can be any multiple of 10, from 50 px to 250px. Default size if 100px.
Desktop logo position Position of the logo where you want to display. Middle left, top left, top center (default).
Menu The main menu that you want to show.
Show separator line Line to separate your header from the page’s content.
Enable sticky header Make the header sticky when the customer scrolls up the page
Spacing Spacing below the header.

Steps to customize the header

Step 1: From the left panel, click on the header and you can see the settings for it on the right-hand side.
Step 2: Set the color scheme for the header background.
Step 3: Add the logo image & give the alt text to improve SEO.
Step 4: Set the width of the logo using the slider. You can change the width up to 150px.
Step 5: Choose the position of the logo.
Step 6: Change the main menu if needed.
Step 7: Enable the separator line to display a line that separates the header.
Step 8: Enable the sticky header if you want to make the header sticky while customers scroll up the page.
Step 9: Set the bottom spacing margin for the header.
Step 10: Finally, click on the Save button.

Have a look at the changes made by me on the header.

header

Slideshow

You can add up to 5 images to display as a slideshow.

slideshow-settings

Section Settings  Description
Layout  You will get 2 options to choose the layout of the slideshow. Full width or Grid. 
Slide height The height of the slideshow.
Pagination style  Style of the slideshow’s navigation that displays under each image.
Auto-rotate slides Enabling this checkbox will play the images one by one automatically.
Change slides timer You can set the timer of the slideshow. Minimum: 3 seconds & Maximum: 9 seconds.
Mobile layout You can select the content alignment on mobile.
Accessibility Describe the slideshow for your customers.

 

Image Slide Settings Description
Image Static image for your slideshow.
Edit alt text Describe your slideshow for readers.
Heading Optional heading text for the image.
Heading size Size of the heading.
Subheading Optional subheading text for the image.
Button label Text for the button.
Button link URL for the button where you want to link to.
Use outline button style Outline style of the button.
Desktop content position Position of the content box over the image.
Show container on desktop Click on the checkbox to show container box.
Desktop content alignment  Position of the text in the container box.
Image overlay opacity Adjust the opacity of the image overlay.
Color scheme Adjust the background color of the content box.
Mobile layout Set the layout of content that should be displayed on mobile.

Steps to customize the slideshow

Step 1: Add the image and alt text for the image that you want to show in slides.
Step 2: Enter the heading text.
Step 3: Choose the size of the heading.
Step 4: Add text for the subheading.
Step 5: Enter text for the button or leave the label blank to hide the button.
Step 6: Add the link for the button where your customers will be redirected while they click on it.
Step 7: Check the box to show a solid outlined button.
Step 8: Select the position of the content box you want to display over the image.
Step 9: Click the checkbox to show a container box on the image.
Step 10: Choose the alignment of content.
Step 11: Adjust the opacity of the image overlay.
Step 12: Select the color scheme of the background color of the content box.
Step 13: Adjust the content alignment of the mobile layout.
Step 14: Save changes using the Save button.

Take a quick look at the changes I have made to my store’s slideshow.

slideshow

Rich text

This section allows you to add rich text with a header, content, and a button with a link.

rich-text-settings

Section settings  Description
Color scheme Background color of the rich text section.
Make section full width  By default the rich text section will be full width. You can make it half-width using the checkbox.
Section padding Spacing between top or bottom of the rich text section.

 

Heading Block Description
Heading Title of the section.
Heading size Size of the title.

 

Text Block Setting Description
Description  Paragraph you want to add in the section.

 

Button Block Settings Description
Button label The text/name on the button.
Button link URL where you want to navigate your customers while the click on the button.
Use outline button style Border of the button.

I have added the rich text. See below.

rich-text

Featured collection

This section allows you to show products in a single collection.

featured-collection-settings

Section settings Description
Heading Title of the section
Collection Particular collection from where you want to show products from.
Maximum products to show The number of products you want to show from the collection.
Color scheme Background color of the featured collection section.
Enable “View all” button if collection has more products than shown Enabling this button will show more products if the collection has more products than set in the maximum products to show.
Enable swipe on mobile Enabling this option will allow customers to see more products by changing the mobile display from a column to row.
Image ratio Set the image ratio of product images.
Show second image on hover Customers can see another image while they hover their cursor over the product images.
Show vendor To display the vendors of products 
Show product rating Displays the average rating of products.
Section padding Spacing 

Steps to customize the featured collection

Step 1: Add the heading for the featured collection section.
Step 2: Choose the collection you want to display.
Step 3: Set the limit of the number of products you want to show.
Step 4: Select the background color of the featured collection section.
Step 5: If needed enable view all collection button if you have more products than shown.
Step 6: Enable swipe on mobile if needed.
Step 7: Set the ratio of the product image.
Step 8: Enable the checkbox to show the second image on hover.
Step 9: Click the checkbox to display the vendor name.
Step 10: Show product rating if needed.
Step 11: Adjust the spacing of the featured collection section using the slider.
Step 12: Save changes at the end.

So here I have added my featured collection.

featured-collection

Image with text

This section contains an image with a text including a button to link where you want to take your customers.

image-with-text-settings

Section settings Description
Image Choose the image that you want to display.
Edit alt text Describe about the image for improving SEO.
Image height Height of the added image.
Desktop image placement Set position whether image or text should appear first.
Desktop content position Alignment of text.
Content layout Allows the image and text boxes to overlap with one another.
Mobile layout Alignment of content for mobile device.
Section padding Spacing of the image with text section.

 

Heading Block Description
Heading Title of the section.
Heading size Size of the title.

 

Text Block Settings Description
Content Shows paragraph style text..
Text style Style of the content

 

Button Block Settings Description
Button label The text/name on the button.
Button link URL where you want to navigate your customers while the click on the button.

Here I have added an image with text. See the output below.

image-with-text

Collage

This section allows you to create a collage of videos, images, products, and collections.

Setting Description
Heading Title of the section.
Desktop layout Appearance of collage section on desktop.
Mobile layout Appearance of collage section on mobile.
Color scheme Background color of the collage section.
Section padding Spacing of collage on both top and bottom.

Steps to make collage

Step 1: Add the heading for the collage.
Step 2: Choose the layout of the collage to be shown on the desktop.
Step 3: Choose the layout of the collage to be shown on mobile.
Step 4: Select the background color of the collage.
Step 5: Set the spacing of the collage.
Step 6: Save changes.

Have a look at the output below.

collage

Multicolumn

This section allows you to show content in a column layout.

multicolumn

Section settings Description
Heading Title of the section.
Image width Width of the images that you add in columns.
Image ratio Image ratio of the images added.
Column alignment Position of images and text within the columns.
Secondary background You can either choose column background to show or none to hide the secondary background.
Button label Label shown on the button.
Button link Link on the button.
Enable swipe on mobile Enable to change the mobile display from column to row.
Color scheme Background color of the multicolumn section.
Section padding Spacing at the top and bottom of the section.

Steps to add multicolumn

Step 1: Add the image.
Step 2: Enter a title to the section.
Step 3: Write the paragraph you want to show in the column.
Step 4: Assign the name of the label you want to show.
Step 5: Add the link to label where you want to redirect customers.

The output of the multicolumn is shown below.

multicolumn

Featured product

In this section, you can feature a special product.

featured-product

Section settings Description
Product The product that you want to show as a featured product.
Color scheme Color scheme of the featured product.
Show secondary background Displays the featured product on the secondary background color.
Hide other variant’s media Once a variant has been selected you can hide media of other variants enabling this option.
Enable video looping Enabling this option will play the video again and again in a loop.
Section padding The spacing of the featured product section.

Here I have featured my product. How’s it?

featured-product-output

Video

This section lets you add a video from Youtube or Vimeo on a page in your store.

video

Below shows the output of this section.

video-output

Collapsible content

This section allows you to add content that can be collapsed or expanded, and an image that can be placed to the left or right of the collapsible content.

collapsible-content

Section settings Description
Caption An optional caption that displays above the heading of the section.
Heading  Title of the collapsible section.
Heading alignment Position of the section heading.
Layout Layout of the section.
Color scheme Background color of the section.
Container color scheme Background color of the collapsible content container.
Open first collapsible row To show the first row of your collapsible content by default.
Image The image for the section.
Edit alt text A short description about the image to improve SEO
Image ratio The image ratio for the section.
Desktop layout Choose whether to show collapsible rows first or the image.
Section padding Add spacing of the collapsible content.

See the output of this section.

collapsible-content

Email signup
Using this section your customers can add their email addresses and subscribe to your newsletter or marketing.

email

Footer
Footer will be shown on all pages in your theme.

Section settings Description
Color scheme Background color of the footer.
Show email signup To show the email signup form where customers can subscribe to your newsletter and marketing.
Heading Title for the email signup form.
Social media icons It shows social media icons with a link.
Enable country/region selector Shows a selector for choosing countries and regions that you have added in the payment settings.
Enable language selector Shows a selector for choosing countries and regions that you have added in the language settings.
Show payment icons Displays icons of payment method 
Spacing Add space above the footer.
Section padding Add space to top or bottom of the footer.

See how I transformed my previous footer into a new one.

footer

Product page

By default, you will find 2 sections on this page product information and product recommendations.

product-page

Product information settings Description
Enable sticky content on desktop Make product information sticky while customers scroll down the page.
Desktop layout See how the product media will look on desktop.
Desktop media Select the size of media for desktop.
Mobile layout Choose whether to show/hide thumbnail images on mobile.
Hide other variant’s media when a variant is selected To hide images of other variants when a variant is selected.
Enable video looping Enabling this option will play the video in a loop automatically.
Section padding Add space to the top or bottom of the product information section.

 

Product recommendations setting Description
Heading The title of the section.
Color scheme Background color of the section.
Image ratio Size of the images that you show in recommended products.
Show second image on hover Displays image of the product when customers hover the cursor on the image.
Add image padding Allows you to add extra space around the images. 
Show image border Displays border around the image.
Show vendor Displays the name of the vendor for each product.
Show product rating Shows average product star ratings with reviews.

Steps to add product information

add-product-informtaion

As seen in the above image you can add the information about the product using the corresponding sections and blocks. But if you want to add custom information about the product then it’s possible with the metafields.

Follow the steps to add product information with metafields:

Step 1: As shown in the above image at the top right corner you can see an icon of insert dynamic source. Click on it and add metafield.
Step 2: Click on products.
Step 3: Give definition that you want to add.
Step 4: Select the content type and save.
Step 5: From your Shopify admin go to the products page and click on the product you want to add information.
Step 6: At the bottom of the page you will see the list of metafields that you have created.
Step 7: Choose the one that you want to show and add the description over there.

Collections page

Collection banner section settings Description
Show collection description Shows the description of collections.
Show collection image Displays the collection image.

 

Product grid section settings Description
Products per page The number of products that you want to show on each page.
Image ratio The image ratio for the product images.
Show second image on hover Displays image of the product when customers hover the cursor on the image.
Add image padding Adds extra space around the product images.
Show image border Shows a border around the image.
Show vendor Displays the vendor name for each product.
Show product rating Shows star ratings with reviews for each product.
Enable filtering Allows customers to filter products in the collection based on the filters in navigation settings.
Collapse larger screens To show any of the filter customers must click a filter and sort the heading.

Collections list

This page shows the list of all collections that are available in your store.

Setting Description
Heading Represent the title of the page.
Sort collections by Shows collection in several orders.
Image ratio The image ratio for the collection images.
Color scheme Background color of the collection title section.
Add image padding It adds extra space around the collection images.

Pages

You can create custom pages like About Us, etc.

Blogs

Blog pages are the homepage where all your blog posts will be shown with their images, title, and first few words of the blog post.

Blog post pages

The content of each blog post will be shown with a featured image, title, share button, and content.

Cart

By default, the cart page contains items and a subtotal section.

Password page

This page displays when you have enabled password protection in your online store.

404 page

When customers try to visit a link that your site doesn’t at that moment 404 page will be shown to them.

Search page

The search page helps customers to search specific products or pages within your online store.

Conclusion

I hope this guide helped you! Explore the new Crave theme, enable it on your store, customize it in your own style, and boom sales. If you need any assistance let me know in the comment section or contact our support team.

2 Responses

Leave a Reply

Your email address will not be published.