BACK

how to remove newsletter sign up for in retina theme shopify

Out of the Sandbox - Retina 4.0 Home Page Setup with Shopify Sections hello and welcome to the out o

Out of the Sandbox

Updated on Mar 21,2023

Out of the Sandbox - Retina 4.0 Home Page Setup with Shopify Sections

The above is a brief introduction to how to remove newsletter sign up for in retina theme shopify

Let's move on to the first section of how to remove newsletter sign up for in retina theme shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to remove newsletter sign up for in retina theme shopify catalogs

Out of the Sandbox - Retina 4.0 Home Page Setup with Shopify Sections

hello and welcome to the out of the,sandbox video guide to the retina 4.0,shopify themed homepage setup now using,Shopify sections today we're going to,take a look at how you can go from a,fresh upload of the new version of the,retina theme to a highly customized,version that will look just like this,austan leather goods demo shop which we,will be using as our model for this,tutorial so it will look just like this,at the end of the day so first and,foremost let's take a look at what we're,already working with on the Shopify,admin panel so here I am on my admin,panel and I can go here to products,where you'll see we already have a,selection of products and these products,have product titles and descriptions,types tags images prices all of the,attributes that you would expect to see,with a product additionally these,products have been categorised into a,couple of collections the products and,collections are part of the Shopify,platform so if you needed any assistance,on configuring products or categorizing,them into collections take a look at the,Shopify documentation where you will,find all the resources you need to help,you out in that area additional to the,products and the collections here in the,online store section under blog posts we,have some blog posts these blog posts,have content titles featured images and,you'll notice that they also have,excerpts and I'll show you why that's,important a little later on,additional two blog posts we have these,pages these are just the pages that,we'll be using for the home page content,finally we have these menus set up in,the navigation settings and I'll show,you why they're set up the way that they,are here shortly so these are all the,components that are on the Shopify,platform itself let's take a look at,what comes with the theme here so here,we are on the themes panel now depending,on how you purchase the theme this step,will be due,for you so if you purchased the theme,through the online store on out of the,sandbox comm then you would have,received a zip file in your email that,you can download and upload to the,Shopify admin panel just like this,alternatively if you purchase the theme,through the Shopify theme store you can,expect the theme to be added to your,admin panel automatically so here it's,been added in an unpublished state to my,admin panel just going to go ahead and,publish the theme here so any changes,that we make will occur to the live,version of the shop and so here it is,loading up and I'm gonna go to customize,theme to take a look at the built in,theme settings so here we are with the,new sections settings on the left and,the preview window here on the right so,any changes that we make in the settings,on the left will update right away in,the preview window here on the right,the settings on the left here are split,up into sections which are based on the,page that's being viewed in the preview,window and the general settings section,so just to touch on the sections here,again since we're looking at the home,page we have home page sections,appearing here,in the sections area if I wanted to see,these settings associated with a product,page I would need to navigate to an,actual product page here and then I,would have access to the product page,settings,likewise with collections now we will be,doing a video about configuring product,and collection pages so we will be,looking at these settings in more detail,later on but that's just to give you an,idea that to access certain settings,here in the sections area of customized,theme you need to navigate to that type,of page so since we're working on the,home page today will stay on the home,page and take a look at the home page,sections that appear here on the left,we'll take a closer look at these,sections here in a moment but first,let's jump over to this general settings,tab because I'd like to show you my,recommended first step and that's to go,down here to change theme style so we'll,look at these general settings in a,moment but first go to change theme,style where you will see we have these,four theme styles Austin Montreal,Melbourne and Amsterdam,these theme styles are combinations of,typography color and background settings,that will change all at once and they,are based on the for Retina demos so,this is Amsterdam here we've got,Melbourne Montreal,and then our actual model here at the,Austin leather goods demo so depending,on which of these four demos seems,closest to how you envision your shop I,would suggest using it as a jumping-off,point to set all of those color,background settings and typography,settings all at once but do it before,you go to experiment with these settings,on your own as choosing a theme style,will overwrite your previous customized,theme setting decisions so we're gonna,go ahead and choose the Austin preset,which is kind of the default one here,anyway and choose to change theme style,so what that did is it went in and it,changed a bunch of color settings so,it's here that you will find all of the,settings associated with colors on the,shop including backgrounds so whether,it's background colors or background,images they're all found here in the,color settings then typography so the,typeface is used throughout the shop are,all set here in the same section of,settings,additional to a few of the settings that,we're going to be looking at for the,home page we have the currency converter,which we have enabled and it's appearing,here in the header the search feature is,enabled in the header right now and you,can decide whether you want it to search,through product data which includes,product tags and types and product,descriptions or whether you'd like for,it to search through everything which,would include blog content and page,content as well finally we have the,social media settings here and it's by,entering the URLs of your social media,outlets into these fields that you will,have the social media icons appear up,here in the header as well as down here,in the footer so those are all of the,general settings associated with the,homepage so let's take a look at the,actual meat and potatoes here and go to,this sections tab and look at these,settings starting at the top of the page,with the header so here are my header,settings I'm going to start by selecting,a logo now we've got a couple of logo,settings here we've got a logo and a,secondary logo and I'll show you why so,I'm gonna jump over to my demo here and,as you see whenever we're at the top of,the page we've got this white logo since,that's what works best over our colored,slideshow image but as we scroll down,the page or as we navigate to any other,page on the shop we'll see the primary,logo which is this dark logo so that is,configured by going here and choosing,the dark logo as the primary logo and,then the secondary logo which appears,just over the homepage content is,selected here I've got the white,so you can do that on your own shop,depending on the background colors and,the colors of the slideshow images that,you're using if you happen to have a,slideshow in the first position there so,that's the effect that it has you can,also select to have a mobile logo and,here's why so I'm going to jump down,here to small screen to see a mobile,preview and we can have the logo appear,like this but if we wanted to just have,let's say we have a stylized version of,this a as a logo,perhaps that would work better on mobile,so you've got the option of selecting a,mobile specific logo there jump back to,the fullscreen view and now that logo is,a bit big for our liking so we can,adjust the width here with this logo,display width setting following that we,have our main menu setting so this is,where we choose one of the menus that,we've configured in our navigation,settings to appear here in the header so,here's our main menu and as you see,we've got a drop-down appearing under,the products link and under this links,link and under the wallets link in the,drop-down we even have these indented,links so I'm going to show you how to do,that beside the main menu setting here,we can jump over to the navigation,settings using this edit menu link and,here we are in the navigation settings,this is the actual main menu and in the,menu we have a link titled products we,also have a link titled links if we go,back to our main navigation settings,you'll see that there's also a menu,titled links and a menu titled products,so that's how you create that drop down,menu is by naming a subsequent menu with,the same name as one of the titles of,the links in the parent menu if you do,that again so as you see in the products,menu we have a link titled wallets if,you create another menu with that title,that's how you create the indentation of,the in a sense the second tier of the,menu,so here that is with the indented links,here,after you select your main menu we've,got this main menu drop-down links in,first column which is a bit of a,confusing name here but here's what it,does so here we've created this links,drop down and as you see after 10 links,it starts to create a second column of,links in the drop down well as you see,that has created in a sense a big gap,below the 12th link well we can in a,sense even them out by selecting 6 here,as the main menu drop-down links in,first column which will make it that,there's 6 links in each column of that,drop-down so that's how you use that,setting we have a couple of settings,here to control the amount of space,between the top of the page and the menu,or the logo and then this setting,actually at the content area top padding,setting applies to other pages not the,home page if you find that you've got a,very tall logo and that is creating a,header that is covering your content you,can increase the setting there to bring,the content out from below your header a,few settings that you can enable and,disable in the header here we've got the,display of the social media icons we,have the search function that can be,enabled and disabled the header itself,you see right now continues to appear at,the top of the page even when we scroll,that is this sticky header setting and,it can be enabled and disabled and,finally as you see here the header it,has a transparent background when it's,appearing over the first slideshow here,we can turn that off so that it has a,solid background color followed by the,slideshow instead of appearing,transparently above it we can add an,announcement message here which will,appear above the header with a few,options to bold and italicize the text,and then you can have that link to a,page or a product collection blog post,using the,selection here of course any of the,settings for the announcement bar text,or the announcement bar background color,are in the color settings within the,general settings area so with our header,in good shape let's head back to this,master sections area here and instead of,jumping into the body of the homepage,let's scroll down to the bottom and,configure the other common element,meaning an element that will appear on,all of the pages of the site so first we,have this copyright text setting if you,wanted to show some additional text in,the copyright text area right down here,the theme designer credits can be,enabled and disabled and I don't have,any payment gateways set up on my demo,shop but the payment icons would appear,here in the footer as well which can be,enabled and disabled the footer is also,made up of these four columns that you,see here and the content can be selected,in the sections style we have created,our first area of content here to be the,newsletter signup and below that we have,the ability of showing the social media,icons there so each one of these content,blocks has the ability of showing the,social media icons but if I were to in a,sense correspond with the demo there's,actually two more content blocks here,there are two menus there's a section of,page content and there's a section that,holds the newsletter sign up so this,area of text actually isn't there and,instead we'll choose a page and then the,order of them if I remember correctly it,is a menu a menu a newsletter signup and,then no sorry some additional,information and then a newsletter signup,so as we actually expand these settings,we'll see that we can choose our footer,menus,and we can choose our page content here,if you have page content that has links,within it then this is the best way to,display that content alternatively,though you could use the text type of,content here where you can add a title,and text rate right in this box however,you can't add links within this box you,can just do limited formatting all right,and there's our footer configured to,look just like the demo and go ahead and,save that,all right now back to our master,sections list where we're gonna take a,look at the actual sections that are,populating this page before we configure,the sections let's do a quick overview,of what these various sections are for,the home page to do that I'm going to go,here to add section these are our,options of sections for the home page,starting with and so as I choose the,section we get a preview here on the,right and it won't actually be added to,the shop until we use this add a link to,add it to the layout so I'm just going,to give you a preview here collection,list is a listing of collections as,opposed to a listing of products whereas,a featured collection is a listing of,products so you'd be able to choose a,collection using that section,we have the featured promos section,where you can choose images and links,along with captions the gallery where,you can choose images and clicking on,the images opens the image in a lightbox,this image with text section this is the,image with text overlay which is like a,banner a logo lists where you would,generally put in the logos of whether,they're publications or places that your,product has been featured if the,slideshow if featured products here,which will do a highlight or a spotlight,on specific products right on the home,page in social media we have this split,section of blog posts and Twitter feeds,we have the Instagram feed here this,text section you can choose a regular,page of page content to have it appear,on the home page a rich text and image,is a like that but without choosing a,page instead you configure it right in,the settings you can choose images text,and some formatting options we have this,testimonial section and finally a,featured video section so with that in,mind knowing what the sections are my,suggestion for the next step on creating,your homepage is a cross between,experimenting with these sections to see,what the settings are that are,associated with the sections while also,trying to create a sequence of sections,that you will be using for your shop so,you could look to one of the demos for,that kind of information which is what,we'll be doing for our example so as you,see here with our Austin leather goods,demo the home page starts with a,slideshow followed by a section of what,could be page content or it could be,rich text we've got these featured links,appearing followed by a section of a,featured collection with a side,this is some page content appearing in a,page section another featured collection,section here is the image with text,section we have this section again,another featured collection,here's that logo list section here's,that blog section showing just the blog,no Twitter feed and then finally the,Instagram section before we reach the,footer so hopefully that's the result of,your design period as well as that you,can come up with an idea of a sequence,of sections that will tell the story of,your product and help your shoppers,navigate to the product to get them,adding it to the cart and proceeding to,the checkout so I've got my sequence of,sections in hand let's jump back over to,the settings here and make it happen so,instead of trying to reconfigure the,sections that are already appearing in,the default layout I am going to remove,all of those sections except for the,first slideshow under the impression,that our homepage is also starting with,a slideshow,so just quickly going through and,deleting all these sections so that I,have just the slide show here and I'll,jump into the slide show section so here,are the settings associated with the,slide show starting with some animation,settings choose between a fade or a,slide style of animation and you can,choose the period of time between the,sliding of each slide,four six or ten seconds then the content,area of the slideshow settings are the,slides themselves so here we have two,slides configured we can expand the,settings here to take a look at what our,options are I'm going to go ahead and,upload my first slideshow image and then,below the image settings we have our,caption settings so we can choose a,heading and a subheading for these,slides,beside the actual caption we can choose,the position of the text whether it is,positioned left center or right and we,can choose the alignment of that text as,well being left center or right we also,have the ability of adding a button to,any of the slides by adding a caption,here in the button label setting and,then setting a link by either entering a,URL here or by choosing a link out of,the links that pre populate in this list,so there's one slide I'm actually going,to leave the button there and then,configure this second slide here so that,we've got these two slides configured,and change the text position here to,work with the slide along with the,alignment as well and that's all there,is to it when it comes to configuring,these slides and the caption settings,that we have just gone through are going,to be very similar for the image with,text overlay sections or banner sections,as well as the preview banner that,appears above the video section we've,got our slideshow all set here let's,jump back to the master sections list,and be sure to add our next section,which is a section of rich text and,images so here we'll select it from the,list and add it looks good so,we could add an image here if we'd like,instead I'm gonna go ahead and just have,this look like the demo so I'm going to,remove the heading and I'm going to copy,the text that is in V in the demo and,add that as my rich text I can choose,between regular or large text size and,then the alignment can be left or,centered we can also add a label for a,link that will appear at the bottom of,that text which looks something like,that we can have it go to any of the,pages that we would like so there's that,next section rich text and image if I,wanted to I could have created a page,with some centered text and then added,that page instead of using this rich,text and image section up to you,our next section is a section of,featured promos so I'm gonna go ahead,and add section and choose featured,promotions here there's the default,appearance I'm going to go ahead and add,it to the storefront first we have some,animation decisions to make whether we,want to go with the circle animation we,have the crossed lines the double,underline and the single underline so,those are various animation styles that,you can choose between I'm gonna use,cross lines like the demo and like the,demo we have these three promos we could,choose between two or four as well if,we'd like and that would have to match,up with the number that we have the,number of promos that we actually have,selected here in the content area so,that it would be a divisor or divisible,by the features per row setting so is to,avoid any blank spaces in the layout,let's expand the promotion to see what,the settings are here so I'm gonna go,ahead and choose my first promo image,here and we've got this suggestion of,420 pixels wide as a minimum so here's,my first featured image here and I go,ahead and select it and then we can,change our heading and then select a,link I'm even going to look for this,link here I've got one product of the,vintage messenger bag so that link is,all set up now the alignment looks a,little bit funny here but once we select,images for these other two promos better,of the same dimensions as this promo,image then this alignment issue will be,negated let's go ahead and do that now,so I'm gonna go ahead and select these,other images behind the scenes and I'll,be back in a moment to show you the,result and we're back so behind the,scenes here I've just configured the,other two featured promos by selecting,their images and their link destinations,so really as easy as that,so I'm going to jump back to the master,sections list here and add our next,section which is a section of a featured,collection I'm going to go ahead and add,it and here we have our options first we,have this heading I'm gonna change that,up then we get to choose our actual,collection here I've got a selection of,homepage items so I've selected these,items specifically to appear on the,homepage so you can do that too on your,admin panel you just go to products into,collections and then create a collection,and then choose to manually select the,products and that way you can manually,select which products appear in this,specifically curated collection that is,just for the homepage,the two products I have selected and,it's choose two products per row which,works for the number of products in the,collection and if we wanted to if we had,a larger collection we could limit the,number of products that appear on the,homepage we're going to include the,sidebar with this collection here and I,have created a menu for the sidebar,looks just like that to allow access to,these collections here from this area of,the home page you can always use this,edit menu link to jump right over to the,navigation settings to adjust the,destinations of the links in that menu,the sidebar also has the ability of,showing collections the tags associated,with the products in the collection the,various types associated with the,products and then the vendors so there's,no tags on these products which is why,we don't have a tag section appearing,finally we could even have a section of,page content hopefully short enough that,it would make sense to appear here in,the sidebar but that can also be enabled,all in this area of sidebar settings but,I'm going to go ahead and remove,everything except for that one specific,menu the shop menu great so with the,first featured collection set up I'm,going to jump back to my master sections,list here and show you a section of page,content so I'm selecting the page,content section here and adding it and,then I'm selecting the page that I've,created on the pages platform I'm gonna,use this page here this is a fairly,robust piece of page content we've got,an image on the left and we have some,text on the right,featuring links and a button so this,isn't a normal section of page content,instead we've used some creative HTML,markup to create a interesting layout,for this piece of page content and I'll,show you what it looks like here in our,pages area if we go to this page that,I've created and flip over to the HTML,editor you will see that the content is,separated using these column classes and,nine column class here I've got a seven,column class here so there's an article,and I believe also a video on how to use,the column framework to create,interesting layouts so I'm going to,refer you to that video and that content,to help you out with creating these,interesting layouts this preview window,here is not accurate to how it will,actually render once it's displayed,within the theme and by using those,column frameworks those column classes,you can create a piece of page layout,that looks like this with an image on,the left and text here on the right the,best part about these sections here is,that they can be reordered you just,simply click and drag the section and,the preview window will show you how,that section will appear in its new,adjusted location,after this piece of page content we have,another featured collection which I will,add here quickly adding this guitar,cases collection with no sidebar,following that we are into our image,with text section this is what it looks,like by default we're gonna go ahead and,add that,we have two options for the layout we,can go full width which will span the,full width of the window or we can go,standard which will constrain the images,and text to the column framework the,alignment of the text that you see there,can be left center or right we're gonna,set it to center we have some,suggestions for your image sizes here,just like we do for the slideshows and,for the banners,right down here in our content areas,where we can add and reorder these,pieces of content and if we expand them,we can see the actual settings that we,get to play with so I'm going to start,by adding an image how about this one,here with the heading backpacks for,grownups,similar to featured links we have,settings for text and we have settings,for the link as well as the button label,itself so that's how you create one of,those image with text links I'm just,gonna go ahead behind the scenes here,and configure the second one and I'll be,right back,and we're back so as you see I've used,those same settings to configure the,other image with text and as you see,I've even used the bold feature here to,add a bit of styling to that text just,want to show you another couple of,tricks with these text boxes here if I,wanted to render text on the next line I,could use shift enter and then add some,text if I was looking to create a new,paragraph instead use just the Enter key,on its own and that will create a new,paragraph,so just a couple of tips so besides,italicized and bolding your text you can,also add those page breaks or those new,paragraph areas by using those quick,keyboard shortcuts so we're going to go,ahead and save that the way that it is,go back to our master sections list here,and add our next section which is,another featured collection so we'll,just go through this real quick since,you've already seen two featured,collections added to the storefront,these are our wallets our favorite,wallets we've created a collection that,has our wallets in it already and we'll,leave this section without the sidebar,section which is the logo list so here's,the logo lists default appearance I'm,going to go ahead and add it and we have,a heading setting first so there's our,heading and width we can add logos as,content as we expand the logo we see,that we've got a link option if we'd,like to link out to wherever those logos,are representing and then we've got the,actual image setting here so I'm gonna,go ahead and choose one and there it is,added to the layout so similar to the,other sections until they're all,configured with similarly sized images,they look a little bit funny so behind,the scenes here I'm gonna quickly,configure the rest of these logos and I,will be right back and we're back and it,was as easy as just configuring those,other images here to have this section,look complete so we'll go ahead and save,that jump back to our master sections,list and add our next section which is,this section of blog and Twitter feed so,there's the default appearance are going,to go ahead and add it and start by,configuring this blog posts area here so,we can change up the heading to,something else and then this is where we,select the blog that has been created on,the Shopify platform and then we choose,the number of posts that we'd like to,display here the text that appears,alongside the blog post on the home page,is actually the excerpt text of the blog,post so if you'd like text to appear on,the home page,whenever you're showing off your blog,posts make sure to add text to that,excerpt field for your home page it may,interest you to disable the author and,the date the comment count even the,continue reading link under the,impression that shoppers will know that,clicking on the title of the article,will lead to the full article page but,this will keep your homepage nice and,tidy without adding this extra info that,might not be important for the home page,itself for the Twitter feed,you simply enter your Twitter username,here and it will pull up the feed you,can change the title if you're using a,dark background for this section then,you're going to want to use the dark,Twitter theme here which will have a,lighter color for the text which will,look correct against a dark background,since we've got a light background here,we're going to keep it on light and then,you can choose the number of tweets that,you have now to be specific and,following our model we don't actually,have this piece of content in there so,I'm just going to go ahead and remove,the Twitter content leaving just the,blog posts and that section is complete,and go ahead and save that and then add,our final section before we get to the,footer which is this Instagram feed so,Instagram feed can be added just like,that here this is where you enter your,Instagram access token to generate one,use this question mark link here which,will bring you to the access token,generator generate an access token copy,it here and paste it into this setting,which will allow your Instagram feed to,appear and you can choose the number of,rows of images that appear in the feed,fantastic,so taking a look at our model compared,to our version it looks like we have,configured all of the sections in the,order that they appear on the demo home,page but I'd like to show you the rest,of the sections that we don't have,enabled here just so that you know what,you have at your fingertips when it,comes to configuring your own home page,so to do that I'm going to go to add,section collection list is one that we,don't have on our demo so you can change,the title of that the number of,collections that appear in a row then,the title and the number of items that,appear here can be enabled and disabled,the content for a collection list are,your selections of collections,done just like that and the image that,is pulled up will be either the,collection featured image,the first product image of a product,that appears in that collection or,finally an image that you select,specifically from within these settings,so heading to these links we'll go to,collection pages connected with these,images so besides the collection list,here what are the other sections we,haven't taken a look at yet so we've got,the gallery so the gallery is fairly,straightforward you can change the title,of it whether it's a full width gallery,or whether it is just within the column,framework and the number of images that,appear in the gallery the content of the,gallery are the images themselves so,it's here that you can upload images of,your choice which will appear in that,gallery format then clicking on it will,open the image in a full-size lightbox,so that's how you can create image,galleries using a section like that we,have the featured products which is a,way of featuring a product directly on,the home page can change the title of,the section or remove the title entirely,the description is this area here that,appears beside the product image and you,can remove that from this section the,vendor can appear and then currently the,products are staggered as you see but,they can appear in line like this the,content of a featured product section is,the actual selection of the product so,here we'll choose a couple of demo,products just to show you what this,looks like once it is all populated and,this is what it looks like with the,descriptions still intact,so a great way of featuring your top,products right on your homepage and,funneling your traffic to the cart into,the checkout,and we have this testimonial section,here a great way of adding testimonials,from happy customers you can change the,heading enable transparency and then the,content is the actual testimonial itself,so you've got that text box again you,can use the shift enter trick to render,text on the next line or use a just an,Enter key to start a new paragraph,and then you've got these additional,settings here to add a link and then,specify the destination of the link if,you'd like to add a link with your,testimonial and so that'll just about do,it we have gone from a fresh upload of,the theme to a version of the theme that,looks very similar to the Austin leather,goods demo if you had any questions or,you hit any snags please don't hesitate,to go to support dot out of the sandbox,com where you can search for your,question and find a plethora of,resources to help you out on your way my,name is Sean Campbell thank you for,joining me for this video guide take,care

Congratulation! You bave finally finished reading how to remove newsletter sign up for in retina theme shopify and believe you bave enougb understending how to remove newsletter sign up for in retina theme shopify

Come on and read the rest of the article!

Browse More Content