Frontend
      Back to home
      1. Help Center
      2. Store
      3. Frontend

      Configuring and Connecting the Commerce7 Built-In Storefront

      Commerce7's built-in Storefront solution is great for those who want to get up and running quickly, with little or no assistance required from a developer/designer.

      Who is this article for?

      • If you do not have a front-end website, but want to be up and running quickly, then Commerce7's Storefront solution is a great option.
      • If you do have a front-end website and simply want to point Purchase, Login, Club links etc. to Commerce7's Storefront pages, then you're in the right place.

      Who is this article not for:

      • If you are fully integrating your front-end website (using a developer/designer), then this article is not geared toward you.

      In this Article

      Enabling the Storefront and Configuring the Basics (VIDEO)

      Defining which Collection(s) display in the Storefront (VIDEO)

      Editing the Homepage welcome Personalization Block (VIDEO)

      Website Messages (VIDEO)

      Pointing pages from your Frontend Website to pages on the Storefront (VIDEO)

      This video lays it out for you:

      Let's get started!

      1. Click on Settings > Storefront Template
        Screen Shot 2022-06-15 at 3.42.55 PM
      2. Toggle Enable Storefront
        Screen Shot 2023-10-30 at 11.26.42 AM
      3. Choose a Collection to display. To learn more about Collections, click here.
        Screen Shot 2023-10-30 at 11.27.11 AM
        1. You can choose multiple Collections. Use the up/down arrow icons to define Collection display order.

          Screen Shot 2023-10-30 at 11.25.09 AM
      4. Select the checkboxes to indicate whether you want to display Reservations and/or Clubs on your Storefront.

        Screen Shot 2023-10-30 at 11.26.55 AM
      5. (Optional) Add Browser Icon, Social Sharing image, Font and Primary (Button) color.
        Screen Shot 2022-06-15 at 12.32.31 PM
        1. Browser Icon: This is the little image that appears on the browser tab.
        2. Social Sharing image: This is the image that appears when you share a link from your Storefront on social media.
        3. Primary Color: This will define the color of your Buttons.
        4. Fonts: Define font for both Header and Body of the pages. 
      6. Adjust the text that will appear on the Contact Us page (linked from your Storefront Footer). Click the pencil icon to edit.
        Screen Shot 2023-10-30 at 11.34.06 AM
      7. Advanced Section
        1. Toggle whether you'd like to offer Newsletter Subscription on the Footer.
        2. Add Google Analytics Code (if applicable).
        3. Enter a Logo URL (By default the logo will link to your Storefront Homepage. Enter a URL to have it link to another website or page).
          Screen Shot 2023-10-30 at 11.45.02 AM
      8. Custom HTML and Tags Section
        If your Designer would like to enter customized HTML into your Storefront, they can do so in this section. 
        Screen Shot 2023-10-30 at 11.45.27 AM
      9. Review your Storefront. In the top right corner of your screen, you'll see the View Storefront button. Review all the content on your website and make any changes necessary. 
        Screen Shot 2022-06-15 at 12.40.29 PM-1
      10. Note that you can edit the Logo that displays in the upper left and the phone number listed in the footer by navigating to Settings > General in the Admin panel.

      Defining which Collection(s) display in the Storefront

      Learn more about Collections in general here.

      Homepage Welcome Message (Personalization Block)

      Create a Homepage Welcome message with a Personalization Block

      By Default, you're going to see this block of text on Homepage:

       Screen Shot 2022-06-15 at 12.43.16 PM

      To change this text, navigate to Marketing > Personalizations and click the block labeled "Homepage".

      Screen Shot 2022-06-15 at 3.55.12 PM

       

      Edit on the Product Collection section.

      Screen Shot 2022-06-15 at 3.57.27 PM

      Edit the text, confirm that the Condition is set to "Everyone" and then click the "Save Option" button.

      Screen Shot 2022-06-15 at 4.01.26 PM

      Screen Shot 2022-06-15 at 4.01.49 PM

      Personalization Blocks are incredibly powerful! If you'd like to learn more about Personalization Blocks and how to use them effectively, click here. 

      Website Messages

      Create Website Messages throughout your Storefront

      Finally, there are several editable messages in the Storefront that can be customized.

      1. Go to Settings > Website Messages.
      2. Once there, filter for the Frontend Version "V2".
      3. Click into each message to edit the default verbiage.

      Screen Shot 2022-06-15 at 1.28.38 PM

      Where the Messages display:

      • Cart Help: Displays below items in the cart.
      • Checkout & Club Signup Footer: Displays on the bottom of the checkout and club signup forms.
      • Checkout Message: Displays on the top of the checkout form, below your logo and above contact Information.
      • Email Marketing Message: When creating an Account, this is an acknowledgement that displays with a checkbox.
      • Empty Cart: Displays when Cart is empty.

      Pointing your Frontend Website pages to your Storefront

      Whether you use WordPress, SquareSpace or any other web-building application, it's easy to point pages from your Frontend website to pages on your Storefront! This video shows you how: